/* ============================================================
   The Bootcamp — QG reskin "Patch Board"
   Paleta do site: verde oliva, cáqui, creme (patch militar).
   Mantém TODAS as classes do projeto (.card, .btn, .pill, .topbar,
   .login-card, .modal etc) — basta trocar este arquivo pra reskin.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Stardos+Stencil:wght@400;700&family=Special+Elite&family=IBM+Plex+Mono:wght@300;400;500;600;700&family=Zilla+Slab:ital,wght@0,400;0,700;0,900;1,400;1,700&family=Oswald:wght@300;400;500;600;700&display=swap');

:root {
  /* Patch Board — oliva do site, ação em cáqui (paleta da home page) */
  --fld-bg-0:     #202614;   /* deepest — outside */
  --fld-bg-1:     #2e3620;   /* page (oliva profundo do site) */
  --fld-bg-2:     #3a4228;   /* card */
  --fld-bg-3:     #4a5230;   /* raised / hover (oliva do site) */
  --fld-bg-4:     #5a6340;   /* hover++ */

  --fld-line:     #4a5230;
  --fld-line-2:   #7d7550;
  --fld-line-soft: rgba(240,233,210,.10);

  --fld-cream:    #f0e9d2;   /* texto principal (creme do site) */
  --fld-cream-2:  #d6cfb4;
  --fld-cream-3:  #a8a184;
  --fld-mute:     #6f6e55;

  /* Aliases conceituais — ação primária em cáqui (patch) */
  --fld-olive:    #a89a6d;   /* muted action / borders (cáqui-dim) */
  --fld-olive-2:  #c8b98a;   /* primary action (cáqui do site) */
  --fld-olive-3:  #d9cda3;   /* highlight */
  --fld-amber:    #c8b98a;   /* acento cáqui (era o ouro CF) */
  --fld-amber-2:  #d9cda3;
  --fld-crimson:  #c5443a;   /* danger */
  --fld-crimson-2:#dc5d51;
  --fld-green:    #7a8a5e;   /* ok (musgo) */
  --fld-navy:     #2e3f5c;   /* faixa navy do patch (uso pontual) */

  /* Type */
  --fld-stencil:  'Stardos Stencil', 'Special Elite', monospace;
  --fld-mono:     'IBM Plex Mono', 'Courier New', monospace;
  --fld-display:  'Zilla Slab', Georgia, serif;
  --fld-typew:    'Special Elite', 'Courier New', monospace;

  --shadow:       0 6px 28px rgba(0,0,0,.55);
  --shadow-lift:  0 2px 0 rgba(0,0,0,.4), 0 14px 36px rgba(0,0,0,.55);

  /* Aliases (compat com JS antigo que usa --olive, --amber, etc.) */
  --bg:           var(--fld-bg-1);
  --bg-2:         var(--fld-bg-2);
  --surface:      var(--fld-bg-2);
  --surface-solid: var(--fld-bg-2);
  --line:         var(--fld-line);
  --line-soft:    var(--fld-line-soft);
  --olive:        var(--fld-olive);
  --olive-bright: var(--fld-olive-3);
  --amber:        var(--fld-amber);
  --crimson:      var(--fld-crimson);
  --cream:        var(--fld-cream);
  --cream-dim:    var(--fld-cream-2);
  --muted:        var(--fld-cream-3);
  /* Aliases pro tema antigo "War Zine" (htl-*) */
  --htl-paper:    var(--fld-bg-1);
  --htl-paper-2:  var(--fld-bg-2);
  --htl-paper-3:  var(--fld-bg-3);
  --htl-ink:      var(--fld-cream);
  --htl-ink-2:    var(--fld-cream-2);
  --htl-rust:     var(--fld-crimson);
  --htl-gold:     var(--fld-amber);
  --htl-green:    var(--fld-green);
  --htl-display:  var(--fld-display);
  --htl-body:     var(--fld-mono);
  --htl-stencil:  var(--fld-stencil);
  --htl-frak:     var(--fld-display);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--fld-bg-1);
  color: var(--fld-cream);
  font-family: var(--fld-mono);
  font-size: 13.5px;
  line-height: 1.55;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* Page atmosphere — vinheta + grão + grid sutil */
