:root {
  --bg: #02080d;
  --panel: rgba(7, 24, 34, .80);
  --panel-strong: rgba(5, 18, 27, .94);
  --panel-soft: rgba(7, 28, 39, .66);
  --text: #edfaff;
  --muted: #8aaab7;
  --line: rgba(85, 225, 255, .36);
  --cyan: #43dcff;
  --cyan-strong: #00cfff;
  --green: #55efad;
  --amber: #ffc857;
  --red: #ff607c;
  --shadow: 0 24px 80px rgba(0,0,0,.55);
}

* { box-sizing: border-box; }

/* Keep the landscape anchored to the viewport on every page. */
html {
  min-height: 100%;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  background:
    linear-gradient(180deg, rgba(1, 8, 13, .10), rgba(1, 8, 13, .20) 48%, rgba(1, 6, 10, .34)),
    url("/assets/images/oldmansurvivor-bg-4k-obelisco-vermelho.webp") center top / cover no-repeat fixed;
  background-attachment: fixed;
  background-color: var(--bg);
}
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background: transparent;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(circle at 66% 15%, rgba(0, 207, 255, .055), transparent 28%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .04;
  background-image:
    linear-gradient(rgba(81, 207, 233, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(81, 207, 233, .03) 1px, transparent 1px);
  background-size: 48px 48px;
}

button, input, textarea { font: inherit; }
button { cursor: pointer; }

.app-shell {
  width: min(1480px, calc(100% - 30px));
  margin: 0 auto;
  padding: 14px 0 42px;
}

/* Cabeçalho clean inspirado na referência */
.site-header {
  display: grid;
  grid-template-columns: 220px 1fr 140px;
  align-items: center;
  gap: 24px;
  min-height: 62px;
  padding: 0 8px;
  border-bottom: 1px solid rgba(82, 221, 250, .18);
  backdrop-filter: blur(14px);
}

.brand-block {
  display: flex;
  align-items: center;
  gap: 11px;
}

.brand-symbol {
  width: 49px;
  height: 49px;
  display: grid;
  place-items: center;
  color: #bff7ff;
  font-size: 26px;
  font-weight: 950;
  border: 1px solid rgba(67, 220, 255, .68);
  clip-path: polygon(50% 0, 100% 88%, 79% 100%, 50% 74%, 21% 100%, 0 88%);
  background: linear-gradient(145deg, rgba(67,220,255,.24), rgba(2,15,23,.72));
  filter: drop-shadow(0 0 10px rgba(67,220,255,.25));
}

.brand-copy {
  display: grid;
  line-height: 1;
}

.brand-copy strong {
  font-size: 21px;
  letter-spacing: .18em;
}

.brand-copy span {
  margin-top: 4px;
  color: var(--cyan);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .28em;
}

.main-nav {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 10px;
  height: 61px;
}

.nav-item {
  position: relative;
  min-width: 82px;
  display: grid;
  place-items: center;
  color: #8da8b3;
  font-size: 12px;
  font-weight: 650;
}

.nav-item.active {
  color: #e8fbff;
  background: linear-gradient(180deg, rgba(67,220,255,.07), transparent);
}

.nav-item.active::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: -1px;
  height: 2px;
  background: var(--cyan);
  box-shadow: 0 0 12px rgba(67,220,255,.7);
}

.system-chip {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #87aab5;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}

.system-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 11px rgba(85,239,173,.8);
}

/* Hero */
.hero {
  max-width: 900px;
  padding: 52px 0 24px 8px;
}

.hero-kicker {
  color: #7fdaf0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .28em;
}

.hero h1 {
  margin: 8px 0 7px;
  font-size: clamp(38px, 5vw, 72px);
  line-height: .95;
  letter-spacing: .02em;
  text-shadow: 0 0 24px rgba(0, 166, 214, .18);
}

.hero h1 span {
  color: var(--cyan);
  text-shadow: 0 0 26px rgba(0, 207, 255, .25);
}

