/* ==========================================================================
   1st NATO Expeditionary Force: site styles
   Palette pulled from the unit crest: NATO navy, silver, olive, desert sand.
   ========================================================================== */

:root {
  --bg: #080e1c;
  --bg-2: #0c1528;
  --panel: #101b33;
  --panel-2: #14223f;
  --navy: #1d3160;
  --line: rgba(190, 205, 230, 0.11);
  --line-strong: rgba(190, 205, 230, 0.22);
  --text: #e8edf4;
  --muted: #9aa6ba;
  --dim: #6b778c;
  --silver: #cfd6e0;
  --olive: #a3b06e;
  --olive-deep: #5f6b3a;
  --sand: #d6ad6c;
  --gold: #d4b15a;

  --radius: 4px;
  --maxw: 1180px;
  --header-h: 72px;

  --font-head: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  background:
    radial-gradient(1100px 620px at 85% -8%, rgba(29, 49, 96, 0.55), transparent 62%),
    radial-gradient(800px 520px at -12% 28%, rgba(95, 107, 58, 0.16), transparent 60%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* faint map grid behind everything */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.45;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000, transparent 80%);
          mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000, transparent 80%);
}

img { max-width: 100%; height: auto; }
a { color: var(--olive); }
a:hover { color: #c3cf8e; }
::selection { background: var(--olive); color: #0b1426; }
:focus-visible { outline: 2px solid var(--olive); outline-offset: 3px; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--silver); color: #0b1426; padding: 10px 16px; font-weight: 600;
}
.skip:focus { top: 12px; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.02;
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(44px, 6vw, 76px); }
h2 { font-size: clamp(32px, 4vw, 50px); }
h3 { font-size: 24px; letter-spacing: 0.04em; line-height: 1.1; }
h4 { font-size: 19px; letter-spacing: 0.06em; }
p { margin: 0 0 1em; }
strong { color: #fff; font-weight: 600; }

.lead { font-size: clamp(18px, 1.5vw, 20.5px); color: var(--silver); max-width: 64ch; }
.muted { color: var(--muted); }
.mono { font-family: var(--font-mono); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--olive);
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }
/* Home page section numbers (01, 02...) count themselves, so hiding a section never leaves a gap */
main { counter-reset: sec; }
.sec-num { margin-right: -2px; }
.sec-num::before { counter-increment: sec; content: counter(sec, decimal-leading-zero) " \00b7"; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: 96px 0; }
.section-tight { padding: 64px 0; }
.section-alt {
  background: linear-gradient(180deg, rgba(16, 27, 51, 0.65), rgba(16, 27, 51, 0.25));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.section-head { max-width: 760px; margin-bottom: 48px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .eyebrow::after { content: ""; width: 28px; height: 1px; background: currentColor; }
.section-head.center .lead { margin-left: auto; margin-right: auto; }

.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }

@media (max-width: 960px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .two-col { grid-template-columns: 1fr; gap: 40px; }
  .section { padding: 72px 0; }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  body { font-size: 16px; }
}

/* ---------- Icons ---------- */
[data-icon] { display: inline-flex; }
[data-icon] svg { width: 1em; height: 1em; }

.icon-box {
  width: 50px; height: 50px;
  display: grid; place-items: center;
  margin-bottom: 20px;
  color: var(--olive);
  background: rgba(163, 176, 110, 0.08);
  border: 1px solid rgba(163, 176, 110, 0.3);
  border-radius: var(--radius);
  font-size: 24px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 24px;
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn [data-icon] { font-size: 18px; }
.btn-primary { background: var(--silver); color: #0b1426; }
.btn-primary:hover { background: #fff; color: #0b1426; transform: translateY(-1px); }
.btn-ghost { background: rgba(255, 255, 255, 0.02); color: var(--text); border-color: var(--line-strong); }
.btn-ghost:hover { color: #fff; border-color: var(--olive); background: rgba(163, 176, 110, 0.08); }
.btn-sm { padding: 9px 16px; font-size: 14.5px; }

.text-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-weight: 700; font-size: 16px;
  letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
}
.text-link [data-icon] { transition: transform 0.15s ease; }
.text-link:hover [data-icon] { transform: translateX(4px); }

/* ---------- Disclaimer bar ---------- */
.site-banner {
  position: relative; z-index: 51;
  padding: 9px 24px;
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.55;
  letter-spacing: 0.14em; text-transform: uppercase; text-align: center;
  color: var(--sand);
  background: #050a14;
  border-bottom: 1px solid rgba(214, 173, 108, 0.28);
}
.site-banner strong { color: var(--sand); font-weight: 600; }
.site-banner .sep { margin: 0 10px; opacity: 0.5; }
.site-banner .unit { color: var(--silver); }
.site-banner [data-icon] { font-size: 14px; vertical-align: -2px; margin-right: 8px; }
@media (max-width: 760px) {
  .site-banner { padding: 8px 16px; font-size: 10.5px; letter-spacing: 0.08em; }
  .site-banner .sep { display: none; }
  .site-banner .unit { display: block; margin-top: 2px; }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  display: flex; align-items: center;
  background: rgba(8, 14, 28, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.site-header.scrolled { background: rgba(8, 14, 28, 0.88); border-bottom-color: var(--line); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.brand { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; }
.brand:hover { color: var(--text); }
.brand img { width: 46px; height: 46px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-text strong { font-family: var(--font-head); font-size: 23px; letter-spacing: 0.1em; }
.brand-text span {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted);
}

.nav { display: flex; align-items: center; gap: 2px; }
.nav a:not(.btn) {
  position: relative;
  padding: 8px 12px;
  font-family: var(--font-head);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
  transition: color 0.15s ease;
}
.nav a:not(.btn):hover, .nav a[aria-current="page"] { color: var(--text); }
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 1px;
  height: 2px; background: var(--olive);
}
.nav .btn { margin-left: 12px; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  font-size: 24px;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  cursor: pointer;
}

@media (max-width: 1150px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px 24px 24px;
    background: rgba(10, 17, 34, 0.98);
    border-bottom: 1px solid var(--line);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  }
  .nav.open { opacity: 1; visibility: visible; transform: none; }
  .nav a:not(.btn) { padding: 14px 2px; border-bottom: 1px solid var(--line); font-size: 18px; }
  .nav a[aria-current="page"]::after { left: auto; right: 2px; top: 50%; bottom: auto; width: 8px; height: 8px; transform: translateY(-50%) rotate(45deg); }
  .nav .btn { margin: 18px 0 0; }
}

/* ---------- Home hero ---------- */
.hero {
  position: relative;
  min-height: calc(100vh - var(--header-h));
  display: flex; align-items: center;
  padding: 48px 0 64px;
  overflow: hidden; /* the spinning ring's corners would otherwise poke out sideways on phones */
  overflow: clip;
}
.hero-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(42px, 5.4vw, 70px); margin-bottom: 18px; }
.hero h1 span { display: block; color: var(--silver); }
.hero-motto {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 26px;
  font-family: var(--font-head); font-size: 19px; font-weight: 600;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--olive);
}
.hero-motto::before, .hero-motto::after { content: "\2605"; font-size: 12px; letter-spacing: 0; color: var(--silver); opacity: 0.7; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

.hero-logo { position: relative; display: grid; place-items: center; }
.hero-logo::before {
  content: "";
  position: absolute;
  width: 92%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(60, 90, 160, 0.35), transparent 65%);
  filter: blur(20px);
}
.hero-logo::after {
  content: "";
  position: absolute;
  width: 112%; aspect-ratio: 1;
  border-radius: 50%;
  border: 1px dashed var(--line-strong);
  animation: spin 120s linear infinite;
}
.hero-logo img {
  position: relative; z-index: 1;
  width: 100%; max-width: 440px;
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.55));
}
@keyframes spin { to { transform: rotate(360deg); } }

.stats {
  display: grid; grid-template-columns: repeat(5, 1fr);
  margin-top: 64px;
  background: rgba(16, 27, 51, 0.55);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.stat { padding: 22px 24px; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat b { display: block; font-family: var(--font-head); font-size: 30px; font-weight: 700; letter-spacing: 0.03em; line-height: 1.15; }
.stat span { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

@media (max-width: 960px) {
  .hero { min-height: 0; }
  .hero-grid { grid-template-columns: 1fr; text-align: center; gap: 36px; }
  .hero-logo { order: -1; }
  .hero-logo img { max-width: 260px; }
  .hero-motto, .hero-actions { justify-content: center; }
  .hero .eyebrow::before { display: none; }
  .hero .lead { margin-left: auto; margin-right: auto; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat { border-bottom: 1px solid var(--line); }
  .stat:nth-child(even) { border-right: 0; }
  .stat:last-child { grid-column: 1 / -1; border-bottom: 0; }
}

/* ---------- Sub-page hero ---------- */
.page-hero {
  position: relative;
  overflow: hidden;
  padding: 96px 0 72px;
  border-bottom: 1px solid var(--line);
}
.page-hero::after {
  content: "";
  position: absolute;
  right: -90px; top: 50%;
  width: 460px; height: 460px;
  transform: translateY(-42%);
  background: url("../assets/img/logo.webp") center / contain no-repeat;
  opacity: 0.07;
  filter: grayscale(1);
  pointer-events: none;
}
.page-hero .container { position: relative; z-index: 1; }
@media (max-width: 760px) {
  .page-hero { padding: 64px 0 56px; }
  .page-hero::after { width: 300px; height: 300px; right: -120px; }
}

/* ---------- Cards ---------- */
.card {
  position: relative;
  padding: 30px;
  background: linear-gradient(180deg, var(--panel), rgba(16, 27, 51, 0.55));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.card:hover { border-color: var(--line-strong); }
.card h3 { margin-top: 0; }
.card p { color: var(--muted); }
.card p:last-child { margin-bottom: 0; }
.card.bracket::before, .card.bracket::after {
  content: ""; position: absolute; width: 16px; height: 16px;
  border: 0 solid var(--olive);
}
.card.bracket::before { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.card.bracket::after { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }
.card-lg { padding: 40px; }
.card-lg p { font-size: 17.5px; }

.card-tag {
  position: absolute; top: 24px; right: 26px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--dim);
}

.badge {
  display: inline-block;
  padding: 4px 10px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--silver);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
}
.badge-olive { color: var(--olive); border-color: rgba(163, 176, 110, 0.45); background: rgba(163, 176, 110, 0.08); }
.badge-sand { color: var(--sand); border-color: rgba(214, 173, 108, 0.45); background: rgba(214, 173, 108, 0.08); }

/* checklist */
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { position: relative; padding: 10px 0 10px 32px; border-bottom: 1px solid var(--line); color: var(--silver); }
.checklist li:last-child { border-bottom: 0; }
.checklist li::before {
  content: ""; position: absolute; left: 4px; top: 19px;
  width: 9px; height: 9px; border: 2px solid var(--olive); transform: rotate(45deg);
}

/* ---------- Split (two sides of one coin) ---------- */
.split {
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: rgba(16, 27, 51, 0.5);
}
.split > div { padding: 44px; }
.split > div + div { border-left: 1px solid var(--line); }
.split-label {
  display: inline-block; margin-bottom: 14px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--olive);
}
.split > div + div .split-label { color: var(--sand); }
.split > div + div .checklist li::before { border-color: var(--sand); }
@media (max-width: 760px) {
  .split { grid-template-columns: 1fr; }
  .split > div { padding: 30px; }
  .split > div + div { border-left: 0; border-top: 1px solid var(--line); }
}

/* ---------- Era timeline ---------- */
.timeline { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); }
.timeline::before {
  content: ""; position: absolute; top: 11px; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, rgba(207, 214, 224, 0.35), var(--olive) 50%, var(--sand));
}
.era { position: relative; padding: 42px 22px 0 0; }
.era::before {
  content: ""; position: absolute; top: 4px; left: 0;
  width: 16px; height: 16px;
  background: var(--bg); border: 2px solid var(--olive); transform: rotate(45deg);
}
.era-years { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.1em; color: var(--olive); }
.era h3 { font-size: 23px; margin: 6px 0 10px; }
.era p { font-size: 15.5px; color: var(--muted); margin: 0; }
@media (max-width: 960px) {
  .timeline { grid-template-columns: 1fr; gap: 30px; }
  .timeline::before { top: 0; bottom: 0; left: 7px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, rgba(207, 214, 224, 0.35), var(--olive) 50%, var(--sand)); }
  .era { padding: 0 0 0 44px; }
}

/* ---------- Feature tiles ---------- */
.tile {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 22px;
  background: rgba(16, 27, 51, 0.6);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.tile .icon-box { margin: 0; flex: none; width: 46px; height: 46px; font-size: 22px; }
.tile h4 { margin: 2px 0 4px; }
.tile p { margin: 0; font-size: 15px; color: var(--muted); line-height: 1.5; }

/* ---------- Cycle (garrison -> deployed) ---------- */
.cycle { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 40px; }
.cycle-step { position: relative; text-align: center; padding: 0 12px; }
.cycle-step .icon-box { margin: 0 auto 14px; width: 64px; height: 64px; font-size: 28px; border-radius: 50%; }
.cycle-step:not(:last-child)::after {
  content: ""; position: absolute; top: 32px; left: calc(50% + 44px); right: calc(-50% + 44px);
  border-top: 2px dashed var(--line-strong);
}
.cycle-step h4 { margin-bottom: 4px; }
.cycle-step p { font-size: 15px; color: var(--muted); margin: 0; }
.cycle-step.deployed .icon-box { color: var(--sand); background: rgba(214, 173, 108, 0.08); border-color: rgba(214, 173, 108, 0.35); }
@media (max-width: 760px) {
  .cycle { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .cycle-step::after { display: none; }
}

/* ---------- Schedule ---------- */
.sched { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sched-card { display: flex; flex-direction: column; }
.sched-card .row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.sched-card .icon-box { margin: 0; }
.sched-day { font-family: var(--font-head); font-size: 40px; font-weight: 700; text-transform: uppercase; line-height: 1; margin-bottom: 4px; }
.sched-title { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--olive); margin-bottom: 14px; }
.sched-card p { flex: 1; }
.sched-time {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 13px; color: var(--silver); line-height: 1.6;
}
.sched-time small { display: block; color: var(--dim); font-size: 12px; }
.sched-card.next { border-color: rgba(163, 176, 110, 0.5); }
@media (max-width: 960px) { .sched { grid-template-columns: 1fr; } }

.countdown {
  display: flex; flex-wrap: wrap; align-items: center; gap: 22px;
  margin-bottom: 28px; padding: 22px 26px;
  background: rgba(163, 176, 110, 0.06);
  border: 1px solid rgba(163, 176, 110, 0.3);
  border-radius: var(--radius);
}
.countdown-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--olive); }
.countdown-label b { display: block; font-family: var(--font-head); font-size: 22px; letter-spacing: 0.04em; color: var(--text); }
.countdown-units { display: flex; gap: 10px; margin-left: auto; }
.countdown-units div { min-width: 70px; text-align: center; padding: 8px 6px; background: rgba(8, 14, 28, 0.6); border: 1px solid var(--line); }
.countdown-units b { display: block; font-family: var(--font-head); font-size: 32px; line-height: 1; }
.countdown-units span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; color: var(--muted); text-transform: uppercase; }
.live-dot { display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: #e05d4f; box-shadow: 0 0 0 0 rgba(224, 93, 79, 0.6); animation: pulse 1.6s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(224, 93, 79, 0); } 100% { box-shadow: 0 0 0 0 rgba(224, 93, 79, 0); } }
@media (max-width: 640px) { .countdown-units { margin-left: 0; } .countdown-units div { min-width: 60px; } }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center;
  padding: 56px;
  background: linear-gradient(120deg, var(--navy), #0f1a33 65%);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}
.cta-band::after {
  content: ""; position: absolute; right: -60px; bottom: -120px;
  width: 360px; height: 360px;
  background: url("../assets/img/logo.webp") center / contain no-repeat;
  opacity: 0.08; filter: grayscale(1);
  pointer-events: none;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { margin-bottom: 10px; }
.cta-band .lead { margin: 0; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 860px) { .cta-band { grid-template-columns: 1fr; padding: 36px; } }

/* ---------- Notices / empty states ---------- */
.notice {
  display: flex; gap: 14px; align-items: flex-start;
  margin-bottom: 32px; padding: 16px 20px;
  font-size: 15.5px; color: var(--silver);
  background: rgba(214, 173, 108, 0.06);
  border: 1px solid rgba(214, 173, 108, 0.35);
  border-radius: var(--radius);
}
.notice [data-icon] { flex: none; margin-top: 3px; font-size: 20px; color: var(--sand); }
.notice p { margin: 0; }

.empty {
  padding: 64px 28px;
  text-align: center;
  background: rgba(16, 27, 51, 0.35);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
}
.empty .icon-box { margin: 0 auto 20px; width: 64px; height: 64px; font-size: 28px; }
.empty h3 { margin-bottom: 8px; }
.empty p { color: var(--muted); max-width: 52ch; margin: 0 auto 22px; }
.empty p:last-child { margin-bottom: 0; }

/* ---------- Steps (join) ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; }
.step { counter-increment: step; }
.step::before {
  content: "0" counter(step);
  display: block; margin-bottom: 14px;
  font-family: var(--font-head); font-size: 54px; font-weight: 700; line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--olive);
}
.step h3 { font-size: 22px; }
@media (max-width: 960px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 20px 0;
  font-family: var(--font-head); font-size: 21px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 28px; font-weight: 500; color: var(--olive); line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { color: var(--muted); padding-bottom: 8px; max-width: 70ch; }

/* ---------- Handbook / docs ---------- */
.doc-layout { display: grid; grid-template-columns: 230px 1fr; gap: 64px; align-items: start; }
.toc { position: sticky; top: calc(var(--header-h) + 28px); }
.toc-title { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); margin-bottom: 12px; }
.toc a {
  display: block; padding: 8px 0 8px 16px;
  font-size: 15px; color: var(--muted); text-decoration: none;
  border-left: 2px solid var(--line);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.toc a:hover { color: var(--text); }
.toc a.active { color: var(--text); border-left-color: var(--olive); }

.doc { min-width: 0; }
.doc > section { padding-bottom: 52px; margin-bottom: 52px; border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 24px); }
.doc > section:last-child { border-bottom: 0; margin-bottom: 0; }
.doc h2 { font-size: clamp(30px, 3.2vw, 40px); }
.doc h2 .num { color: var(--olive); margin-right: 12px; }
.doc h3 { font-size: 21px; margin-top: 30px; }
.doc p, .doc li { color: var(--silver); }
.doc ul, .doc ol { padding-left: 22px; }
.doc li { margin-bottom: 6px; }
.doc li::marker { color: var(--olive); }

.table-wrap { overflow-x: auto; margin: 18px 0; border: 1px solid var(--line); border-radius: var(--radius); }
.doc table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.doc th, .doc td { padding: 11px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc tr:last-child td { border-bottom: 0; }
.doc th { font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); background: rgba(16, 27, 51, 0.6); }
.doc td:first-child { font-family: var(--font-mono); color: var(--olive); white-space: nowrap; }

.callout { margin: 22px 0; padding: 16px 20px; border-left: 3px solid var(--olive); background: rgba(163, 176, 110, 0.07); }
.callout p:last-child { margin: 0; }

.radio {
  margin: 18px 0;
  padding: 18px 22px;
  font-family: var(--font-mono); font-size: 14.5px; line-height: 1.9;
  color: var(--silver);
  background: #060b17;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow-x: auto;
}
.radio .who { color: var(--olive); }
.radio .note { color: var(--dim); }

@media (max-width: 960px) {
  .doc-layout { grid-template-columns: 1fr; gap: 32px; }
  .toc { position: static; display: flex; flex-wrap: wrap; gap: 8px; }
  .toc-title { width: 100%; margin-bottom: 4px; }
  .toc a { border: 1px solid var(--line); border-radius: 2px; padding: 6px 12px; font-size: 14px; }
  .toc a.active { border-color: var(--olive); }
}

/* ---------- ORBAT chart ---------- */
.orbat { display: flex; flex-direction: column; align-items: center; }
.orbat-node {
  --accent: var(--olive);
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 22px 18px 20px;
  text-align: center; text-decoration: none; color: var(--text);
  background: linear-gradient(180deg, var(--panel), rgba(16, 27, 51, 0.6));
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.orbat-node:hover { color: var(--text); transform: translateY(-2px); border-color: var(--line-strong); border-top-color: var(--accent); }
.orbat-node .icon-box {
  margin: 6px 0 4px;
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.orbat-node strong { font-family: var(--font-head); font-size: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.1; }
.orbat-series, .orbat-count { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; }
.orbat-series { color: var(--accent); }
.orbat-count { color: var(--dim); }
.orbat-root { width: min(100%, 380px); }
.orbat-root strong { font-size: 24px; }
.orbat-stem { width: 2px; height: 32px; background: var(--line-strong); }
.orbat-children {
  --n: 4;
  position: relative;
  display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 20px;
  width: 100%; padding-top: 32px;
}
.orbat-children::before {
  content: ""; position: absolute; top: 0; height: 2px; background: var(--line-strong);
  left: calc((100% - (var(--n) - 1) * 20px) / var(--n) / 2);
  right: calc((100% - (var(--n) - 1) * 20px) / var(--n) / 2);
}
.orbat-children > .orbat-node::before {
  content: ""; position: absolute; left: 50%; top: -35px;
  width: 2px; height: 32px; margin-left: -1px; background: var(--line-strong);
}
@media (max-width: 860px) {
  .orbat-children { grid-template-columns: repeat(2, 1fr); }
  .orbat-children::before, .orbat-children > .orbat-node::before { display: none; }
  .orbat-stem { height: 20px; }
  .orbat-children { padding-top: 20px; }
}
@media (max-width: 480px) { .orbat-children { grid-template-columns: 1fr; } }

.detach-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.detach-grid .orbat-node strong { font-size: 18px; }
@media (max-width: 1020px) { .detach-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px) { .detach-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .detach-grid { grid-template-columns: 1fr; } }

/* ---------- MOS registry ---------- */
.mos-group { --accent: var(--olive); scroll-margin-top: calc(var(--header-h) + 24px); }
.mos-group + .mos-group { margin-top: 56px; }
.mos-head { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.mos-head .icon-box {
  margin: 0; flex: none;
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.mos-head h3 { margin: 0; font-size: clamp(22px, 2.4vw, 28px); }
.mos-head .badge { margin-left: auto; }
.mos-series { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 2px; }
.mos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.mos {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 18px 20px;
  background: rgba(16, 27, 51, 0.55);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius);
}
.mos-code { flex: none; min-width: 48px; font-family: var(--font-head); font-size: 30px; font-weight: 700; line-height: 1; color: var(--accent); }
.mos h4 { margin: 0 0 4px; font-size: 18px; }
.mos h4 .mos-select { margin-left: 6px; vertical-align: 2px; font-size: 10.5px; }
.mos p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--muted); }
@media (max-width: 560px) { .mos-grid { grid-template-columns: 1fr; } .mos-head .badge { display: none; } }

/* ---------- Ranks ---------- */
.rank-group + .rank-group { margin-top: 48px; }
.rank-group-title { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.rank-group-title h3 { margin: 0; }
.rank-group-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.rank-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 16px; }
.rank {
  padding: 24px 16px 20px; text-align: center;
  background: linear-gradient(180deg, var(--panel), rgba(16, 27, 51, 0.5));
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.rank:hover { border-color: rgba(163, 176, 110, 0.45); transform: translateY(-2px); }
.rank svg { display: block; width: 84px; height: 100px; margin: 0 auto 16px; }
.rank-code { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em; color: var(--olive); }
.rank-name { font-family: var(--font-head); font-size: 20px; font-weight: 700; text-transform: uppercase; line-height: 1.15; margin: 4px 0 2px; }
.rank-abbr { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); }
.rank-role {
  margin-top: 12px; padding-top: 12px;
  font-size: 14px; line-height: 1.35; color: var(--silver);
  border-top: 1px solid var(--line);
}

/* ---------- Operations log (AAR) ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.chip {
  padding: 7px 14px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); background: transparent;
  border: 1px solid var(--line-strong); border-radius: 2px;
  cursor: pointer;
}
.chip:hover { color: var(--text); }
.chip[aria-pressed="true"] { color: #0b1426; background: var(--olive); border-color: var(--olive); }

.aar { display: grid; grid-template-columns: 150px 1fr; gap: 28px; padding: 30px 0; border-top: 1px solid var(--line); }
.aar:last-child { border-bottom: 1px solid var(--line); }
.aar-date { font-family: var(--font-mono); font-size: 13.5px; color: var(--silver); }
.aar-date span { display: block; color: var(--dim); font-size: 12px; margin-top: 4px; }
.aar h3 { margin-bottom: 10px; }
.aar-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.aar p { color: var(--muted); margin-bottom: 0; }
.aar .text-link { margin-top: 14px; }
@media (max-width: 640px) { .aar { grid-template-columns: 1fr; gap: 10px; } }

/* ---------- Gallery ---------- */
.gallery { columns: 3 300px; column-gap: 16px; }
.gallery figure {
  position: relative; overflow: hidden;
  margin: 0 0 16px; break-inside: avoid;
  border: 1px solid var(--line); border-radius: var(--radius);
  cursor: zoom-in; background: var(--panel);
}
.gallery img { display: block; width: 100%; transition: transform 0.5s ease; }
.gallery figure:hover img { transform: scale(1.03); }
.gallery figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 36px 16px 14px;
  font-size: 14.5px;
  background: linear-gradient(transparent, rgba(4, 8, 16, 0.9));
  opacity: 0; transition: opacity 0.2s ease;
}
.gallery figure:hover figcaption, .gallery figure:focus-visible figcaption { opacity: 1; }

.lightbox {
  position: fixed; inset: 0; z-index: 100;
  display: none; place-items: center;
  padding: 60px 24px 40px;
  background: rgba(4, 8, 16, 0.95);
}
.lightbox.open { display: grid; }
.lightbox figure { margin: 0; text-align: center; }
.lightbox img { max-width: min(1200px, 100%); max-height: 78vh; border: 1px solid var(--line); }
.lightbox figcaption { margin-top: 14px; color: var(--silver); }
.lightbox button {
  position: absolute;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  font-size: 24px; color: var(--text);
  background: rgba(16, 27, 51, 0.8); border: 1px solid var(--line-strong); border-radius: 50%;
  cursor: pointer;
}
.lightbox button:hover { border-color: var(--olive); }
.lb-close { top: 16px; right: 16px; }
.lb-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 16px; top: 50%; transform: translateY(-50%); }

/* ---------- Footer ---------- */
.site-footer { padding: 72px 0 32px; background: #060b17; border-top: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 48px; }
.footer-brand { display: flex; gap: 18px; align-items: flex-start; }
.footer-brand img { width: 76px; height: 76px; flex: none; }
.footer-brand strong { display: block; font-family: var(--font-head); font-size: 22px; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.15; }
.footer-brand em { display: block; margin: 4px 0 12px; font-style: normal; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--olive); }
.footer-brand p { color: var(--muted); font-size: 15px; margin: 0; }
.footer-col h4 { font-size: 15px; letter-spacing: 0.14em; color: var(--muted); margin-bottom: 14px; }
.footer-col a { display: block; padding: 5px 0; color: var(--silver); text-decoration: none; font-size: 15.5px; }
.footer-col a:hover { color: var(--olive); }
.footer-col .staff-link {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 10px; padding: 6px 12px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line-strong); border-radius: 2px;
}
.footer-col .staff-link:hover { color: var(--text); border-color: var(--olive); }
.footer-col .staff-link [data-icon] { font-size: 14px; }
.disclaimer {
  margin-top: 56px; padding-top: 24px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px;
  font-size: 13px; color: var(--dim);
  border-top: 1px solid var(--line);
}
.disclaimer p { margin: 0; max-width: 80ch; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- Forms ---------- */
.apply-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; }
.apply-aside { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 20px; }
.apply-aside h3 { font-size: 21px; }
.apply-aside .btn { margin-top: 18px; width: 100%; }
.next-steps { margin: 0; padding-left: 20px; color: var(--silver); }
.next-steps li { margin-bottom: 8px; }
.next-steps li::marker { color: var(--olive); font-family: var(--font-mono); }
@media (max-width: 960px) {
  .apply-layout { grid-template-columns: 1fr; }
  .apply-aside { position: static; order: -1; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) { .apply-aside { grid-template-columns: 1fr; } }

.apply-form fieldset { border: 0; padding: 0; margin: 0 0 40px; min-width: 0; }
.apply-form legend {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 0 0 14px; margin-bottom: 22px;
  font-family: var(--font-head); font-size: 24px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}
.apply-form legend span { font-family: var(--font-mono); font-size: 13px; font-weight: 400; color: var(--olive); letter-spacing: 0.1em; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 20px; }
.field.full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

.field > label:not(.check) {
  display: block; margin-bottom: 8px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--silver);
}
.req { color: var(--sand); }
.field input:not([type="checkbox"]), .field select, .field textarea {
  width: 100%;
  padding: 12px 14px;
  font: inherit; font-size: 16px; color: var(--text);
  background: #0a1326;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
.field select {
  appearance: none; -webkit-appearance: none;
  padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3b06e' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px;
}
.field select option, .field select optgroup { background: #0c1528; color: var(--text); }
.field input::placeholder, .field textarea::placeholder { color: var(--dim); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--olive); box-shadow: 0 0 0 3px rgba(163, 176, 110, 0.18);
}
.field [aria-invalid="true"] { border-color: #ec8b7b !important; }
.field .hint { margin: 6px 0 0; font-size: 13.5px; color: var(--dim); }
.field .field-error { margin: 6px 0 0; font-size: 14px; color: #ec8b7b; }
.field .field-error:empty { display: none; }

.check {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 16px;
  color: var(--silver); cursor: pointer;
  background: rgba(16, 27, 51, 0.5);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.check:hover { border-color: var(--line-strong); }
.check input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--olive); cursor: pointer; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-error {
  margin-bottom: 24px; padding: 14px 18px;
  color: #f2b3a8;
  background: rgba(236, 139, 123, 0.08);
  border: 1px solid rgba(236, 139, 123, 0.4);
  border-radius: var(--radius);
}
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; padding-top: 8px; }
.form-actions p { margin: 0; font-size: 14.5px; }
.btn[disabled] { opacity: 0.6; cursor: wait; transform: none; }

/* Discord check on the apply page */
.discord-gate .icon-box { width: 60px; height: 60px; font-size: 28px; }
.discord-gate h2 { font-size: clamp(28px, 3vw, 38px); margin-top: 4px; }
.discord-gate .form-error { margin: 0 0 20px; }
.gate-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 18px; }
.small-print { margin: 0; font-size: 14px; }
.btn-discord { background: #5865f2; color: #fff; }
.btn-discord:hover { background: #6d78f5; color: #fff; transform: translateY(-1px); }
.linklike {
  padding: 0; font: inherit; font-size: 14px; color: var(--olive);
  background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.linklike:hover { color: #c3cf8e; }
.discord-user { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.discord-user img { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--panel-2); }
.discord-user strong { display: block; font-size: 16px; line-height: 1.2; }
.discord-user .mono { font-size: 12.5px; color: var(--muted); }
.verified-chip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
  margin-bottom: 24px; padding: 14px 18px;
  background: rgba(163, 176, 110, 0.06);
  border: 1px solid rgba(163, 176, 110, 0.35); border-radius: var(--radius);
}
.verified-chip .discord-user { margin: 0; flex: 1; min-width: 180px; }
.card .role-note { color: var(--text); }
.role-note .ico, .role-note [data-icon] { color: var(--olive); vertical-align: -2px; }

.apply-success .icon-box { width: 64px; height: 64px; font-size: 30px; }
.apply-success:focus { outline: none; }

/* ---------- Command Console ---------- */
.admin { background: var(--bg); }
.admin-bar {
  position: sticky; top: 0; z-index: 50;
  height: 64px; display: flex; align-items: center;
  background: rgba(8, 14, 28, 0.92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.admin-bar .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1400px; }
.admin-bar .brand img { width: 40px; height: 40px; }
.admin-user { display: flex; align-items: center; gap: 10px; }
.admin-name { font-size: 13px; color: var(--muted); margin-right: 6px; }
.admin-main { padding: 40px 0 80px; min-height: calc(100vh - 64px); }
.admin-main .container { max-width: 1400px; }

.login-wrap { display: grid; place-items: center; min-height: 70vh; padding: 0 20px; }
.login-card { width: min(420px, 100%); }
.login-card img { display: block; margin-bottom: 14px; }
.login-card h1 { font-size: 36px; margin-bottom: 6px; }
.login-card .field { margin-bottom: 18px; }
.login-card .btn { width: 100%; margin-top: 6px; }

.admin-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.admin-head h1 { font-size: clamp(36px, 4vw, 48px); margin: 0; }
.admin-tabs { margin: 0; }
.chip-count { opacity: 0.7; margin-left: 2px; }

.admin-layout { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 24px; align-items: start; }
.app-list { display: flex; flex-direction: column; gap: 8px; max-height: calc(100vh - 230px); overflow-y: auto; padding-right: 4px; }
.app-list .empty { padding: 48px 20px; }
.app-item {
  width: 100%; padding: 14px 16px;
  font: inherit; text-align: left; color: var(--text); cursor: pointer;
  background: rgba(16, 27, 51, 0.55);
  border: 1px solid var(--line); border-left: 3px solid var(--line-strong);
  border-radius: var(--radius);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.app-item:hover { border-color: var(--line-strong); }
.app-item.s-pending { border-left-color: var(--sand); }
.app-item.s-accepted { border-left-color: var(--olive); }
.app-item.s-denied { border-left-color: #ec8b7b; }
.app-item[aria-current="true"] { background: rgba(163, 176, 110, 0.09); border-color: rgba(163, 176, 110, 0.55); }
.app-item-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.app-item strong { font-family: var(--font-head); font-size: 19px; letter-spacing: 0.03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-item-meta { margin-top: 4px; font-family: var(--font-mono); font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.app-detail { position: sticky; top: 88px; padding: 32px; }
.app-detail.is-empty { padding: 64px 32px; }
.app-detail:hover { border-color: var(--line); }
.detail-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 20px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.detail-head h2 { font-size: 34px; margin: 6px 0 10px; word-break: break-word; }
.app-answers { display: grid; grid-template-columns: 190px minmax(0, 1fr); margin: 0; }
.app-answers dt, .app-answers dd { padding: 12px 0; border-bottom: 1px solid var(--line); }
.app-answers dt { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); padding-top: 15px; }
.app-answers dd { margin: 0; color: var(--text); word-break: break-word; }
.app-answers dd.long { white-space: pre-wrap; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 12px; }
.notes-field { margin-top: 24px; }
.notes-field .btn { margin-top: 10px; }
.danger-zone { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.small { font-size: 12.5px; }
.dim { color: var(--dim); }
.ico { display: inline-flex; font-size: 16px; }
.ico svg { width: 1em; height: 1em; }

.btn-accept { background: var(--olive); color: #0b1426; }
.btn-accept:hover { background: #b8c585; color: #0b1426; }
.btn-danger { background: transparent; color: #ec8b7b; border-color: rgba(236, 139, 123, 0.45); }
.btn-danger:hover { color: #f2b3a8; background: rgba(236, 139, 123, 0.1); border-color: #ec8b7b; }
.badge-red { color: #ec8b7b; border-color: rgba(236, 139, 123, 0.45); background: rgba(236, 139, 123, 0.08); }

.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 200;
  padding: 12px 20px;
  font-size: 15px; color: var(--text);
  background: var(--panel-2); border: 1px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  opacity: 0; transform: translate(-50%, 10px); pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 900px) {
  .admin-layout { grid-template-columns: 1fr; }
  .app-list { max-height: none; }
  .app-detail { position: static; padding: 24px; }
  .app-answers { grid-template-columns: 1fr; }
  .app-answers dt { border-bottom: 0; padding-bottom: 0; }
}
@media (max-width: 560px) {
  .admin-user .lbl, .admin-name { display: none; }
}

/* ---------- Scroll reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .hero-logo::after, .live-dot { animation: none; }
}

/* ---------- Utilities ---------- */
.mt-0 { margin-top: 0; }
.mt-32 { margin-top: 32px; }
.mt-48 { margin-top: 48px; }
.center { text-align: center; }
.hidden { display: none !important; }

/* Discord status in the Command Console */
.discord-box { display: grid; gap: 10px; margin: 18px 0 8px; padding: 14px 16px; background: rgba(16, 27, 51, 0.6); border: 1px solid var(--line); border-radius: var(--radius); }
.discord-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.card p.role-error { margin: 0; color: #f2b3a8; }

/* Console tabs + staff management */
.admin-nav { display: flex; gap: 4px; margin-right: auto; margin-left: 28px; }
.admin-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  font-family: var(--font-head); font-size: 15px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
}
.admin-tab:hover { color: var(--text); }
.admin-tab[aria-current="page"] { color: var(--text); border-bottom-color: var(--olive); }
.admin-tab [data-icon] { font-size: 17px; }
.admin-head-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.admin-name .badge { margin-left: 6px; }
.login-help { margin-top: 16px; text-align: center; }

.staff-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; }
.staff-intro { margin-bottom: 18px; }
.staff-list { display: grid; gap: 10px; }
.staff-item {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 18px;
  background: rgba(16, 27, 51, 0.55);
  border: 1px solid var(--line); border-left: 3px solid var(--line-strong); border-radius: var(--radius);
}
.staff-item.is-master { border-left-color: var(--olive); }
.staff-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; }
.staff-name strong { font-family: var(--font-head); font-size: 20px; letter-spacing: 0.03em; }
.staff-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.staff-form h3 { display: flex; align-items: center; gap: 10px; font-size: 22px; }
.staff-form h3 [data-icon] { color: var(--olive); }
.staff-form .field { margin-bottom: 18px; }
.staff-form .btn[type="submit"] { width: 100%; }
.input-row { display: flex; gap: 8px; }
.input-row input { flex: 1; min-width: 0; font-family: var(--font-mono); }

.cred-card { margin-bottom: 24px; border-color: rgba(163, 176, 110, 0.5); background: rgba(163, 176, 110, 0.07); }
.cred-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.cred-head strong { font-family: var(--font-head); font-size: 20px; text-transform: uppercase; letter-spacing: 0.04em; }
.cred-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 8px; }
.cred-row .mono { min-width: 80px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; }
.cred-row code { padding: 6px 10px; font-size: 15px; color: var(--text); background: #060b17; border: 1px solid var(--line); border-radius: 2px; user-select: all; }
.cred-card p.small { margin: 8px 0 0; color: var(--silver); }

.pw-card { max-width: 520px; }
.pw-card .field { margin-bottom: 18px; }
.pw-card .small-print { margin-top: 14px; }

@media (max-width: 960px) {
  .staff-layout { grid-template-columns: 1fr; }
  .staff-form { order: -1; }
  .admin-nav { margin-left: 12px; }
}
/* the console tabs don't fit beside the logo on smaller screens: give them their own row */
@media (max-width: 1400px) {
  .admin-bar { height: auto; padding-top: 8px; }
  .admin-bar .container { flex-wrap: wrap; row-gap: 2px; }
  .admin-nav { order: 3; flex: 1 0 100%; margin: 0; overflow-x: auto; scrollbar-width: none; }
  .admin-tab { flex: none; }
}
@media (max-width: 720px) {
  .admin-nav .lbl { display: none; }
  .admin-tab { padding: 8px 10px; }
}

/* ==========================================================================
   PROMOTIONS PAGE
   ========================================================================== */
.tig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tig-card { text-align: center; padding: 34px 24px 30px; }
.tig-card .icon-box { margin: 0 auto 18px; }
.tig-value { font-family: var(--font-head); font-size: 64px; font-weight: 700; line-height: 1; color: var(--text); }
.tig-value span { margin-left: 8px; font-size: 22px; letter-spacing: 0.1em; color: var(--olive); }
.tig-label { margin-top: 10px; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.tig-rules { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 22px 0 0; padding: 0; }
.tig-rules li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 16px 18px; color: var(--silver);
  background: rgba(214, 173, 108, 0.06); border: 1px solid rgba(214, 173, 108, 0.35); border-radius: var(--radius);
}
.tig-rules .ico { flex: none; margin-top: 3px; font-size: 19px; color: var(--sand); }
@media (max-width: 760px) { .tig-grid, .tig-rules { grid-template-columns: 1fr; } }

.promo-tier + .promo-tier { margin-top: 44px; }
.tier-note {
  display: inline-flex; align-items: center; gap: 10px;
  margin: -4px 0 18px; padding: 8px 14px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sand);
  background: rgba(214, 173, 108, 0.06); border: 1px solid rgba(214, 173, 108, 0.35); border-radius: var(--radius);
}
.tier-note .ico { font-size: 16px; }
.promo-steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(275px, 1fr)); gap: 14px; }
.promo-step {
  display: flex; gap: 16px; align-items: flex-start; padding: 18px;
  background: linear-gradient(180deg, var(--panel), rgba(16, 27, 51, 0.5));
  border: 1px solid var(--line); border-radius: var(--radius);
}
.promo-step > svg { flex: none; width: 50px; height: 60px; }
.promo-step > img { flex: none; width: 50px !important; height: 60px !important; margin: 0 !important; }
.promo-step-body { min-width: 0; }
.promo-rank strong { display: block; font-family: var(--font-head); font-size: 20px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.1; }
.promo-rank .mono { font-size: 12px; color: var(--muted); }
.promo-text { margin: 10px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--muted); }
.promo-footnote { margin: 28px 0 0; font-size: 15px; color: var(--muted); }

.req-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.req-chip {
  display: inline-block; padding: 3px 8px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; line-height: 1.4; white-space: nowrap;
  color: var(--silver); background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line-strong); border-radius: 2px;
}
.req-tig { font-weight: 600; color: #0b1426; background: var(--olive); border-color: var(--olive); }
.req-board { color: var(--sand); border-color: rgba(214, 173, 108, 0.45); }
.req-select { color: var(--gold); border-color: rgba(212, 177, 90, 0.45); }

/* Tracker (read-only) */
.tracker-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 22px; background: rgba(16, 27, 51, 0.5); border: 1px solid var(--line); border-radius: var(--radius); }
.tracker-stats div { padding: 16px 22px; border-right: 1px solid var(--line); }
.tracker-stats div:last-child { border-right: 0; }
.tracker-stats b { display: block; font-family: var(--font-head); font-size: 34px; line-height: 1.1; }
.tracker-stats span { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.tracker-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 16px; }
.tracker-tools .chips { margin: 0; }
.tracker-tools input, .sheet-search {
  min-width: 230px; padding: 9px 14px;
  font: inherit; font-size: 15px; color: var(--text);
  background: rgba(8, 14, 28, 0.6); border: 1px solid var(--line-strong); border-radius: var(--radius);
}
.tracker-tools input:focus, .sheet-search:focus { outline: none; border-color: var(--olive); }
.tracker-tools input::placeholder, .sheet-search::placeholder { color: var(--dim); }
.tracker-wrap { margin: 0; }
.tracker { width: 100%; border-collapse: collapse; font-size: 15px; }
.tracker th, .tracker td { padding: 12px 16px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); }
.tracker thead th { font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); background: rgba(8, 14, 28, 0.5); white-space: nowrap; }
.tracker tbody tr:last-child > * { border-bottom: 0; }
.tracker tbody tr:hover { background: rgba(255, 255, 255, 0.02); }
.tracker tbody th { font-weight: 400; }
.tracker tbody th strong { font-family: var(--font-head); font-size: 19px; letter-spacing: 0.03em; }
.tracker tr.v-eligible > th { box-shadow: inset 3px 0 0 var(--olive); }
.tracker tr.v-board > th { box-shadow: inset 3px 0 0 var(--sand); }
.tracker .req-chips { margin: 0; }
.t-rank { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.mini-ins { display: inline-flex; flex: none; }
.mini-ins svg { display: block; width: 26px; height: 31px; }
.mini-ins img { width: 26px !important; height: 31px !important; margin: 0 !important; }
.t-rank b, .t-stack b { display: block; line-height: 1.2; }
.t-rank small, .t-stack small, .t-progress small { display: block; font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.t-next { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.t-progress .t-next { margin-bottom: 7px; }
.t-to { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 13px; color: var(--silver); white-space: nowrap; }
.t-to svg { width: 14px; height: 14px; color: var(--olive); }
.bar { width: 100%; max-width: 220px; min-width: 110px; height: 6px; margin-bottom: 5px; overflow: hidden; background: rgba(255, 255, 255, 0.08); border-radius: 3px; }
.bar i { display: block; height: 100%; background: var(--olive); border-radius: 3px; }
[data-verdict="board"] .bar i, .v-board .bar i { background: var(--sand); }
.tracker-none { margin-top: 18px; }

@media (max-width: 760px) {
  .tracker-stats div { padding: 12px 14px; }
  .tracker-stats b { font-size: 26px; }
  .tracker-stats span { font-size: 10.5px; letter-spacing: 0.1em; }
  .tracker-tools input { flex: 1; min-width: 0; width: 100%; }
  .tracker thead { display: none; }
  .tracker, .tracker tbody, .tracker tr, .tracker th, .tracker td { display: block; width: 100%; }
  .tracker tbody tr { padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .tracker tbody tr:last-child { border-bottom: 0; }
  .tracker tbody th, .tracker td { position: relative; padding: 5px 0 5px 118px; border: 0; min-height: 30px; }
  .tracker tbody th { padding-left: 0; padding-bottom: 8px; box-shadow: none !important; }
  .tracker td::before {
    content: attr(data-label);
    position: absolute; left: 0; top: 9px; width: 112px; white-space: nowrap;
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim);
  }
  .tracker tr.v-eligible { box-shadow: inset 3px 0 0 var(--olive); }
  .tracker tr.v-board { box-shadow: inset 3px 0 0 var(--sand); }
}

/* ==========================================================================
   COMMAND CONSOLE: PROMOTIONS SPREADSHEET
   ========================================================================== */
.sheet-intro { max-width: 110ch; margin: -6px 0 18px; font-size: 15px; }
.sheet-search { min-width: 200px; padding: 7px 12px; font-size: 14.5px; }

.award-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
  margin-bottom: 14px; padding: 12px 16px;
  background: rgba(16, 27, 51, 0.55); border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.award-bar.is-active { border-color: rgba(163, 176, 110, 0.55); background: rgba(163, 176, 110, 0.07); }
.award-count { flex: 1 1 260px; font-size: 14.5px; }
.award-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.award-group { display: inline-flex; gap: 4px; }
.award-bar .btn { padding: 7px 12px; font-size: 14px; }
.award-bar .btn [data-icon] { font-size: 15px; }
.award-bar .btn[disabled] { cursor: not-allowed; }
.award-bar select, .award-bar input {
  padding: 6px 10px; font: inherit; font-size: 14px; color: var(--text);
  background: rgba(8, 14, 28, 0.7); border: 1px solid var(--line-strong); border-radius: var(--radius);
}
.award-bar select option { background: #0c1528; }
.award-bar input[type="number"] { width: 84px; }
.award-note { width: 250px; }
.award-bar select:focus, .award-bar input:focus { outline: none; border-color: var(--olive); }
.award-clear { font-size: 14px; }

.sheet-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(8, 14, 28, 0.35); }
.sheet { width: 100%; min-width: 1620px; border-collapse: separate; border-spacing: 0; font-size: 14.5px; color-scheme: dark; }
.sheet th, .sheet td { padding: 6px 8px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); }
.sheet thead th {
  padding: 10px 8px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
  background: #0b1427; white-space: nowrap;
}
.sheet tbody tr:last-child td { border-bottom: 0; }
.sheet tbody tr:hover td { background-color: rgba(255, 255, 255, 0.018); }
.sheet .col-member { position: sticky; left: 0; z-index: 1; width: 230px; min-width: 230px; white-space: nowrap; background: #0a1324; border-right: 1px solid var(--line); }
.sheet thead .col-member { z-index: 2; background: #0b1427; }
.sheet .col-member > * { vertical-align: middle; }
.sheet .sort {
  padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
  background: none; border: 0; cursor: pointer;
}
.sheet .sort:hover { color: var(--text); }
.sheet th[aria-sort] .sort { color: var(--olive); }
.sheet th[aria-sort="ascending"] .sort::after { content: " \25B2"; font-size: 9px; }
.sheet th[aria-sort="descending"] .sort::after { content: " \25BC"; font-size: 9px; }

.sheet-check { width: 17px; height: 17px; margin: 0 8px 0 4px; accent-color: var(--olive); cursor: pointer; }

.cell-input, .cell-select {
  width: 100%; padding: 6px 8px;
  font: inherit; font-size: 14.5px; color: var(--text);
  background: transparent; border: 1px solid transparent; border-radius: 3px;
}
.cell-select { cursor: pointer; }
.cell-select option, .cell-select optgroup { background: #0c1528; color: var(--text); }
.cell-input:hover, .cell-select:hover { border-color: var(--line-strong); }
.cell-input:focus, .cell-select:focus { outline: none; border-color: var(--olive); background: rgba(8, 14, 28, 0.85); }
.cell-input::placeholder { color: var(--dim); }
.cell-name { width: calc(100% - 34px); font-family: var(--font-head); font-size: 17px; font-weight: 600; letter-spacing: 0.03em; }
.cell-num { width: 72px; font-family: var(--font-mono); text-align: right; }
.cell-rank { display: flex; align-items: center; gap: 6px; }
.cell-rank .mini-ins svg { width: 22px; height: 27px; }
.sheet .col-rank { min-width: 235px; }
.sheet .col-tig { width: 90px; }
.sheet .col-next { min-width: 310px; }
.sheet .col-certs { min-width: 200px; }
.sheet .col-mos { min-width: 190px; }
.sheet .col-status { min-width: 130px; }
.sheet .col-date { min-width: 150px; }
.sheet .col-discord { min-width: 160px; }
.sheet .col-notes { min-width: 240px; }
.sheet .col-actions { width: 80px; white-space: nowrap; text-align: right; }

/* save feedback */
.sheet td { transition: box-shadow 0.25s ease; }
.sheet td.is-saving { box-shadow: inset 0 -2px 0 var(--line-strong); }
.sheet td.is-saved { box-shadow: inset 0 -2px 0 var(--olive); }
.sheet td.is-error { box-shadow: inset 0 -2px 0 #ec8b7b; }
.sheet tr.is-selected td { background-color: rgba(163, 176, 110, 0.08); }
.sheet tr.is-selected td.col-member { background-color: #141f2c; }
.sheet tr.is-inactive td:not(.col-actions):not(.col-member) { opacity: 0.55; }
.sheet tr.is-inactive .cell-name { color: var(--muted); }
@keyframes rowflash { from { background-color: rgba(163, 176, 110, 0.22); } to { background-color: transparent; } }
.sheet tr.is-flash td:not(.col-member) { animation: rowflash 1.4s ease; }

.next-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.promote-btn { flex: none; padding: 4px 11px !important; font-size: 13px !important; }
.next-detail { line-height: 1.35; }
.col-next .bar { max-width: none; }

.cell-certs { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.cert-edit {
  padding: 2px 8px; font-family: var(--font-mono); font-size: 11.5px; color: var(--olive);
  background: none; border: 1px dashed rgba(163, 176, 110, 0.5); border-radius: 2px; cursor: pointer;
}
.cert-edit:hover { color: var(--text); border-color: var(--olive); }

.icon-btn {
  display: inline-grid; place-items: center; width: 32px; height: 32px;
  color: var(--muted); background: none; border: 1px solid transparent; border-radius: 3px; cursor: pointer;
}
.icon-btn .ico { font-size: 17px; }
.icon-btn:hover { color: var(--text); border-color: var(--line-strong); }
.icon-btn.danger:hover { color: #ec8b7b; border-color: rgba(236, 139, 123, 0.45); }

.cert-pop {
  position: absolute; z-index: 150; width: 290px; padding: 14px;
  background: var(--panel-2); border: 1px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}
.cert-pop-head { display: grid; gap: 4px; margin-bottom: 10px; }
.cert-pop-head strong { font-family: var(--font-head); font-size: 18px; letter-spacing: 0.03em; }
.cert-pop-list { display: grid; gap: 2px; max-height: 260px; overflow-y: auto; margin-bottom: 10px; }
.cert-opt { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 3px; cursor: pointer; }
.cert-opt:hover { background: rgba(255, 255, 255, 0.04); }
.cert-opt input { width: 17px; height: 17px; margin: 0; accent-color: var(--olive); }
.cert-opt span { font-family: var(--font-mono); font-size: 13.5px; }
.cert-opt small { margin-left: auto; font-size: 12px; color: var(--dim); }
.cert-pop-add { display: flex; gap: 6px; margin-bottom: 10px; }
.cert-pop-add input {
  flex: 1; min-width: 0; padding: 6px 10px; font: inherit; font-size: 14px; color: var(--text);
  background: rgba(8, 14, 28, 0.7); border: 1px solid var(--line-strong); border-radius: var(--radius);
}
.cert-pop-add input:focus { outline: none; border-color: var(--olive); }
.cert-pop-done { width: 100%; }

.sheet-empty { margin: 16px 0 0; }
.sheet-add {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 14px; padding: 12px 16px;
  border: 1px dashed var(--line-strong); border-radius: var(--radius);
}
.sheet-add strong { display: inline-flex; align-items: center; gap: 8px; margin-right: 6px; font-family: var(--font-head); font-size: 17px; letter-spacing: 0.06em; text-transform: uppercase; }
.sheet-add strong [data-icon] { color: var(--olive); font-size: 18px; }
.sheet-add input, .sheet-add select {
  padding: 7px 10px; font: inherit; font-size: 14.5px; color: var(--text);
  background: rgba(8, 14, 28, 0.7); border: 1px solid var(--line-strong); border-radius: var(--radius);
}
.sheet-add input { width: 230px; }
.sheet-add select option, .sheet-add select optgroup { background: #0c1528; }
.sheet-add input:focus, .sheet-add select:focus { outline: none; border-color: var(--olive); }
.sheet-add .btn [data-icon] { font-size: 15px; }
.sheet-add-error { font-size: 14px; color: #ec8b7b; }

.log-card { margin-top: 28px; padding: 22px 24px; scroll-margin-top: 90px; }
.log-card:hover { border-color: var(--line); }
.log-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 12px; }
.log-head h3 { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 22px; }
.log-head h3 [data-icon] { color: var(--olive); }
.log-filter { flex: 1; font-size: 14px; }
.log-list { list-style: none; max-height: 420px; overflow-y: auto; margin: 0; padding: 0; }
.log-list li { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 14px; padding: 9px 0; font-size: 14.5px; border-top: 1px solid var(--line); }
.log-list li.dim { display: block; }
.log-list time { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); padding-top: 2px; }
.log-list strong { font-weight: 600; }
@media (max-width: 640px) {
  .log-list li { grid-template-columns: 1fr; gap: 2px; }
  .award-note { width: 100%; }
  .sheet-add input { width: 100%; }
}

/* ==========================================================================
   RECRUITMENT BANNER (every page, under the menu)
   ========================================================================== */
.recruit-banner {
  position: relative; z-index: 40;
  background: linear-gradient(90deg, rgba(95, 107, 58, 0.62), rgba(29, 49, 96, 0.7) 58%, rgba(95, 107, 58, 0.4));
  border-bottom: 1px solid rgba(163, 176, 110, 0.45);
}
.recruit-banner .container { display: flex; align-items: center; gap: 12px 18px; padding-top: 9px; padding-bottom: 9px; }
.recruit-tag {
  display: inline-flex; align-items: center; gap: 9px; flex: none;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: #e3ecbd;
}
.recruit-dot { width: 8px; height: 8px; border-radius: 50%; background: #c3cf8e; animation: recruit-pulse 1.8s infinite; }
@keyframes recruit-pulse { 0% { box-shadow: 0 0 0 0 rgba(195, 207, 142, 0.7); } 70%, 100% { box-shadow: 0 0 0 9px rgba(195, 207, 142, 0); } }
.recruit-text { flex: 1; min-width: 0; margin: 0; font-size: 15px; line-height: 1.4; color: var(--silver); }
.recruit-btn { flex: none; padding: 7px 14px; font-size: 14px; background: var(--olive); color: #0b1426; }
.recruit-btn:hover { background: #c3cf8e; color: #0b1426; transform: translateY(-1px); }
.recruit-btn [data-icon] { font-size: 16px; }
.recruit-close {
  flex: none; width: 32px; height: 32px; display: grid; place-items: center;
  font-size: 16px; color: var(--silver); background: none;
  border: 1px solid transparent; border-radius: var(--radius); cursor: pointer;
}
.recruit-close:hover { color: #fff; border-color: var(--line-strong); }
@media (max-width: 640px) {
  .recruit-text { display: none; }
  .recruit-tag { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .recruit-dot { animation: none; } }

/* ==========================================================================
   CALENDAR (calendar.html + Command Console)
   ========================================================================== */
.k-main { --k: #a3b06e; }
.k-minor { --k: #7f9cd6; }
.k-training { --k: #d6ad6c; }
.k-cert { --k: #6fc0b0; }
.k-special { --k: #b590e0; }
.k-cancelled { --k: #ec8b7b; }

.cal-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; margin-bottom: 18px; }
.cal-nav { display: flex; align-items: center; gap: 8px; }
.cal-nav .icon-btn { width: 38px; height: 38px; border-color: var(--line-strong); }
.cal-nav .icon-btn svg { width: 18px; height: 18px; }
.cal-title { min-width: 220px; margin: 0 6px; font-size: 30px; text-align: center; }
.cal-mode { display: flex; flex-wrap: wrap; gap: 6px; }
.cal-zone { margin: 0; font-size: 14px; }

.cal-body { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 24px; align-items: start; }
.cal-dow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 4px; }
.cal-dow span { padding: 0 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; transition: opacity 0.15s ease; }
.cal-grid.is-loading { opacity: 0.55; }
.cal-day {
  display: flex; flex-direction: column; align-items: stretch; gap: 4px;
  min-width: 0; min-height: 114px; padding: 7px;
  font: inherit; text-align: left; color: var(--text); cursor: pointer;
  background: rgba(16, 27, 51, 0.55);
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.cal-day:hover { border-color: var(--line-strong); }
.cal-day.is-out { opacity: 0.42; }
.cal-day.is-past:not(.is-today) .cal-items { opacity: 0.6; }
.cal-day.is-today { border-color: rgba(163, 176, 110, 0.6); }
.cal-day.is-selected { background: rgba(29, 49, 96, 0.5); border-color: var(--silver); box-shadow: inset 0 0 0 1px var(--silver); }
.cal-num {
  align-self: flex-start; min-width: 26px; height: 26px; padding: 0 5px;
  display: grid; place-items: center;
  font-family: var(--font-head); font-size: 17px; font-weight: 700; line-height: 1;
  border-radius: 2px;
}
.cal-day.is-today .cal-num { color: #0b1426; background: var(--olive); }
.cal-items { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-ev {
  display: block; padding: 2px 6px;
  font-size: 12.5px; line-height: 1.3;
  background: rgba(255, 255, 255, 0.045); border-left: 3px solid var(--k); border-radius: 2px;
}
.cal-ev b { display: block; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; color: var(--k); white-space: nowrap; }
.cal-ev > span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cal-ev.is-weekly { background: transparent; color: var(--silver); }
.cal-ev.k-cancelled { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(236, 139, 123, 0.7); }
.cal-more { padding-left: 6px; font-size: 12px; color: var(--muted); }
.cal-dots { display: none; justify-content: center; gap: 3px; }
.cal-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--k); }

.cal-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; font-size: 13.5px; color: var(--muted); }
.cal-legend span { display: inline-flex; align-items: center; gap: 7px; }
.cal-legend i, .cal-kind i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--k); }
.cal-error { margin: 12px 0 0; font-size: 14px; color: var(--sand); }

.cal-side { position: sticky; top: calc(var(--header-h) + 20px); display: grid; gap: 20px; }
.cal-day-panel, .cal-upcoming {
  padding: 22px;
  background: linear-gradient(180deg, var(--panel), rgba(16, 27, 51, 0.55));
  border: 1px solid var(--line); border-radius: var(--radius);
}
.cal-day-title, .cal-upcoming h4 { margin-bottom: 14px; font-size: 20px; }
.cal-day-panel { scroll-margin-top: calc(var(--header-h) + 12px); }
.admin .cal-day-panel { scroll-margin-top: 76px; }
.cal-nothing { margin: 0 0 6px; font-size: 15px; }
.cal-detail {
  margin-bottom: 12px; padding: 12px 14px;
  background: rgba(8, 14, 28, 0.45);
  border: 1px solid var(--line); border-left: 3px solid var(--k); border-radius: var(--radius);
}
.cal-detail.is-past { opacity: 0.82; }
.cal-detail-top { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.cal-kind { display: inline-flex; align-items: center; gap: 6px; color: var(--k); }
.badge.dim { color: var(--dim); }
.cal-detail h5 { margin: 0 0 4px; font-family: var(--font-head); font-size: 21px; font-weight: 700; line-height: 1.1; letter-spacing: 0.03em; text-transform: uppercase; }
.cal-when { margin: 0 0 8px; font-family: var(--font-mono); font-size: 13px; line-height: 1.55; color: var(--silver); }
.cal-when small { display: block; font-size: 12px; color: var(--dim); }
.cal-text { font-size: 15px; color: var(--muted); }
.cal-dep { display: inline-flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: 14px; color: var(--silver); }
a.cal-dep { font-size: 14px; }
.cal-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cal-tools .btn, .cal-add { padding: 6px 12px; font-size: 13.5px; }
.cal-tools .btn [data-icon], .cal-add [data-icon] { font-size: 15px; }
.cal-add { margin-top: 2px; }

.cal-up-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cal-up-list li.muted { font-size: 15px; }
.cal-up {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 8px 10px;
  font: inherit; text-align: left; color: var(--text); cursor: pointer;
  background: rgba(8, 14, 28, 0.4);
  border: 1px solid var(--line); border-left: 3px solid var(--k); border-radius: var(--radius);
}
.cal-up:hover { border-color: var(--line-strong); border-left-color: var(--k); }
.cal-up-date { flex: none; width: 40px; font-family: var(--font-mono); font-size: 10.5px; line-height: 1.1; letter-spacing: 0.1em; text-align: center; text-transform: uppercase; color: var(--muted); }
.cal-up-date b { display: block; font-family: var(--font-head); font-size: 22px; letter-spacing: 0; color: var(--text); }
.cal-up-body { display: flex; flex-direction: column; min-width: 0; }
.cal-up-body strong { overflow: hidden; font-size: 15px; white-space: nowrap; text-overflow: ellipsis; }
.cal-up-body .mono { font-size: 12px; color: var(--muted); }
.cal-up .live-dot { width: 7px; height: 7px; margin-right: 6px; }
.cal-foot { margin: 22px 0 0; font-size: 15px; }

/* event form (console) */
.cal-form h4 { margin-bottom: 10px; font-size: 20px; }
.cal-form .field { margin-bottom: 12px; }
.cal-form .field > label:not(.check) { margin-bottom: 6px; font-size: 11px; }
.cal-form .field input:not([type="checkbox"]), .cal-form .field select, .cal-form .field textarea { padding: 9px 11px; font-size: 15px; }
.cal-form .field select { padding-right: 34px; }
.cal-form .field .hint { font-size: 12.5px; }
.cal-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cal-form-note { margin: -2px 0 12px; font-size: 13.5px; color: var(--muted); }
.cf-kind-note { margin: -4px 0 12px; font-size: 13.5px; color: var(--sand); }
.cf-kind-note:empty { display: none; }
.cal-form .form-error { margin-bottom: 12px; padding: 10px 12px; font-size: 14px; }
.cal-form-actions { display: flex; gap: 8px; }

/* staff-written text (Markdown-lite) */
.rich > :last-child { margin-bottom: 0; }
.rich h3 { margin: 1.3em 0 0.45em; font-size: 24px; }
.rich h4 { margin: 1.1em 0 0.4em; font-size: 19px; }
.rich > h3:first-child, .rich > h4:first-child { margin-top: 0; }
.rich ul, .rich ol { margin: 0 0 1em; padding-left: 22px; }
.rich li { margin-bottom: 4px; }
.rich li::marker { color: var(--olive); }
.rich blockquote { margin: 0 0 1em; padding: 2px 0 2px 16px; font-style: italic; color: var(--silver); border-left: 2px solid var(--olive); }
.rich blockquote p { color: inherit; }

@media (max-width: 1080px) {
  .cal-body { grid-template-columns: 1fr; }
  .cal-side { position: static; grid-template-columns: 1fr 1fr; align-items: start; }
}
@media (max-width: 760px) {
  .cal-side { grid-template-columns: 1fr; }
  .cal-title { min-width: 0; font-size: 24px; }
  .cal-grid, .cal-dow { gap: 3px; }
  .cal-dow span { padding: 0; font-size: 10px; letter-spacing: 0.06em; text-align: center; }
  .cal-day { min-height: 54px; padding: 5px 2px; align-items: center; justify-content: flex-start; }
  .cal-num { align-self: center; min-width: 24px; height: 24px; font-size: 15px; }
  .cal-items { display: none; }
  .cal-dots { display: flex; }
  .cal-form-row { grid-template-columns: 1fr; gap: 0; }
}

/* ==========================================================================
   OPERATIONS MAP (pan / zoom image with markers)
   ========================================================================== */
.opmap { position: relative; }
.opmap-view {
  position: relative; overflow: hidden;
  height: min(68vh, 640px); min-height: 320px;
  background: #050a14;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  cursor: grab; touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
}
.opmap-view:focus-visible { outline: 2px solid var(--olive); outline-offset: 2px; }
.opmap.is-panning .opmap-view { cursor: grabbing; }
.opmap.mode-add .opmap-view { cursor: crosshair; }
.opmap:not(.has-map) .opmap-view { cursor: default; }
.opmap-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.opmap-img { display: block; width: 100%; height: 100%; max-width: none; pointer-events: none; }
.opmap-layer { position: absolute; inset: 0; pointer-events: none; }
.opm { position: absolute; left: 0; top: 0; padding: 0; color: var(--text); background: none; border: 0; cursor: pointer; pointer-events: auto; }
.opm-in { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; transform: translate(-50%, -14px); }
.opm-sym { display: block; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85)); transition: transform 0.15s ease; }
.opm-label {
  max-width: 180px; margin-top: 2px; padding: 1px 6px; overflow: hidden;
  font-family: var(--font-head); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; line-height: 1.35;
  white-space: nowrap; text-overflow: ellipsis; color: #fff;
  background: rgba(5, 10, 20, 0.8); border-radius: 2px;
}
.opm:hover .opm-sym, .opm.is-selected .opm-sym { transform: scale(1.2); }
.opm.is-selected .opm-label { color: #0b1426; background: var(--silver); }
.opm:focus-visible { outline: none; }
.opm:focus-visible .opm-label { outline: 2px solid var(--olive); }
.opmap.is-editable .opm { cursor: move; }
.opmap.is-dragging .opm { cursor: grabbing; }
.opmap-pop { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; }
.opmap-pop-in {
  position: absolute; left: 0; bottom: 24px; transform: translateX(-50%);
  width: max-content; max-width: min(300px, 80vw); padding: 12px 34px 12px 14px;
  pointer-events: auto; cursor: auto; user-select: text; -webkit-user-select: text;
  background: rgba(12, 21, 40, 0.97); border: 1px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}
.opmap-pop-in strong { display: block; margin-bottom: 4px; font-family: var(--font-head); font-size: 19px; line-height: 1.15; letter-spacing: 0.03em; text-transform: uppercase; }
.opmap-pop-type { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.opmap-pop .rich { font-size: 14.5px; color: var(--muted); }
.opmap-pop .rich p { color: inherit; }
.opmap-pop-x { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; display: grid; place-items: center; color: var(--muted); background: none; border: 0; cursor: pointer; }
.opmap-pop-x:hover { color: var(--text); }
.opmap-pop-x svg { width: 16px; height: 16px; }
.opmap-ctrl {
  position: absolute; right: 12px; top: 12px; z-index: 4;
  display: flex; flex-direction: column; overflow: hidden;
  background: rgba(8, 14, 28, 0.9); border: 1px solid var(--line-strong); border-radius: var(--radius);
}
.opmap-ctrl button { width: 38px; height: 38px; display: grid; place-items: center; color: var(--silver); background: none; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.opmap-ctrl button:last-child { border-bottom: 0; }
.opmap-ctrl button:hover { color: #fff; background: rgba(163, 176, 110, 0.14); }
.opmap-ctrl svg { width: 18px; height: 18px; }
.opmap:not(.has-map) .opmap-ctrl { display: none; }
.opmap-hint {
  position: absolute; left: 50%; bottom: 16px; z-index: 4; transform: translateX(-50%);
  padding: 8px 14px; font-size: 14px; color: #fff; white-space: nowrap;
  background: rgba(5, 10, 20, 0.88); border-radius: var(--radius);
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
}
.opmap.show-hint .opmap-hint { opacity: 1; }
.opmap-empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 20px; text-align: center; color: var(--muted); }
.opmap-empty .ico { font-size: 38px; color: var(--dim); }
.opmap-empty p { max-width: 42ch; margin: 0; }

/* ==========================================================================
   DEPLOYMENT PAGE
   ========================================================================== */
.dep-hero h1 { margin-bottom: 18px; }
.dep-preview { margin: 24px 0 0; }
.dep-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-bottom: 22px; color: var(--silver); }
.dep-meta-item { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; }
.dep-meta-item svg { width: 18px; height: 18px; color: var(--olive); }
.dep-meta-item.mono { font-size: 14px; letter-spacing: 0.06em; }
.dep-summary { margin-bottom: 0; }
.dep-summary p { color: inherit; }
.dep-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.dep-jump:empty { display: none; }
.dep-jump .chip { text-decoration: none; }
.dep-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  background: rgba(16, 27, 51, 0.5); border: 1px solid var(--line); border-top: 0;
}
.dep-stats div { padding: 20px 24px; border-right: 1px solid var(--line); }
.dep-stats div:last-child { border-right: 0; }
.dep-stats b { display: block; font-family: var(--font-head); font-size: 34px; line-height: 1.05; letter-spacing: 0.02em; }
.dep-stats span { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.dep-section { scroll-margin-top: var(--header-h); }
.dep-section .section-head { margin-bottom: 32px; }

.dep-map-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 20px; align-items: start; }
.dep-key { max-height: min(68vh, 640px); padding: 22px; overflow-y: auto; }
.dep-key h3 { margin-bottom: 4px; font-size: 20px; }
.dep-key p.small { margin-bottom: 14px; }
.dep-key-list, .dep-key-list ul { margin: 0; padding: 0; list-style: none; }
.dep-key-group { margin-bottom: 14px; }
.dep-key-group h4 { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.12em; color: var(--muted); }
.dep-key-item { width: 100%; padding: 5px 10px 5px 28px; font: inherit; font-size: 15px; text-align: left; color: var(--text); background: none; border: 0; border-radius: 2px; cursor: pointer; }
.dep-key-item:hover { color: #fff; background: rgba(163, 176, 110, 0.1); }

.dep-progress { display: flex; align-items: center; gap: 16px; max-width: 560px; margin-bottom: 26px; }
.dep-progress .bar { flex: 1; max-width: none; height: 8px; margin: 0; }
.dep-progress .mono { font-size: 13px; color: var(--muted); white-space: nowrap; }
.dep-goals { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.g-pending { --g: var(--line-strong); }
.g-active { --g: var(--sand); }
.g-complete { --g: var(--olive); }
.g-failed { --g: #ec8b7b; }
.dep-goal {
  display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 18px; padding: 18px 22px;
  background: rgba(16, 27, 51, 0.55); border: 1px solid var(--line); border-left: 3px solid var(--g); border-radius: var(--radius);
}
.dep-goal-n { padding-top: 5px; font-size: 12px; letter-spacing: 0.14em; color: var(--muted); }
.dep-goal-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.dep-goal h3 { margin: 0; font-size: 22px; }
.dep-goal-status { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--g); }
.dep-goal.g-pending .dep-goal-status { color: var(--muted); }
.dep-goal .rich { margin-top: 8px; font-size: 15.5px; color: var(--muted); }

.dep-ops { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.dep-op { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 20px; }
.dep-op-date {
  align-self: start; padding: 12px 0;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-align: center; color: var(--muted);
  background: rgba(8, 14, 28, 0.6); border: 1px solid var(--line); border-top: 3px solid var(--k); border-radius: var(--radius);
}
.dep-op-date b { display: block; font-family: var(--font-head); font-size: 32px; line-height: 1; letter-spacing: 0; color: var(--text); }
.dep-op-date span { display: block; font-size: 11px; color: var(--dim); }
.dep-op-body { padding: 16px 22px; background: rgba(16, 27, 51, 0.55); border: 1px solid var(--line); border-radius: var(--radius); }
.dep-op.is-next .dep-op-body { border-color: rgba(163, 176, 110, 0.55); }
.dep-op.is-past .dep-op-body, .dep-op.is-past .dep-op-date { opacity: 0.85; }
.dep-op-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.dep-op h3 { margin: 0 0 4px; font-size: 24px; }
.dep-op-when { margin: 0 0 8px; font-size: 13px; color: var(--silver); }
.dep-op-when small { display: block; font-size: 12px; color: var(--dim); }
.dep-op .rich { font-size: 15.5px; color: var(--muted); }

.dep-news { display: grid; gap: 16px; max-width: 860px; }
.dep-post { padding: 26px 30px; }
.dep-post-meta { margin-bottom: 8px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--olive); }
.dep-post h3 { margin-bottom: 10px; font-size: 26px; }
.card.dep-post .rich p, .dep-post .rich li { color: var(--silver); }
.dep-more { margin-top: 18px; }
.dep-lore { position: relative; max-width: 76ch; }
.dep-lore-text { font-size: 17.5px; }
.dep-lore-text p, .dep-lore-text li { color: var(--silver); }
.dep-lore.is-collapsed { max-height: 560px; overflow: hidden; }
.dep-lore.is-collapsed::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 160px; background: linear-gradient(transparent, var(--bg)); pointer-events: none; }

.dep-forces { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.dep-force { padding: 24px; border-top: 3px solid var(--side); }
.dep-force-top { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.dep-force-top svg { flex: none; }
.dep-force-side { font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--side); }
.dep-force h3 { margin: 2px 0 0; font-size: 22px; }
.dep-force .rich { font-size: 15.5px; }

.dep-archive { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.dep-card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 24px; color: var(--text); text-decoration: none; }
.dep-card:hover { color: var(--text); border-color: rgba(163, 176, 110, 0.5); }
.dep-card h3 { margin: 0; font-size: 24px; }
.card.dep-card p { margin: 0; font-size: 13px; }
.dep-card .text-link { margin-top: auto; font-size: 14px; }

@media (max-width: 960px) {
  .dep-map-layout { grid-template-columns: 1fr; }
  .dep-key { max-height: none; }
}
@media (max-width: 640px) {
  .opmap-view { height: 62vh; min-height: 300px; }
  .dep-goal { grid-template-columns: 1fr; gap: 4px; padding: 16px; }
  .dep-op { grid-template-columns: 62px minmax(0, 1fr); gap: 12px; }
  .dep-op-date b { font-size: 26px; }
  .dep-op-body { padding: 14px 16px; }
  .dep-post { padding: 22px; }
  .dep-stats div { border-right: 0; border-bottom: 1px solid var(--line); }
}

/* ==========================================================================
   COMMAND CONSOLE: DEPLOYMENT EDITOR
   ========================================================================== */
.btn > svg { flex: none; width: 1.1em; height: 1.1em; }
.icon-btn > svg { width: 17px; height: 17px; }
.icon-btn[disabled] { opacity: 0.3; cursor: default; }
.icon-btn[disabled]:hover { color: var(--muted); border-color: transparent; }

.dep-pick-label { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.dep-pick, .dep-ed-inline select {
  padding: 7px 32px 7px 11px;
  font: inherit; font-family: var(--font-body); font-size: 15px; letter-spacing: normal; text-transform: none; color: var(--text);
  background: rgba(8, 14, 28, 0.7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3b06e' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 9px center / 16px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  appearance: none; -webkit-appearance: none; cursor: pointer;
}
.dep-pick { min-width: 260px; }
.dep-pick option, .dep-ed-inline select option { background: #0c1528; }
.dep-pick:focus, .dep-ed-inline select:focus { outline: none; border-color: var(--olive); }

.dep-ed { display: grid; gap: 18px; max-width: 1240px; }
.dep-ed-empty { max-width: 640px; }
.dep-ed-status { padding: 16px 20px; }
.dep-ed-status:hover { border-color: var(--line); }
.dep-ed-status-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.dep-ed-status-end { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.dep-ed-check { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--silver); cursor: pointer; }
.dep-ed-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--olive); cursor: pointer; }
.dep-ed-inline { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.dep-ed-warn { margin: 12px 0 0; font-size: 14.5px; color: var(--sand); }
.dep-ed-jump { margin: 0; }
.dep-ed-jump .chip { text-decoration: none; }

.dep-ed-card { padding: 24px 26px; scroll-margin-top: 84px; }
.dep-ed-card:hover { border-color: var(--line); }
.dep-ed-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 16px; }
.dep-ed-card-head h3 { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 22px; }
.dep-ed-card-head h3 svg { width: 20px; height: 20px; color: var(--olive); }
.dep-ed-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.dep-ed-card .field { margin-bottom: 12px; }
.dep-ed-card .form-grid { gap: 14px 18px; }
.dep-ed-card .form-grid .field { margin-bottom: 0; }
.dep-ed-card .field > label:not(.check) { margin-bottom: 6px; font-size: 11px; }
.dep-ed-card .field input:not([type="checkbox"]), .dep-ed-card .field select, .dep-ed-card .field textarea { padding: 9px 12px; font-size: 15px; }
.dep-ed-card .field select { padding-right: 36px; }
.dep-ed-card .field textarea { min-height: 0; }
.dep-ed-card .field .hint { font-size: 13px; }
.dep-ed-hint { max-width: 110ch; margin: -6px 0 16px; font-size: 14px; color: var(--muted); }
.dep-ed-hint code, .sheet-intro code { font-size: 13px; color: var(--silver); }

.dep-ed-maptools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 12px; }
.dep-ed-maptools .chips { margin: 0; }
.dep-ed-maplayout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.dep-ed-map .opmap-view { height: min(64vh, 600px); }
.dep-ed-markers { display: grid; align-content: start; gap: 8px; max-height: min(64vh, 600px); padding-right: 4px; overflow-y: auto; }
.dep-ed-marker {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) 32px; gap: 6px 8px; padding: 10px;
  background: rgba(8, 14, 28, 0.45); border: 1px solid var(--line); border-radius: var(--radius);
}
.dep-ed-marker.is-selected { background: rgba(29, 49, 96, 0.45); border-color: var(--silver); }
.dep-ed-marker .dep-ed-sym { grid-column: 1; grid-row: 1 / span 2; }
.dep-ed-marker input { grid-column: 2; grid-row: 1; }
.dep-ed-marker .icon-btn { grid-column: 3; grid-row: 1; }
.dep-ed-marker select { grid-column: 2 / 4; grid-row: 2; }
.dep-ed-marker textarea { grid-column: 1 / -1; grid-row: 3; min-height: 40px; line-height: 1.4; resize: vertical; }
.dep-ed-marker input, .dep-ed-marker select, .dep-ed-marker textarea {
  width: 100%; padding: 6px 9px; font: inherit; font-size: 14px; color: var(--text);
  background: #0a1326; border: 1px solid var(--line-strong); border-radius: var(--radius);
}
.dep-ed-marker select option { background: #0c1528; }
.dep-ed-marker input:focus, .dep-ed-marker select:focus, .dep-ed-marker textarea:focus, .dep-ed-lore:focus { outline: none; border-color: var(--olive); }
.dep-ed-sym { display: grid; place-items: center; padding: 0; background: none; border: 0; cursor: pointer; }
.dep-ed-sym-static { display: inline-flex; }

.dep-ed-list { display: grid; gap: 10px; margin-bottom: 12px; }
.dep-ed-item { padding: 14px 16px; background: rgba(8, 14, 28, 0.45); border: 1px solid var(--line); border-radius: var(--radius); }
.dep-ed-item-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.dep-ed-item-head .mono { font-size: 12px; letter-spacing: 0.12em; }
.dep-ed-item .field:last-child { margin-bottom: 0; }
.dep-ed-move { display: inline-flex; gap: 2px; }
.dep-ed-row { display: flex; flex-wrap: wrap; gap: 0 12px; }
.dep-ed-row .field { min-width: 150px; }
.dep-ed-row .field.grow { flex: 1 1 260px; }
.dep-ed-none { margin: 0 0 12px; font-size: 15px; }
.dep-ed-post summary { display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; }
.dep-ed-post summary::-webkit-details-marker { display: none; }
.dep-ed-post summary::before {
  content: ""; flex: none; width: 0; height: 0;
  border-left: 7px solid var(--olive); border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  transition: transform 0.15s ease;
}
.dep-ed-post[open] summary::before { transform: rotate(90deg); }
.dep-ed-post[open] summary { margin-bottom: 12px; }
.dep-ed-post summary .mono { font-size: 12.5px; }
.dep-ed-post-title { font-weight: 600; }
.dep-ed-post .btn-danger { margin-top: 2px; }
.dep-ed-addpost { margin-bottom: 12px; }

.dep-ed-ops { display: grid; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.dep-ed-ops li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 12px;
  background: rgba(8, 14, 28, 0.45); border: 1px solid var(--line); border-left: 3px solid var(--k); border-radius: var(--radius);
}
.dep-ed-ops .mono { min-width: 92px; font-size: 12.5px; color: var(--muted); }
.dep-ed-ops strong { flex: 1; min-width: 160px; }
.dep-ed-ops .btn { padding: 5px 10px; font-size: 13px; }

.dep-ed-lore {
  width: 100%; padding: 12px 14px; resize: vertical;
  font: inherit; font-size: 15.5px; line-height: 1.6; color: var(--text);
  background: #0a1326; border: 1px solid var(--line-strong); border-radius: var(--radius);
}
.dep-ed-preview { max-width: 76ch; padding: 16px 20px; background: rgba(8, 14, 28, 0.45); border: 1px dashed var(--line-strong); border-radius: var(--radius); }
.card .dep-ed-preview p, .dep-ed-preview li { color: var(--silver); }
.dep-ed-file { position: relative; overflow: hidden; cursor: pointer; }
.dep-ed-file input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.dep-ed-file:focus-within { outline: 2px solid var(--olive); outline-offset: 2px; }
.dep-ed-file.is-busy { opacity: 0.7; pointer-events: none; }

.dep-savebar {
  position: sticky; bottom: 14px; z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  padding: 12px 18px;
  background: rgba(12, 21, 40, 0.96); border: 1px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.dep-savebar.is-dirty { border-color: rgba(214, 173, 108, 0.6); }
.dep-savebar.is-error { border-color: rgba(236, 139, 123, 0.7); }
.dep-save-msg { font-size: 15px; color: var(--muted); }
.dep-savebar.is-dirty .dep-save-msg { color: var(--sand); }
.dep-savebar.is-error .dep-save-msg { color: #f2b3a8; }
.dep-save-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dep-savebar .btn[disabled] { cursor: default; }

@media (max-width: 1100px) {
  .dep-ed-maplayout { grid-template-columns: 1fr; }
  .dep-ed-markers { max-height: 420px; }
}
@media (max-width: 640px) {
  .dep-ed-card { padding: 18px; }
  .dep-ed-status-end { margin-left: 0; }
  .dep-pick { min-width: 0; width: 100%; }
}

/* ==========================================================================
   ROSTER (roster.html + Command Console)
   ========================================================================== */
.roster-stats { margin-bottom: 18px; }
.rgroup { margin-top: 40px; }
.rgroup:first-child { margin-top: 8px; }
.rgroup-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.rgroup-head .icon-box { flex: none; width: 46px; height: 46px; margin: 0; font-size: 22px; color: var(--accent); background: rgba(255, 255, 255, 0.03); border-color: var(--line-strong); }
.rgroup-head h3 { margin: 0; font-size: clamp(21px, 2.2vw, 27px); }
.rgroup-head .badge { margin-left: auto; white-space: nowrap; }
.rgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }

.rcard {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(180deg, var(--panel), rgba(16, 27, 51, 0.55));
  border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: var(--radius);
}
.rcard.is-inactive { opacity: 0.55; }
.rcard-photo {
  position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; overflow: hidden;
  background: radial-gradient(circle at 50% 38%, rgba(29, 49, 96, 0.95), #0a1326 75%);
  border-bottom: 1px solid var(--line);
}
.rcard-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rcard-initials { font-family: var(--font-head); font-size: 56px; font-weight: 700; letter-spacing: 0.04em; color: rgba(207, 214, 224, 0.32); }
.rcard-ins { position: absolute; right: 8px; bottom: 8px; width: 34px; height: 41px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.65)); }
.rcard-ins svg, .rcard-ins img { display: block; width: 100% !important; height: 100% !important; margin: 0 !important; }
.rcard-body { display: flex; flex: 1; flex-direction: column; gap: 2px; padding: 12px 14px 14px; }
.rcard-rank { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.rcard-rank b { font-weight: 600; color: var(--accent); }
.rcard h3 { margin: 2px 0 0; font-size: 21px; line-height: 1.1; overflow-wrap: anywhere; }
.rcard-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.rcard-body > h3 { margin-bottom: 10px; }
/* MOS strip: pinned to the foot of every card so the roles line up across a row */
.rcard-mos {
  display: flex; align-items: center; gap: 9px; margin-top: auto; padding-top: 10px;
  border-top: 1px solid var(--line); font-size: 14px; line-height: 1.3;
}
.rcard-mos-code {
  flex: none; padding: 3px 7px; border: 1px solid var(--accent); border-radius: 4px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.rcard-mos-title { min-width: 0; color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
a.rcard-mos-title { text-decoration: none; }
a.rcard-mos-title:hover, a.rcard-mos-title:focus-visible { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.rcard-mos.is-empty .rcard-mos-code { border-style: dashed; border-color: var(--line-strong); color: var(--muted); background: none; }
.rcard-mos.is-empty .rcard-mos-title { color: var(--muted); font-weight: 400; }
.rcard-edit { align-self: flex-start; margin-top: 10px; padding: 5px 12px; font-size: 13px; }

/* console */
.roster-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
#roster-console .rcard { cursor: pointer; transition: border-color 0.15s ease, transform 0.15s ease; }
#roster-console .rcard:hover { border-color: var(--line-strong); border-top-color: var(--accent); }
#roster-console .rcard.is-selected { border-color: var(--silver); border-top-color: var(--accent); box-shadow: 0 0 0 1px var(--silver); }
#roster-console .rgroup-head { margin-bottom: 12px; padding-bottom: 10px; }
#roster-console .rgroup { margin-top: 28px; }
#roster-console .rgroup:first-child { margin-top: 0; }
#roster-console .rgrid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
#roster-console .rcard h3 { font-size: 19px; }
.roster-aside { position: sticky; top: 88px; padding: 24px; scroll-margin-top: 80px; }
.roster-aside:hover { border-color: var(--line); }
.roster-form h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 22px; }
.roster-form h3 svg { width: 20px; height: 20px; color: var(--olive); }
.roster-edit-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; margin-bottom: 4px; }
.roster-edit-head h3 { margin-bottom: 12px; }
.roster-form .field { margin-bottom: 14px; }
.roster-form .field > label:not(.check) { margin-bottom: 6px; font-size: 11px; }
.roster-form .field input:not([type="checkbox"]), .roster-form .field select { padding: 9px 12px; font-size: 15px; }
.roster-form .field select { padding-right: 36px; }
.roster-form .field .hint { font-size: 13px; }
.roster-form > .btn-primary { width: 100%; }
.roster-form .form-error { margin-bottom: 14px; padding: 10px 12px; font-size: 14px; }
.roster-hint { margin: 10px 0 0; font-size: 13px; color: var(--dim); }
.roster-meta { margin: 12px 0 0; }
.roster-form .danger-zone { margin-top: 18px; padding-top: 14px; }
.roster-photo-edit { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.roster-photo-edit .rcard-photo { flex: none; width: 96px; border: 1px solid var(--line-strong); border-radius: var(--radius); }
.roster-photo-edit .rcard-initials { font-size: 34px; }
.roster-photo-btns { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.roster-photo-btns .hint { margin: 0; font-size: 12.5px; color: var(--dim); }
.roster-file { position: relative; overflow: hidden; cursor: pointer; }
.roster-file input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.roster-file:focus-within { outline: 2px solid var(--olive); outline-offset: 2px; }
.roster-file.is-busy { opacity: 0.6; pointer-events: none; }

@media (max-width: 960px) {
  .roster-layout { grid-template-columns: 1fr; }
  .roster-aside { position: static; order: -1; }
}
@media (max-width: 520px) {
  .rgrid, #roster-console .rgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .rcard h3, #roster-console .rcard h3 { font-size: 17px; }
  .rcard-initials { font-size: 40px; }
  .rcard-body { padding: 10px; }
  .rgroup-head .badge { display: none; }
}

/* Application form: optional roster photo */
.photo-pick { display: flex; align-items: center; gap: 18px; }
.photo-pick-preview {
  flex: none; width: 92px; height: 92px; display: grid; place-items: center; overflow: hidden;
  font-size: 30px; color: var(--dim);
  background: radial-gradient(circle at 50% 38%, rgba(29, 49, 96, 0.9), #0a1326 75%);
  border: 1px dashed var(--line-strong); border-radius: var(--radius);
}
.photo-pick-preview.has-photo { border-style: solid; }
.photo-pick-preview img { width: 100%; height: 100%; object-fit: cover; }
.photo-pick-body { min-width: 0; }
.photo-pick-body .hint { margin-top: 8px; }
.photo-pick-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.photo-pick-btn { position: relative; overflow: hidden; cursor: pointer; }
.photo-pick-btn input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.photo-pick-btn:focus-within { outline: 2px solid var(--olive); outline-offset: 2px; }
@media (max-width: 480px) { .photo-pick { align-items: flex-start; } .photo-pick-preview { width: 72px; height: 72px; } }

/* Command Console: applicant's photo in the application view */
.detail-who { flex: 1; min-width: 200px; }
.detail-who .badge + .badge { margin-left: 6px; }
.app-photo { flex: none; display: block; width: 92px; height: 92px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--radius); }
.app-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.app-photo:hover { border-color: var(--olive); }

/* ==========================================================================
   COMMAND CONSOLE: GAME SERVER (master only)
   ========================================================================== */
.gs-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.gs-grid .card { padding: 22px 24px; }
.gs-grid .card:hover { border-color: var(--line); }
.gs-grid h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 21px; }
.gs-grid h3 svg { width: 19px; height: 19px; color: var(--olive); }
.gs-status { grid-column: 1 / -1; }
.gs-logcard { grid-column: 1 / -1; }
.gs-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; margin-bottom: 14px; }
.gs-state {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  border: 1px solid currentColor; border-radius: 999px;
}
.gs-state i { width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.gs-state.s-on { color: var(--olive); }
.gs-state.s-on i { animation: pulse-olive 1.8s infinite; }
@keyframes pulse-olive { 0% { box-shadow: 0 0 0 0 rgba(163, 176, 110, 0.6); } 70%, 100% { box-shadow: 0 0 0 8px rgba(163, 176, 110, 0); } }
.gs-state.s-busy { color: var(--sand); }
.gs-state.s-bad { color: #ec8b7b; }
.gs-state.s-off { color: var(--muted); }
.gs-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.gs-actions .btn[disabled] { opacity: 0.35; cursor: default; transform: none; }
.gs-name { margin: 0 0 4px; font-size: clamp(22px, 2.6vw, 30px); text-transform: none; letter-spacing: 0.01em; overflow-wrap: anywhere; }
.gs-meta { margin: 0 0 16px; font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
.gs-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0; margin: 0; border: 1px solid var(--line); border-radius: var(--radius); }
.gs-facts div { padding: 12px 16px; border-right: 1px solid var(--line); }
.gs-facts div:last-child { border-right: 0; }
.gs-facts dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.gs-facts dd { margin: 4px 0 0; font-size: 17px; }
.gs-facts code { font-size: 14px; color: var(--text); }
.gs-notice { margin: 16px 0 0; }
.gs-notice p { margin: 0; }
.gs-cmd { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.gs-cmd code { padding: 8px 12px; font-size: 14px; color: var(--text); background: #060b17; border: 1px solid var(--line); border-radius: 2px; user-select: all; }
.gs-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.gs-table th { padding: 6px 8px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-align: left; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.gs-table td { padding: 8px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.gs-table tr:last-child td { border-bottom: 0; }
.gs-settings .field { margin-bottom: 14px; }
.gs-settings .field > label:not(.check) { margin-bottom: 6px; font-size: 11px; }
.gs-settings .field input:not([type="checkbox"]), .gs-settings .field textarea { padding: 9px 12px; font-size: 15px; }
.gs-settings .field textarea { min-height: 0; }
.gs-settings .field .hint { font-size: 13px; }
.gs-settings .field .hint code { font-size: 12.5px; color: var(--silver); }
.gs-settings .field .hint.gs-warn { color: var(--sand); }
.gs-settings .input-row input { font-family: var(--font-body); }
.gs-row { display: grid; grid-template-columns: minmax(0, 1fr) 130px; gap: 12px; }
.gs-check { margin-bottom: 14px; padding: 10px 14px; font-size: 15px; }
.gs-form-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.gs-applies { margin: 10px 0 0; font-size: 13px; color: var(--dim); }
.gs-settings .form-error { margin-bottom: 14px; padding: 10px 12px; font-size: 14px; }
.gs-loghead { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 12px; }
.gs-loghead h3 { margin: 0; }
.gs-loghead .chips { margin: 0; }
.gs-auto { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 14px; color: var(--muted); cursor: pointer; }
.gs-auto input { accent-color: var(--olive); }
.gs-log {
  height: 380px; margin: 0; padding: 12px 14px; overflow: auto;
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere;
  color: var(--silver); background: #050a14; border: 1px solid var(--line); border-radius: var(--radius);
}
.gs-save p { margin: 0 0 12px; }
.gs-save .hint { margin: 12px 0 0; font-size: 13px; color: var(--dim); }
@media (max-width: 960px) {
  .gs-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .gs-row { grid-template-columns: 1fr; gap: 0; }
  .gs-facts div { border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) { .gs-state.s-on i { animation: none; } }