body {
  background-image:
    radial-gradient(ellipse 80% 60% at 18% -10%, rgba(240,233,210,.05) 0%, transparent 60%),
    radial-gradient(ellipse 80% 60% at 100% 110%, rgba(200,185,138,.05) 0%, transparent 55%),
    linear-gradient(rgba(240,233,210,.016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240,233,210,.016) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 36px 36px, 36px 36px;
  background-attachment: fixed;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .9 0 0 0 0 .88 0 0 0 0 .82 0 0 0 .05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: .5;
  mix-blend-mode: overlay;
}
body::after {
  /* fina linha de scan no topo, tipo HUD */
  content: '';
  position: fixed; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--fld-cream) 20%, var(--fld-cream) 80%, transparent);
  opacity: .25;
  pointer-events: none;
  z-index: 60;
}
body > * { position: relative; z-index: 1; }

::selection { background: var(--fld-cream); color: var(--fld-bg-1); }

a { color: var(--fld-cream); text-decoration: none; border-bottom: 1px dotted var(--fld-cream-3); }
a:hover { color: var(--fld-amber); border-bottom-color: var(--fld-amber); text-decoration: none; }

/* ─── Topbar universal (botões/pílulas, igual ao hub) ──────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(7, 11, 20, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--fld-line);
  box-shadow: 0 1px 0 rgba(244,194,13,.18), 0 6px 20px rgba(0,0,0,.35);
}
.topbar-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 10px 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
/* Base de pílula compartilhada por todos os itens clicáveis */
.topbar a.brand,
.topbar nav.topnav a,
.topbar a.logout {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--fld-stencil);
  font-size: 12.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--fld-line-2);
  background: rgba(255,255,255,.03);
  color: var(--fld-cream-2);
  padding: 7px 13px;
  border-radius: 9px;
  transition: color .14s, border-color .14s, background .14s;
}
.topbar .ic { font-size: 14px; line-height: 1; }

/* Home (marca) — destaque dourado + logo */
.topbar a.brand { color: var(--fld-amber); border-color: rgba(244,194,13,.55); flex: 0 0 auto; }
.topbar a.brand img { height: 22px; width: auto; display: block; }
.topbar a.brand:hover { background: rgba(244,194,13,.12); }

/* Navegação */
.topbar nav.topnav { display: flex; gap: 8px; align-items: center; flex: 1 1 auto; flex-wrap: wrap; }
.topbar nav.topnav a:hover { color: var(--fld-cream); border-color: var(--fld-cream-3); background: rgba(255,255,255,.06); }
.topbar nav.topnav a.active { color: var(--fld-amber); border-color: var(--fld-amber); background: rgba(244,194,13,.12); }

/* Lado direito */
.topbar .topbar-right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; flex-wrap: wrap; }
.topbar .who {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--fld-stencil); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fld-cream); background: rgba(244,194,13,.10);
  border: 1px solid rgba(244,194,13,.35); border-radius: 9px; padding: 6px 12px;
}
.topbar .who b { color: var(--fld-amber); font-weight: 700; }
.topbar .who .who-role { color: var(--fld-cream-3); font-size: 10px; }
.topbar a.logout { color: var(--fld-cream-3); }
.topbar a.logout:hover { color: var(--fld-crimson-2); border-color: var(--fld-crimson); background: rgba(197,68,58,.08); }

@media (max-width: 860px) {
  .topbar nav.topnav { order: 3; width: 100%; justify-content: flex-start; }
}