.hero p {
  max-width: 720px;
  margin: 0 0 22px;
  color: #a4bdc5;
  font-size: 14px;
  line-height: 1.55;
}

.toolbar.search-only {
  display: block;
  margin: 0;
  padding: 0;
}

.search-frame {
  position: relative;
  max-width: 760px;
  padding: 1px;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(67,220,255,.92), rgba(67,220,255,.20) 45%, rgba(67,220,255,.72));
  box-shadow: 0 0 24px rgba(0,207,255,.11);
}

.search-frame::before {
  content: "⌕";
  position: absolute;
  left: 17px;
  top: 50%;
  z-index: 2;
  transform: translateY(-52%);
  color: #ddfbff;
  font-size: 25px;
}

.search-frame input {
  width: 100%;
  min-height: 56px;
  padding: 0 20px 0 52px;
  color: var(--text);
  font-size: 15px;
  outline: none;
  border: 0;
  border-radius: 11px;
  background: rgba(4, 20, 30, .90);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 0 30px rgba(0,0,0,.28);
}

.search-frame input::placeholder { color: #829da6; }
.search-frame input:focus { background: rgba(3, 23, 34, .96); }

/* Painel principal */
.workspace-panel {
  margin-top: 12px;
  border: 1px solid rgba(67,220,255,.40);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(3, 17, 25, .24);
  box-shadow:
    0 24px 70px rgba(0,0,0,.34),
    0 0 30px rgba(0,207,255,.07);
  backdrop-filter: blur(2px) saturate(1.04);
}

.workspace-header {
  min-width: 900px;
  min-height: 64px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(67,220,255,.17);
  background:
    linear-gradient(90deg, rgba(0,207,255,.07), transparent 32%),
    rgba(4,19,28,.84);
}

.workspace-title {
  display: flex;
  align-items: center;
  gap: 11px;
}

.panel-icon {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  color: var(--cyan);
  font-size: 25px;
  border: 1px solid rgba(67,220,255,.26);
  border-radius: 7px;
  background: rgba(0,207,255,.05);
}

.workspace-title div {
  display: grid;
}

.workspace-title strong {
  color: #eafcff;
  font-size: 14px;
  letter-spacing: .08em;
}

.workspace-title small {
  margin-top: 2px;
  color: #75939c;
  font-size: 10px;
}

.map-tech {
  padding: 7px 11px;
  color: var(--cyan);
  font-size: 11px;
  font-weight: 850;
  border: 1px solid rgba(67,220,255,.28);
  border-radius: 6px;
  background: rgba(0,207,255,.04);
}

.card {
  border: 0;
  background: transparent;
}

.deposit-card {
  overflow: auto;
  padding: 0;
}

.deposit-wrap { display: block; }
.top-axis, .side-axis { display: none; }

.deposit-grid {
  position: relative;
  isolation: isolate;
  min-width: 900px;
  display: grid;
  grid-template-columns:
    minmax(82px, 1fr) minmax(82px, 1fr) 42px
    minmax(82px, 1fr) minmax(82px, 1fr) 90px
    minmax(82px, 1fr) minmax(82px, 1fr) 42px
    minmax(82px, 1fr) minmax(82px, 1fr);
  grid-template-rows: repeat(12, 96px);
  gap: 6px;
  padding: 16px;
  background:
    linear-gradient(90deg, transparent 0 49.7%, rgba(67,220,255,.04) 49.8% 50.2%, transparent 50.3%),
    repeating-linear-gradient(0deg, rgba(67,220,255,.017) 0 1px, transparent 1px 30px),
    rgba(1, 9, 14, .30);
  box-shadow: inset 0 0 70px rgba(0,0,0,.48);
}

.deposit-grid::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 10px;
  bottom: 10px;
  left: 50%;
  width: 38px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(61,215,242,.18), transparent);
  opacity: .75;
}

