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

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  background: #1a1a2e;
  color: #e0e0e0;
  min-height: 100vh;
}

/* ── Header ── */
header {
  background: #16213e;
  border-bottom: 1px solid #0f3460;
  padding: 16px 20px;
  position: sticky;
  top: 0;
  z-index: 10;
}

h1 {
  font-size: 18px;
  font-weight: 600;
  color: #e2b96f;
  margin-bottom: 12px;
  letter-spacing: 0.5px;
}

.form-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.form-row label {
  color: #a0a0b0;
  white-space: nowrap;
  font-size: 13px;
}

.form-row input[type="text"] {
  flex: 1;
  background: #0d1b2a;
  border: 1px solid #0f3460;
  border-radius: 4px;
  color: #e0e0e0;
  padding: 6px 10px;
  font-size: 13px;
  font-family: "SF Mono", "Fira Code", monospace;
  outline: none;
}

.form-row input[type="text"]:focus {
  border-color: #e2b96f;
}

button {
  background: #0f3460;
  border: 1px solid #1a5276;
  border-radius: 4px;
  color: #e0e0e0;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

button:hover { background: #1a5276; }

.game-info {
  margin-top: 8px;
  font-size: 13px;
  color: #a0a0b0;
}

.game-info .label { font-weight: 600; color: #e2b96f; }

.config-info {
  margin-bottom: 8px;
  font-size: 13px;
  color: #a0a0b0;
}

.config-info .label { font-weight: 600; color: #e2b96f; }
.config-info code { color: #c0c8d8; }
.config-note { color: #606070; font-style: italic; margin-left: 6px; }
.open-link { color: #6a9fd8; margin-left: 8px; text-decoration: none; }
.open-link:hover { text-decoration: underline; }

select {
  background: #0d1b2a;
  border: 1px solid #0f3460;
  border-radius: 4px;
  color: #e0e0e0;
  padding: 5px 8px;
  font-size: 13px;
  cursor: pointer;
  outline: none;
}

select:focus { border-color: #e2b96f; }

/* ── View Controls ── */
.view-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.view-tabs {
  display: flex;
  gap: 0;
  border: 1px solid #0f3460;
  border-radius: 4px;
  overflow: hidden;
}

.tab-btn {
  border: none;
  border-radius: 0;
  border-right: 1px solid #0f3460;
  background: #0d1b2a;
  color: #a0b0c8;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
}

.tab-btn:last-child { border-right: none; }

.tab-btn:hover { background: #1a2a3a; color: #e0e0e0; }

.tab-btn.active {
  background: #0f3460;
  color: #e2b96f;
  font-weight: 600;
}

.selector-group {
  display: flex;
  gap: 8px;
  align-items: center;
}

.selector-group.hidden { display: none; }

.toggle-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #a0a0b0;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}

/* ── Messages ── */
.error {
  margin: 20px;
  padding: 12px 16px;
  background: #3a1a1a;
  border: 1px solid #7a2020;
  border-radius: 6px;
  color: #f08080;
}

.splash {
  margin: 60px auto;
  max-width: 500px;
  text-align: center;
  color: #606080;
  font-size: 15px;
  line-height: 1.6;
}

.splash code {
  font-family: "SF Mono", "Fira Code", monospace;
  background: #0d1b2a;
  padding: 1px 5px;
  border-radius: 3px;
  color: #a0c0e0;
}

/* ── Main / View Output ── */
main {
  padding: 16px 20px;
}

#view-output {
  max-width: 1200px;
  overflow-x: auto;
}

.empty-state {
  color: #606080;
  font-size: 14px;
  padding: 20px 0;
  text-align: center;
}

/* ── Section headings (ALL mode) ── */
.section-block {
  margin-bottom: 24px;
}

.section-heading {
  font-size: 13px;
  font-weight: 600;
  color: #e2b96f;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 6px 0 4px;
  border-bottom: 1px solid #0f3460;
  margin-bottom: 4px;
}

/* ── Table ── */
table {
  border-collapse: collapse;
  background: #12172a;
}

thead tr {
  background: #0d1b2a;
}

th {
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #a8b8d8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid #0f3460;
}

th.row-header { text-align: left; min-width: 200px; }
th.sit-col    { text-align: center; width: 90px; }
th.exp-header {
  text-align: center;
  max-width: 120px;
  white-space: normal;
  line-height: 1.3;
  font-size: 11px;
}

tbody tr { border-bottom: 1px solid #1a2040; }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: #1a2040; }

td { padding: 6px 10px; }

td.row-label {
  color: #c8d8f0;
  font-size: 13px;
  white-space: nowrap;
}

td.sit-cell {
  text-align: center;
  font-size: 13px;
  color: #2a3050;
}

td.sit-cell::before { content: '○'; }

td.sit-cell.done {
  background: #1a3320;
  color: #5dbb60;
  font-weight: bold;
}

td.sit-cell.done::before { content: '✓'; }

td.sit-cell.na-cell {
  background: #111520;
  color: #2a2a3a;
}

td.sit-cell.na-cell::before { content: '⊘'; }