/* Botões de idioma EN/PT/ES (universal) */
.lang-btns { display: inline-flex; gap: 4px; }
.langbtn {
  background: var(--fld-bg-2);
  border: 1px solid var(--fld-line-2);
  color: var(--fld-cream-2);
  font-family: var(--fld-stencil);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.langbtn:hover { color: var(--fld-cream); border-color: var(--fld-cream-3); }
.langbtn.active { background: rgba(244,194,13,.16); border-color: var(--fld-amber); color: var(--fld-amber); }

/* ─── Layout ──────────────────────────────────────────────── */
.wrap {
  /* usa a tela toda (o Bootcamp trabalha com tabelas largas), com um respiro nas bordas */
  max-width: min(98vw, 2400px);
  margin: 0 auto;
  padding: 36px 32px 80px;
  position: relative;
}

h1 {
  font-family: var(--fld-display);
  font-weight: 900;
  letter-spacing: -.015em;
  font-size: 52px;
  color: var(--fld-cream);
  margin-bottom: 6px;
  line-height: 1;
  text-transform: uppercase;
}
h1 em {
  font-style: normal;
  font-weight: 900;
  color: var(--fld-cream-2);
  opacity: .7;
}

h2 {
  font-family: var(--fld-stencil);
  font-weight: 700;
  letter-spacing: .18em;
  font-size: 16px;
  text-transform: uppercase;
  color: var(--fld-cream);
  margin: 40px 0 16px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--fld-line);
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}
h2::before {
  content: '';
  display: inline-block;
  width: 14px; height: 14px;
  background: var(--fld-cream);
  clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
  flex: 0 0 14px;
}

h3 {
  font-family: var(--fld-display);
  font-weight: 900;
  font-size: 22px;
  color: var(--fld-cream);
  letter-spacing: -.005em;
}

.subtitle {
  color: var(--fld-cream-2);
  font-family: var(--fld-mono);
  font-size: 12.5px;
  font-style: normal;
  letter-spacing: .08em;
  margin-bottom: 28px;
  text-transform: uppercase;
}
.subtitle::before { content: '› '; color: var(--fld-cream); }

/* ─── Form controls ───────────────────────────────────────── */
label {
  display: block;
  color: var(--fld-cream-2);
  font-family: var(--fld-stencil);
  font-size: 10.5px;
  letter-spacing: .28em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
input[type="text"], input[type="password"], input[type="email"], select, textarea {
  width: 100%;
  background: var(--fld-bg-0);
  border: 1px solid var(--fld-line-2);
  color: var(--fld-cream);
  padding: 11px 14px;
  font-family: var(--fld-mono);
  font-weight: 400;
  font-size: 13.5px;
  border-radius: 0;
  outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
input::placeholder, textarea::placeholder { color: var(--fld-mute); font-style: italic; }
input:focus, select:focus, textarea:focus {
  border-color: var(--fld-amber);
  box-shadow: 0 0 0 1px var(--fld-amber), inset 0 0 0 1px rgba(212,164,74,.12);
  background: var(--fld-bg-1);
}
textarea {
  resize: vertical;
  min-height: 96px;
  font-family: var(--fld-mono);
  font-size: 13px;
  line-height: 1.6;
}
input[type="file"] {
  background: transparent;
  border: 1px dashed var(--fld-line-2);
  padding: 8px 10px;
  font-family: var(--fld-mono);
  color: var(--fld-cream-2);
}
input[type="file"]::file-selector-button {
  background: var(--fld-bg-3);
  border: 1px solid var(--fld-line-2);
  color: var(--fld-cream);
  padding: 5px 12px;
  font-family: var(--fld-stencil);
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  cursor: pointer;
  margin-right: 10px;
}

button, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--fld-bg-3);
  border: 1px solid var(--fld-line-2);
  color: var(--fld-cream);
  padding: 10px 22px;
  font-family: var(--fld-stencil);
  font-size: 11.5px;
  letter-spacing: .28em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 0;
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s, transform .05s;
  position: relative;
}
button:hover:not(:disabled), .btn:hover {
  background: var(--fld-bg-4);
  border-color: var(--fld-cream-3);
  color: var(--fld-cream);
}
button:active:not(:disabled), .btn:active { transform: translateY(1px); }
button:disabled { opacity: .35; cursor: not-allowed; }