.square {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding: 9px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--text);
  text-align: left;
  overflow: hidden;
  border: 1px solid rgba(110,177,193,.29);
  border-radius: 7px;
  background:
    linear-gradient(145deg, rgba(22,54,65,.72), rgba(4,17,24,.91));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 4px 12px rgba(0,0,0,.27);
  backdrop-filter: blur(7px);
  transition: .16s ease;
}

.square::before {
  content: "";
  position: absolute;
  top: 0;
  left: 7px;
  width: 36%;
  height: 1px;
  background: linear-gradient(90deg, rgba(67,220,255,.85), transparent);
}

.square:hover {
  z-index: 3;
  transform: translateY(-2px);
  border-color: rgba(67,220,255,.77);
  box-shadow:
    0 0 20px rgba(0,207,255,.13),
    0 10px 22px rgba(0,0,0,.35);
}

.square.single {
  border-color: rgba(85,239,173,.58);
}

.square.mixed {
  border-color: rgba(255,200,87,.68);
}

.square.match {
  border-color: var(--cyan);
  outline: 2px solid rgba(67,220,255,.46);
  outline-offset: 1px;
  box-shadow: 0 0 22px rgba(0,207,255,.20);
}

.square.dim {
  opacity: .14;
  filter: grayscale(.4);
}

.square-code {
  color: #dffaff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .07em;
}

.square-main {
  overflow: hidden;
  color: #f0fcff;
  font-size: 11px;
  font-weight: 760;
  line-height: 1.3;
}

.square-main .more {
  color: #7d9ba4;
  font-size: 9px;
  font-weight: 500;
}

.square-foot {
  overflow: hidden;
  color: #6d8d97;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Modal */
.square-dialog {
  width: min(1080px, 96vw);
  max-height: 92vh;
  padding: 0;
  overflow: hidden auto;
  color: var(--text);
  border: 1px solid rgba(67,220,255,.48);
  border-radius: 12px;
  background:
    radial-gradient(circle at 0 0, rgba(0,207,255,.07), transparent 36%),
    rgba(3,14,21,.98);
  box-shadow:
    0 34px 110px rgba(0,0,0,.78),
    0 0 30px rgba(0,207,255,.10);
}

.square-dialog::backdrop {
  background: rgba(0,4,7,.82);
  backdrop-filter: blur(8px);
}

.dialog-shell { margin: 0; }

.dialog-header {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 15px 18px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 1px solid rgba(67,220,255,.16);
  background: rgba(4,18,26,.96);
  backdrop-filter: blur(10px);
}

.dialog-header h2 {
  margin: 1px 0 0;
  color: var(--cyan);
  font-size: 28px;
  font-weight: 900;
}

.eyebrow {
  color: #a8cbd4;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.square-summary {
  margin-top: 5px;
  color: #7897a1;
  font-size: 11px;
}

.icon-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  color: #dffaff;
  font-size: 24px;
  border: 1px solid rgba(67,220,255,.18);
  border-radius: 7px;
  background: rgba(9,33,44,.62);
}

.dialog-body {
  display: grid;
  grid-template-columns: minmax(0,1.05fr) minmax(360px,.95fr);
  gap: 14px;
  padding: 16px;
}

.station-panel,
.editor-panel {
  position: relative;
  min-width: 0;
  border: 1px solid rgba(67,220,255,.15);
  border-radius: 10px;
  background: rgba(6,24,33,.66);
}

.station-panel { padding: 14px; }

.section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(67,220,255,.09);
}

.section-heading span {
  color: #d7faff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .10em;
}

.section-heading small {
  color: #5f7f89;
  font-size: 8px;
  letter-spacing: .12em;
}

.station-layout {
  display: grid;
  grid-template-columns: repeat(5, minmax(76px,1fr));
  grid-template-rows: repeat(4,86px);
  gap: 9px;
  min-height: 380px;
  padding: 8px;
  border-radius: 7px;
  background: rgba(0,8,12,.50);
}

.station-btn {
  position: relative;
  width: min(82px,100%);
  aspect-ratio: 1;
  align-self: center;
  justify-self: center;
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--text);
  text-align: center;
  overflow: hidden;
  border: 1px solid rgba(67,220,255,.34);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(12,38,48,.95), rgba(2,10,15,.99) 68%);
  box-shadow:
    inset 0 0 0 4px rgba(67,220,255,.025),
    0 4px 12px rgba(0,0,0,.33);
}

.station-btn:hover,
.station-btn.active {
  border-color: var(--cyan);
  box-shadow: 0 0 18px rgba(0,207,255,.17);
}

.station-btn.filled {
  border-color: rgba(85,239,173,.56);
  background: radial-gradient(circle, rgba(12,50,43,.95), rgba(2,14,12,.99) 70%);
}

.station-plus {
  position: relative;
  z-index: 2;
  color: var(--cyan);
  font-size: 31px;
  font-weight: 300;
}

.station-dino {
  position: relative;
  z-index: 2;
  max-width: 64px;
  overflow: hidden;
  color: #effdff;
  font-size: 9px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.station-color {
  position: relative;
  z-index: 2;
  max-width: 62px;
  overflow: hidden;
  color: #83a7b0;
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-panel { padding: 14px; }

h3 {
  margin: 0 0 9px;
  color: #e4fbff;
  font-size: 14px;
  font-weight: 900;
}

.editor-empty {
  padding: 22px 0;
  color: #7898a0;
}

.hidden { display: none !important; }

.editor-form {
  display: grid;
  gap: 12px;
}

label {
  display: grid;
  gap: 6px;
  color: #94b6bf;
  font-size: 11px;
  font-weight: 700;
}

input, textarea {
  width: 100%;
  padding: 10px 11px;
  color: var(--text);
  outline: none;
  border: 1px solid rgba(67,220,255,.18);
  border-radius: 6px;
  background: rgba(1,9,13,.80);
}

input:focus, textarea:focus {
  border-color: rgba(67,220,255,.70);
  box-shadow: 0 0 0 2px rgba(0,207,255,.06);
}

textarea {
  min-height: 90px;
  resize: vertical;
}

.counter-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.counter-card {
  padding: 10px;
  border: 1px solid rgba(67,220,255,.13);
  border-radius: 7px;
  background: rgba(0,7,11,.44);
}

.counter-card > span {
  display: block;
  margin-bottom: 8px;
  color: #c8f8ff;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.sex-counter {
  display: grid;
  grid-template-columns: 66px minmax(0,1fr);
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px solid rgba(67,220,255,.07);
}

.sex-counter:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.sex-counter b {
  color: #dffbff;
  font-size: 10px;
}

.legacy-counter b { color: var(--amber); }

.counter-row {
  display: grid;
  grid-template-columns: 32px 1fr 32px;
  gap: 5px;
}

.counter-row input {
  padding: 7px 4px;
  text-align: center;
}

button {
  color: var(--text);
  border: 1px solid rgba(67,220,255,.20);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(21,53,64,.93), rgba(5,17,22,.97));
}

button:hover { border-color: rgba(67,220,255,.58); }

.counter-btn {
  padding: 4px;
  color: var(--cyan);
  font-size: 16px;
  font-weight: 900;
}

.quick-row {
  grid-column: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin-top: -1px;
}

.quick-row button {
  padding: 5px;
  color: #9fc4cc;
  font-size: 9px;
}

.editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.editor-actions button {
  padding: 10px 15px;
  font-weight: 850;
}

.primary {
  min-width: 122px;
  color: #001014;
  border-color: rgba(67,220,255,.95);
  background: linear-gradient(180deg, #79efff, #20c7e7);
  box-shadow: 0 0 15px rgba(0,207,255,.15);
}

.danger {
  color: #ffd5dc;
  border-color: rgba(255,96,124,.34);
  background: rgba(95,18,31,.52);
}

.outline { background: transparent; }

/* Posição física */
.station-layout[data-orientation="right"] .station-btn[data-station="1"] { grid-column: 5; grid-row: 1; }
.station-layout[data-orientation="right"] .station-btn[data-station="2"] { grid-column: 4; grid-row: 1; }
.station-layout[data-orientation="right"] .station-btn[data-station="3"] { grid-column: 3; grid-row: 1; }
.station-layout[data-orientation="right"] .station-btn[data-station="4"] { grid-column: 2; grid-row: 1; }
.station-layout[data-orientation="right"] .station-btn[data-station="5"] { grid-column: 1; grid-row: 2; }
.station-layout[data-orientation="right"] .station-btn[data-station="6"] { grid-column: 1; grid-row: 3; }
.station-layout[data-orientation="right"] .station-btn[data-station="7"] { grid-column: 2; grid-row: 4; }
.station-layout[data-orientation="right"] .station-btn[data-station="8"] { grid-column: 3; grid-row: 4; }
.station-layout[data-orientation="right"] .station-btn[data-station="9"] { grid-column: 4; grid-row: 4; }
.station-layout[data-orientation="right"] .station-btn[data-station="10"] { grid-column: 5; grid-row: 4; }

.station-layout[data-orientation="left"] .station-btn[data-station="1"] { grid-column: 1; grid-row: 1; }
.station-layout[data-orientation="left"] .station-btn[data-station="2"] { grid-column: 2; grid-row: 1; }
.station-layout[data-orientation="left"] .station-btn[data-station="3"] { grid-column: 3; grid-row: 1; }
.station-layout[data-orientation="left"] .station-btn[data-station="4"] { grid-column: 4; grid-row: 1; }
.station-layout[data-orientation="left"] .station-btn[data-station="5"] { grid-column: 5; grid-row: 2; }
.station-layout[data-orientation="left"] .station-btn[data-station="6"] { grid-column: 5; grid-row: 3; }
.station-layout[data-orientation="left"] .station-btn[data-station="7"] { grid-column: 4; grid-row: 4; }
.station-layout[data-orientation="left"] .station-btn[data-station="8"] { grid-column: 3; grid-row: 4; }
.station-layout[data-orientation="left"] .station-btn[data-station="9"] { grid-column: 2; grid-row: 4; }
.station-layout[data-orientation="left"] .station-btn[data-station="10"] { grid-column: 1; grid-row: 4; }

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(67,220,255,.34) rgba(0,0,0,.20);
}

*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: rgba(0,0,0,.22); }
*::-webkit-scrollbar-thumb {
  border: 2px solid rgba(0,0,0,.42);
  border-radius: 999px;
  background: rgba(67,220,255,.30);
}