button.primary {
  background: var(--fld-cream);
  border-color: var(--fld-cream);
  color: var(--fld-bg-0);
  font-weight: 700;
}
button.primary:hover:not(:disabled) {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--fld-bg-0);
}
button.primary::after {
  content: '';
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px;
  background: var(--fld-bg-0);
  opacity: .55;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

button.danger {
  background: rgba(181,58,45,.08);
  border-color: var(--fld-crimson);
  color: var(--fld-crimson-2);
}
button.danger:hover:not(:disabled) {
  background: var(--fld-crimson);
  border-color: var(--fld-crimson-2);
  color: var(--fld-cream);
}

button.warn {
  background: rgba(212,164,74,.08);
  border-color: var(--fld-amber);
  color: var(--fld-amber-2);
}
button.warn:hover:not(:disabled) {
  background: var(--fld-amber);
  border-color: var(--fld-amber-2);
  color: var(--fld-bg-0);
}

button.ghost {
  background: transparent;
  border-color: var(--fld-line-2);
  color: var(--fld-cream-2);
}
button.ghost:hover:not(:disabled) {
  border-color: var(--fld-cream-2);
  color: var(--fld-cream);
  background: rgba(232,227,211,.04);
}

button.small, .btn.small {
  padding: 6px 12px;
  font-size: 10px;
  letter-spacing: .22em;
}

/* ─── Cards (field panels) ────────────────────────────────── */
.card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.015), transparent 70%),
    var(--fld-bg-2);
  border: 1px solid var(--fld-line);
  padding: 22px 24px;
  margin-bottom: 14px;
  position: relative;
  border-radius: 0;
}
/* "rivets" nos cantos */
.card::before,
.card::after {
  content: '';
  position: absolute;
  width: 6px; height: 6px;
  background: var(--fld-line-2);
  border: 1px solid var(--fld-bg-0);
  pointer-events: none;
}
.card::before { left: 6px; top: 6px; }
.card::after { right: 6px; top: 6px; box-shadow:
  0 calc(100% + 0px) 0 0 var(--fld-line-2);
}
.card > * { position: relative; }

.card.solid { background: var(--fld-bg-3); }

.field-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.field-row > * { flex: 1 1 180px; }
.field-row > button { flex: 0 0 auto; }

/* ─── Tables ──────────────────────────────────────────────── */
table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(0,0,0,.18);
}
th, td {
  padding: 11px 14px;
  text-align: left;
  border-bottom: 1px solid var(--fld-line-soft);
  vertical-align: middle;
  font-size: 13px;
  font-family: var(--fld-mono);
  color: var(--fld-cream);
}
th {
  font-family: var(--fld-stencil);
  font-size: 10.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--fld-cream-2);
  border-bottom: 1px solid var(--fld-line-2);
  background: rgba(232,227,211,.025);
}
tr:hover td { background: rgba(232,227,211,.04); }

/* ─── Status pills (dog-tag style) ────────────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  font-family: var(--fld-stencil);
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  background: rgba(0,0,0,.25);
  color: var(--fld-cream-2);
}
.pill::before {
  content: '';
  width: 6px; height: 6px;
  background: currentColor;
  border-radius: 50%;
  flex: 0 0 6px;
}
.pill.pending  { color: var(--fld-amber); }
.pill.approved { color: var(--fld-green); }
.pill.rejected { color: var(--fld-crimson-2); }
.pill.info     { color: var(--fld-cream-3); }

/* ─── Toasts ──────────────────────────────────────────────── */
.toast-wrap {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.toast {
  background: var(--fld-bg-2);
  border: 1px solid var(--fld-line-2);
  border-left: 3px solid var(--fld-cream);
  padding: 12px 18px;
  color: var(--fld-cream);
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s, transform .2s;
  max-width: 380px;
  font-size: 13px;
  font-family: var(--fld-mono);
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { border-left-color: var(--fld-crimson-2); color: var(--fld-crimson-2); }
.toast.ok    { border-left-color: var(--fld-green); color: var(--fld-green); }
.toast.warn  { border-left-color: var(--fld-amber); color: var(--fld-amber-2); }

/* ─── Modal ───────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(8,9,5,.78);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}
.modal {
  background: var(--fld-bg-2);
  border: 1px solid var(--fld-line-2);
  padding: 28px 32px;
  width: 90%;
  max-width: 540px;
  box-shadow: var(--shadow-lift);
  position: relative;
  /* modal mais alto que a tela: ganha scroll interno (a roda do mouse volta a funcionar) */
  max-height: 92vh;
  overflow-y: auto;
}
.modal::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background:
    repeating-linear-gradient(90deg,
      var(--fld-amber) 0 12px,
      transparent 12px 20px);
  opacity: .8;
}
.modal > * { position: relative; }
.modal h3 {
  font-family: var(--fld-stencil);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--fld-amber);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--fld-line);
}
.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 24px;
}

/* ─── Misc ────────────────────────────────────────────────── */
.muted { color: var(--fld-cream-3); }
.dim   { color: var(--fld-mute); }
.flex  { display: flex; gap: 12px; align-items: center; }
.grow  { flex: 1; }
.right { text-align: right; }
.mono  { font-family: var(--fld-mono); }
.small { font-size: 11.5px; }
.spacer { height: 16px; }

.tag {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--fld-line-2);
  color: var(--fld-cream-2);
  font-family: var(--fld-stencil);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-right: 4px;
  background: rgba(0,0,0,.25);
}

.flag-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  font-family: var(--fld-stencil);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin: 2px 4px 2px 0;
  border: 1px solid currentColor;
  background: rgba(0,0,0,.2);
}
.flag-chip::before {
  content: '!';
  width: 12px; height: 12px;
  border: 1px solid currentColor;
  display: inline-grid;
  place-items: center;
  font-size: 9px;
  font-weight: 700;
}
.flag-chip.warn  { color: var(--fld-amber-2); }
.flag-chip.block { color: var(--fld-crimson-2); }
.flag-chip.info  { color: var(--fld-cream-3); }

.checklist label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 0;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--fld-mono);
  font-size: 13px;
  color: var(--fld-cream);
}
.checklist input[type="checkbox"] { margin-top: 4px; accent-color: var(--fld-cream); }

.empty {
  padding: 32px 18px;
  text-align: center;
  color: var(--fld-cream-3);
  border: 1px dashed var(--fld-line-2);
  background: rgba(0,0,0,.15);
  font-family: var(--fld-mono);
  font-style: normal;
  font-size: 13px;
  letter-spacing: .04em;
}
.empty::before {
  content: '— NO RECORDS —';
  display: block;
  font-family: var(--fld-stencil);
  font-size: 10.5px;
  letter-spacing: .3em;
  color: var(--fld-mute);
  margin-bottom: 8px;
}

/* ─── Login screen ────────────────────────────────────────── */
.center-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background:
    radial-gradient(ellipse 50% 60% at 50% 50%, rgba(232,227,211,.05) 0%, transparent 70%);
}
.login-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 60%),
    var(--fld-bg-2);
  border: 1px solid var(--fld-line-2);
  padding: 38px 42px 32px;
  width: 100%;
  max-width: 440px;
  box-shadow: var(--shadow-lift);
  position: relative;
}
/* top hazard stripe */
.login-card::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 4px;
  background:
    repeating-linear-gradient(90deg,
      var(--fld-amber) 0 14px,
      var(--fld-bg-0) 14px 22px);
}
/* corner brackets */
.login-card::after {
  content: '';
  position: absolute;
  inset: 14px;
  pointer-events: none;
  background:
    /* TL */ linear-gradient(var(--fld-cream), var(--fld-cream)) left top / 14px 1px no-repeat,
    linear-gradient(var(--fld-cream), var(--fld-cream)) left top / 1px 14px no-repeat,
    /* TR */ linear-gradient(var(--fld-cream), var(--fld-cream)) right top / 14px 1px no-repeat,
    linear-gradient(var(--fld-cream), var(--fld-cream)) right top / 1px 14px no-repeat,
    /* BL */ linear-gradient(var(--fld-cream), var(--fld-cream)) left bottom / 14px 1px no-repeat,
    linear-gradient(var(--fld-cream), var(--fld-cream)) left bottom / 1px 14px no-repeat,
    /* BR */ linear-gradient(var(--fld-cream), var(--fld-cream)) right bottom / 14px 1px no-repeat,
    linear-gradient(var(--fld-cream), var(--fld-cream)) right bottom / 1px 14px no-repeat;
  opacity: .7;
}
.login-card > * { position: relative; }