@media (max-width: 1050px) {
  .site-header {
    grid-template-columns: 1fr auto;
  }

  .main-nav { display: none; }

  .hero {
    padding-top: 30px;
  }

  .dialog-body {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .app-shell {
    width: min(100% - 12px, 1480px);
    padding-top: 6px;
  }

  .site-header {
    grid-template-columns: 1fr;
    min-height: 54px;
  }

  .system-chip { display: none; }

  .hero {
    padding: 22px 0 16px;
  }

  .hero h1 {
    font-size: 38px;
  }

  .hero p {
    font-size: 12px;
  }

  .search-frame input {
    min-height: 50px;
  }

  .dialog-body {
    padding: 9px;
  }

  .station-panel,
  .editor-panel {
    padding: 9px;
  }

  .station-layout {
    grid-template-columns: repeat(5, minmax(52px,1fr));
    grid-template-rows: repeat(4,64px);
    min-height: 290px;
    gap: 5px;
  }

  .station-btn {
    width: 58px;
    padding: 5px;
  }

  .station-dino { max-width: 48px; font-size: 8px; }
  .station-color { max-width: 46px; }

  .sex-counter {
    grid-template-columns: 58px minmax(0,1fr);
  }
}


.hero-copy {
  text-shadow: 0 2px 18px rgba(0,0,0,.72);
}

/* Consistent uppercase page titles, including account headings rendered by JavaScript. */
main h1 { text-transform: uppercase; }