.login-card h1 {
  font-family: var(--fld-stencil);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: .18em;
  color: var(--fld-cream);
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 6px;
}
.login-card h1::before {
  content: '★ ';
  color: var(--fld-cream);
  font-size: 22px;
  letter-spacing: 0;
}
.login-card h1::after {
  content: ' ★';
  color: var(--fld-cream);
  font-size: 22px;
  letter-spacing: 0;
}
.login-card .subtitle {
  text-align: center;
  color: var(--fld-cream-2);
  font-family: var(--fld-stencil);
  font-size: 10.5px;
  letter-spacing: .32em;
  margin-bottom: 28px;
  text-transform: uppercase;
}
.login-card .subtitle::before { content: '— '; }
.login-card .subtitle::after  { content: ' —'; }

/* small print at bottom of login card */
.login-card .small.muted {
  font-family: var(--fld-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  color: var(--fld-cream-3);
  padding-top: 18px;
  margin-top: 22px !important;
  border-top: 1px solid var(--fld-line-soft);
}

/* ─── Helpers for HLL-themed status colors used by admin.html ─ */
.player-row.rejected { background: rgba(181,58,45,.07) !important; }
.player-row.approved { background: rgba(93,138,74,.06) !important; }

/* Roster list typical structure */
.roster-row, .removal-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--fld-line-soft);
}
.roster-row:hover, .removal-row:hover { background: rgba(232,227,211,.04); }

/* code-like player names */
.player-name {
  font-family: var(--fld-mono);
  font-weight: 600;
  color: var(--fld-cream);
  letter-spacing: .02em;
}
.player-meta { font-family: var(--fld-mono); color: var(--fld-cream-3); font-size: 11.5px; letter-spacing: .04em; }

/* Headings used inside admin.html inline overrides — keep readable */
h1.detail-title { color: var(--fld-cream); }

/* ─── Sponsors footer (visível em todas as páginas, discreto) ─── */
.sponsors-bar {
  margin-top: 60px;
  padding: 18px 32px 24px;
  border-top: 1px solid var(--fld-line);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 1;
}
.sponsors-bar .lbl {
  font-family: var(--fld-stencil);
  font-size: 9.5px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--fld-cream-3);
  opacity: .7;
}
.sponsors-bar .logos {
  display: flex;
  gap: 32px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.sponsors-bar .logos a {
  display: inline-flex;
  align-items: center;
  border-bottom: 0;
  opacity: .55;
  transition: opacity .15s, transform .15s;
  text-decoration: none;
}
.sponsors-bar .logos a:hover { opacity: 1; transform: scale(1.03); }
.sponsors-bar img {
  height: 64px;
  width: auto;
  max-width: 240px;
  object-fit: contain;
  filter: grayscale(.2);
}
.sponsors-bar img.sq {
  height: 72px;
  width: 72px;
  border-radius: 6px;
}
.sponsor-fallback {
  display: inline-block;
  padding: 6px 14px;
  font-family: var(--fld-stencil);
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--fld-cream-2);
  border: 1px solid var(--fld-line-2);
  background: var(--fld-bg-2);
  border-radius: 0;
}
/* No login screen, footer ainda mais compacto */
.center-screen .sponsors-bar { margin-top: 24px; padding: 14px 0 0; border-top: 1px solid var(--fld-line-soft); }

/* Final touch — subtle horizontal divider class */
.divider {
  border: 0;
  border-top: 1px solid var(--fld-line);
  margin: 24px 0;
  position: relative;
}
.divider::after {
  content: '✦';
  position: absolute;
  left: 50%;
  top: -10px;
  transform: translateX(-50%);
  background: var(--fld-bg-1);
  padding: 0 10px;
  color: var(--fld-cream-3);
  font-size: 12px;
}


/* ═══════════════════════════════════════════════════════════════
   VARIANT B — Steel + Ice Blue
   Sobrescreve só os acentos. Base (bg/text) permanece igual.
   ═══════════════════════════════════════════════════════════════ */
:root {
  --fld-ice:    #6e9ec0;
  --fld-ice-2:  #8ab2cc;
  --fld-ice-3:  #5a89aa;
  --fld-amber:    #d4a44a;
  --fld-amber-2:  #e8bc6a;
}

::selection { background: var(--fld-ice); color: var(--fld-bg-0); }

a { color: var(--fld-ice); border-bottom-color: var(--fld-ice-3); }
a:hover { color: var(--fld-amber); border-bottom-color: var(--fld-amber); }

body::after {
  background: linear-gradient(90deg, transparent, var(--fld-ice) 20%, var(--fld-ice) 80%, transparent);
  opacity: .35;
}

/* Topbar accents */
.topbar a.brand::before { color: var(--fld-ice); }
.topbar nav a.active { color: var(--fld-ice); border-bottom-color: var(--fld-ice); }
.topbar .who { color: var(--fld-ice); border-color: var(--fld-ice); background: rgba(110,158,192,.08); }

/* Headings + small accents */
h2::before { background: var(--fld-ice); }
.subtitle::before { color: var(--fld-ice); }

/* Inputs focus ring */
input:focus, select:focus, textarea:focus {
  border-color: var(--fld-ice);
  box-shadow: 0 0 0 1px var(--fld-ice), inset 0 0 0 1px rgba(110,158,192,.14);
  background: var(--fld-bg-1);
}

/* Buttons */
button:hover:not(:disabled), .btn:hover {
  border-color: var(--fld-ice-3);
}
button.primary {
  background: var(--fld-ice);
  border-color: var(--fld-ice);
  color: var(--fld-bg-0);
}
button.primary:hover:not(:disabled) {
  background: var(--fld-ice-2);
  border-color: var(--fld-ice-2);
  color: var(--fld-bg-0);
}

/* Status — Approved becomes blue (matching primary action) */
.pill.approved { color: var(--fld-ice); }

/* Toasts */
.toast { border-left-color: var(--fld-ice); }
.toast.ok { border-left-color: var(--fld-ice); color: var(--fld-ice); }
.toast.warn { border-left-color: var(--fld-amber); color: var(--fld-amber-2); }

/* Login card corner brackets */
.login-card::after {
  background:
    linear-gradient(var(--fld-ice), var(--fld-ice)) left top / 14px 1px no-repeat,
    linear-gradient(var(--fld-ice), var(--fld-ice)) left top / 1px 14px no-repeat,
    linear-gradient(var(--fld-ice), var(--fld-ice)) right top / 14px 1px no-repeat,
    linear-gradient(var(--fld-ice), var(--fld-ice)) right top / 1px 14px no-repeat,
    linear-gradient(var(--fld-ice), var(--fld-ice)) left bottom / 14px 1px no-repeat,
    linear-gradient(var(--fld-ice), var(--fld-ice)) left bottom / 1px 14px no-repeat,
    linear-gradient(var(--fld-ice), var(--fld-ice)) right bottom / 14px 1px no-repeat,
    linear-gradient(var(--fld-ice), var(--fld-ice)) right bottom / 1px 14px no-repeat;
}
.login-card h1::before,
.login-card h1::after { color: var(--fld-ice); }

/* Hazard stripe (login top) — keep amber, it's the warn role */

/* Checklist accent */
.checklist input[type="checkbox"] { accent-color: var(--fld-ice); }

/* ─── Drawer (seção recolhível, ex.: pedidos de remoção) ─── */
details.drawer { margin: 40px 0 16px; }
details.drawer > summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--fld-stencil);
  font-weight: 700;
  letter-spacing: .18em;
  font-size: 16px;
  text-transform: uppercase;
  color: var(--fld-cream);
  padding: 0 0 10px;
  border-bottom: 1px solid var(--fld-line);
  display: flex;
  align-items: center;
  gap: 12px;
}
details.drawer > summary::-webkit-details-marker { display: none; }
details.drawer > summary::before {
  content: '▸';
  color: var(--fld-amber);
  font-size: 13px;
  transition: transform .15s;
}
details.drawer[open] > summary::before { content: '▾'; }
details.drawer > summary:hover { color: var(--fld-amber); }
details.drawer > #removalList,
details.drawer > div { margin-top: 14px; }

/* ─── Cabeçalho de grupo no roster (classificados / sem info / recentes) ─── */
.roster-group-head {
  font-family: var(--fld-stencil);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--fld-amber);
  background: rgba(244,194,13,.08);
  border-top: 1px solid var(--fld-line);
  border-bottom: 1px solid var(--fld-line);
  padding: 7px 14px;
}
.roster-group-head:first-child { border-top: 0; }
.roster-group-head .muted { color: var(--fld-cream-3); }

/* ─── Setas flutuantes de scroll (▲ topo / ▼ final) ─── */
#scrollNav .snav {
  position: fixed;
  right: 18px;
  z-index: 90;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(20,26,40,.92);
  border: 1px solid var(--fld-amber);
  color: var(--fld-amber);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
  opacity: .65;
  transition: opacity .15s, transform .1s;
}
#scrollNav .snav:hover { opacity: 1; }
#scrollNav .snav:active { transform: scale(.94); }
#scrollNav .snav.to-top { bottom: 20px; }
#scrollNav .snav.to-bottom { top: 74px; }


/* ═══════════════════════════════════════════════════════════════
   VARIANT D — THE BOOTCAMP (olive + khaki "Patch Board")
   Matches the Bootcamp home page palette (olive drab, khaki, cream,
   stencil headings). Pure palette remap: redefines the --fld-* tokens
   so every existing rule re-skins. To revert, delete this block.
   ═══════════════════════════════════════════════════════════════ */
:root {
  /* Surfaces — olive drab (site background family) */
  --fld-bg-0:   #202614;   /* deepest (topbar, deepest fields) */
  --fld-bg-1:   #2e3620;   /* page */
  --fld-bg-2:   #3a4228;   /* card */
  --fld-bg-3:   #4a5230;   /* raised / hover */
  --fld-bg-4:   #5a6340;   /* hover++ */

  --fld-line:      #4a5230;
  --fld-line-2:    #7d7550;
  --fld-line-soft: rgba(240,233,210,.10);

  /* Text — cream do patch */
  --fld-cream:   #f0e9d2;  /* main text */
  --fld-cream-2: #d6cfb4;
  --fld-cream-3: #a8a184;
  --fld-mute:    #6f6e55;

  /* Accents — khaki (borda costurada do patch) + status */
  --fld-amber:    #c8b98a;
  --fld-amber-2:  #d9cda3;
  --fld-crimson:  #cf5b4e;
  --fld-crimson-2:#dd7c70;
  --fld-green:    #93b06d;

  /* "Ice" accent → khaki, so primary buttons, active nav, approved
     pills, brackets, etc. all read khaki like the site CTAs. */
  --fld-ice:    #c8b98a;
  --fld-ice-2:  #d9cda3;
  --fld-ice-3:  #a89a6d;

  /* Type — match the site: stencil headings, clean sans body. */
  --fld-stencil: 'Stardos Stencil', 'Oswald', sans-serif;  /* headings / labels / nav */
  --fld-mono:    'Oswald', sans-serif;  /* body / inputs / tables */
  --fld-display: 'Stardos Stencil', 'Oswald', sans-serif;  /* h1 / h3 */
  --fld-typew:   'Oswald', sans-serif;
}

/* Oswald is a touch narrower than the old mono — nudge base size/spacing
   for comfortable reading on the dense roster/admin views. */
html, body { font-size: 14.5px; letter-spacing: .2px; }

/* Page background — olive gradient + leve tinta cáqui (paleta da home). */
body {
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(200,185,138,.08), transparent),
    linear-gradient(#2e3620, #232917);
  background-attachment: fixed;
}

::selection { background: var(--fld-amber); color: var(--fld-bg-0); }

/* Primary action: gold fill, dark text (hub style) */
button.primary, button.primary:hover:not(:disabled) {
  background: var(--fld-amber);
  border-color: var(--fld-amber);
  color: var(--fld-bg-0);
}
button.primary:hover:not(:disabled) { background: var(--fld-amber-2); border-color: var(--fld-amber-2); }

/* Approved status reads gold-green like the hub differential */
.pill.approved { color: var(--fld-green); }
.toast.ok { border-left-color: var(--fld-green); color: var(--fld-green); }