:root {
  --mission-bg: #050b17;
  --mission-panel: rgba(10, 18, 34, 0.84);
  --mission-line: rgba(150, 196, 255, 0.14);
  --mission-text: #f4f8ff;
  --mission-soft: rgba(244, 248, 255, 0.72);
  --mission-accent: #7ec8ff;
  --mission-accent-strong: #2fb0ff;
  --mission-warn: #ffca70;
  --mission-danger: #ff7e7e;
  --mission-ok: #86ffcc;
  --mission-label: rgba(244, 248, 255, 0.58);
  --mission-display-text: #f7fbff;
  --mission-surface: rgba(6, 12, 25, 0.82);
  --mission-input: rgba(3, 8, 18, 0.74);
  --mission-soft-surface: rgba(255, 255, 255, 0.04);
  --mission-border-soft: rgba(255, 255, 255, 0.06);
  --mission-bg-a: rgba(74, 147, 255, 0.16);
  --mission-bg-b: rgba(115, 209, 255, 0.14);
  --mission-bg-c: rgba(74, 147, 255, 0.08);
  --mission-bg-1: #071224;
  --mission-bg-2: #06111f;
  --mission-bg-3: #040912;
  --mission-clock-panel: rgba(5, 10, 22, 0.92);
}

body[data-theme="light"] {
  --mission-panel: rgba(248, 251, 255, 0.9);
  --mission-line: rgba(91, 137, 193, 0.18);
  --mission-text: #13253d;
  --mission-soft: rgba(19, 37, 61, 0.88);
  --mission-accent: #458dd8;
  --mission-accent-strong: #2f6fe0;
  --mission-label: rgba(19, 37, 61, 0.76);
  --mission-display-text: #163250;
  --mission-surface: rgba(255, 255, 255, 0.72);
  --mission-input: rgba(239, 246, 255, 0.95);
  --mission-soft-surface: rgba(255, 255, 255, 0.58);
  --mission-border-soft: rgba(19, 37, 61, 0.12);
  --mission-bg-a: rgba(108, 175, 255, 0.16);
  --mission-bg-b: rgba(92, 197, 255, 0.14);
  --mission-bg-c: rgba(126, 200, 255, 0.1);
  --mission-bg-1: #eef6ff;
  --mission-bg-2: #deecfb;
  --mission-bg-3: #d2e4f8;
  --mission-clock-panel: rgba(246, 250, 255, 0.92);
}

body[data-theme="black"] {
  --mission-panel: rgba(6, 6, 7, 0.9);
  --mission-line: rgba(255, 255, 255, 0.08);
  --mission-text: #f7f7f8;
  --mission-soft: rgba(247, 247, 248, 0.68);
  --mission-accent: #c7d4ff;
  --mission-accent-strong: #6f8dff;
  --mission-surface: rgba(12, 12, 13, 0.92);
  --mission-input: rgba(9, 9, 10, 0.94);
  --mission-soft-surface: rgba(255, 255, 255, 0.03);
  --mission-border-soft: rgba(255, 255, 255, 0.05);
  --mission-bg-a: rgba(255, 255, 255, 0.05);
  --mission-bg-b: rgba(110, 130, 255, 0.08);
  --mission-bg-c: rgba(255, 255, 255, 0.03);
  --mission-bg-1: #050505;
  --mission-bg-2: #070708;
  --mission-bg-3: #020203;
  --mission-clock-panel: rgba(4, 4, 5, 0.94);
}

body[data-theme="green"] {
  --mission-panel: rgba(8, 26, 18, 0.86);
  --mission-line: rgba(113, 232, 163, 0.16);
  --mission-text: #effff4;
  --mission-soft: rgba(239, 255, 244, 0.74);
  --mission-accent: #78f0b4;
  --mission-accent-strong: #3dcc86;
  --mission-surface: rgba(8, 20, 15, 0.84);
  --mission-input: rgba(5, 17, 12, 0.92);
  --mission-soft-surface: rgba(255, 255, 255, 0.04);
  --mission-border-soft: rgba(255, 255, 255, 0.06);
  --mission-bg-a: rgba(120, 240, 180, 0.14);
  --mission-bg-b: rgba(79, 201, 145, 0.14);
  --mission-bg-c: rgba(74, 147, 255, 0.04);
  --mission-bg-1: #071911;
  --mission-bg-2: #081f14;
  --mission-bg-3: #04110b;
  --mission-clock-panel: rgba(6, 18, 12, 0.92);
}

body[data-theme="red"] {
  --mission-panel: rgba(35, 10, 15, 0.86);
  --mission-line: rgba(255, 152, 152, 0.16);
  --mission-text: #fff3f4;
  --mission-soft: rgba(255, 243, 244, 0.72);
  --mission-accent: #ff9f9f;
  --mission-accent-strong: #ff5e5e;
  --mission-surface: rgba(26, 8, 11, 0.86);
  --mission-input: rgba(20, 6, 9, 0.92);
  --mission-soft-surface: rgba(255, 255, 255, 0.04);
  --mission-border-soft: rgba(255, 255, 255, 0.06);
  --mission-bg-a: rgba(255, 120, 120, 0.14);
  --mission-bg-b: rgba(255, 170, 120, 0.12);
  --mission-bg-c: rgba(255, 120, 120, 0.06);
  --mission-bg-1: #20090d;
  --mission-bg-2: #1b0a0e;
  --mission-bg-3: #0f0406;
  --mission-clock-panel: rgba(22, 7, 10, 0.92);
}

body[data-theme="sky"] {
  --mission-panel: rgba(12, 38, 58, 0.84);
  --mission-line: rgba(159, 230, 255, 0.16);
  --mission-text: #f2fcff;
  --mission-soft: rgba(242, 252, 255, 0.74);
  --mission-accent: #93e4ff;
  --mission-accent-strong: #52c5ff;
  --mission-surface: rgba(8, 28, 42, 0.84);
  --mission-input: rgba(6, 22, 34, 0.92);
  --mission-soft-surface: rgba(255, 255, 255, 0.04);
  --mission-border-soft: rgba(255, 255, 255, 0.06);
  --mission-bg-a: rgba(146, 231, 255, 0.16);
  --mission-bg-b: rgba(96, 212, 255, 0.14);
  --mission-bg-c: rgba(126, 200, 255, 0.08);
  --mission-bg-1: #082033;
  --mission-bg-2: #0b2a41;
  --mission-bg-3: #061621;
  --mission-clock-panel: rgba(7, 24, 37, 0.92);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 20% 20%, var(--mission-bg-a), rgba(74, 147, 255, 0) 24%),
    radial-gradient(circle at 80% 14%, var(--mission-bg-b), rgba(115, 209, 255, 0) 24%),
    radial-gradient(circle at 50% 100%, var(--mission-bg-c), rgba(74, 147, 255, 0) 28%),
    linear-gradient(180deg, var(--mission-bg-1) 0%, var(--mission-bg-2) 48%, var(--mission-bg-3) 100%);
  color: var(--mission-text);
}

body {
  min-height: 100vh;
}

.tracker-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(290px, 350px) minmax(520px, 1fr) minmax(250px, 300px);
  gap: 24px;
  padding: 24px;
}

.tracker-card {
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    var(--mission-panel);
  border: 1px solid var(--mission-line);
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
}

.tracker-controls,
.tracker-help {
  padding: 24px;
}

.tracker-board {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: calc(100vh - 48px);
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--mission-accent);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.78rem;
  font-weight: 800;
}

.tracker-heading h1,
.tracker-help h2 {
  margin: 0;
  font-size: clamp(2rem, 3vw, 3rem);
}

.copy {
  margin: 12px 0 0;
  line-height: 1.55;
  color: var(--mission-soft);
}

.hidden {
  display: none !important;
}

.sync-panel {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding: 16px;
  border-radius: 18px;
  background: var(--mission-soft-surface);
  border: 1px solid var(--mission-border-soft);
}

.sync-panel-copy {
  display: grid;
  gap: 4px;
}

.sync-panel-copy strong {
  font-size: 0.98rem;
}

.sync-panel-copy span,
.sync-panel-hint {
  color: var(--mission-soft);
}

.sync-panel-hint {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
}

.sync-panel-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.sync-panel-actions button {
  border-radius: 16px;
  border: 1px solid rgba(148, 196, 255, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
    var(--mission-surface);
  color: var(--mission-text);
  padding: 12px 15px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.sync-panel-actions button:hover {
  transform: translateY(-1px);
  border-color: rgba(148, 196, 255, 0.3);
}

.field {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.field span,
.summary-tile span,
.status-tile span,
.meter-copy span,
.section-progress span,
.sticker-meta,
.display-subtitle,
.section-subtitle,
.display-badge,
.feedback-label,
.legend-row p {
  color: var(--mission-soft);
}

.field span,
.summary-tile span,
.status-tile span,
.meter-copy span,
.section-progress span {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--mission-label);
  font-weight: 800;
}

.field input,
.field select,
.status-select {
  width: 100%;
  border-radius: 18px;
  border: 1px solid rgba(148, 196, 255, 0.16);
  background: var(--mission-input);
  color: var(--mission-text);
  padding: 14px 16px;
  font-size: 1rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.field input::placeholder {
  color: var(--mission-label);
  opacity: 1;
}

.button-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 20px;
}

.button-grid button,
.home-link {
  border-radius: 16px;
  border: 1px solid rgba(148, 196, 255, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
    var(--mission-surface);
  color: var(--mission-text);
  padding: 13px 15px;
  font-size: 0.96rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
  text-align: center;
}

.button-grid button:hover,
.home-link:hover,
.status-select:hover {
  transform: translateY(-1px);
  border-color: rgba(148, 196, 255, 0.3);
}

.primary-action {
  background:
    linear-gradient(180deg, rgba(126, 200, 255, 0.24), rgba(47, 176, 255, 0.12)),
    rgba(6, 12, 25, 0.88) !important;
  border-color: rgba(126, 200, 255, 0.32) !important;
}

.danger-action {
  color: #ffd0d0 !important;
  border-color: rgba(255, 126, 126, 0.24) !important;
}

.aux-row {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
}

.save-row {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--mission-soft-surface);
  border: 1px solid var(--mission-border-soft);
}

.save-status {
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--mission-text);
}

.save-status-muted {
  color: var(--mission-soft);
}

.home-link {
  text-decoration: none;
  min-width: 150px;
}

.feedback-label {
  font-size: 0.92rem;
  line-height: 1.5;
}

.board-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.display-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 100px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: rgba(126, 200, 255, 0.14);
  border: 1px solid rgba(126, 200, 255, 0.26);
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: 0.08em;
  color: var(--mission-display-text);
}

.display-subtitle {
  margin: 14px 0 0;
  font-size: 0.98rem;
  line-height: 1.45;
}

.board-progress {
  text-align: right;
}

.board-progress strong {
  display: block;
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 1;
  color: var(--mission-display-text);
}

.board-progress span {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--mission-label);
  font-weight: 800;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.status-grid {
  display: grid;
  gap: 12px;
}

.summary-tile,
.status-tile,
.meter-card,
.section-card,
.legend-row {
  border-radius: 18px;
  background: var(--mission-soft-surface);
  border: 1px solid var(--mission-border-soft);
}

.summary-tile,
.status-tile {
  padding: 16px;
}

.summary-tile strong,
.status-tile strong {
  display: block;
  margin-top: 8px;
  font-size: 1.18rem;
}

.meter-card {
  padding: 18px;
}

.meter-copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.meter-copy strong {
  font-size: 1rem;
}

.meter-copy-owned {
  margin-top: 14px;
}

.progress-track {
  position: relative;
  height: 14px;
  margin-top: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.progress-bar {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(126, 200, 255, 0.48), rgba(47, 176, 255, 0.9));
  transition: width 160ms ease;
}

.progress-bar-owned {
  background: linear-gradient(90deg, rgba(134, 255, 204, 0.42), rgba(61, 204, 134, 0.9));
}

.section-list {
  min-height: 0;
  max-height: calc(100vh - 320px);
  overflow: auto;
  padding-right: 8px;
}

.section-list::-webkit-scrollbar {
  width: 10px;
}

.section-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(126, 200, 255, 0.2);
}

.section-card + .section-card {
  margin-top: 14px;
}

.section-card {
  padding: 18px;
}

.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.section-title {
  margin: 0;
  font-size: 1.25rem;
}

.section-subtitle {
  display: block;
  margin-top: 6px;
  font-size: 0.9rem;
}

.section-progress {
  text-align: right;
}

.section-progress strong {
  display: block;
  font-size: 1.2rem;
}

.section-rows {
  display: grid;
  gap: 10px;
}

.sticker-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 190px;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.sticker-row.is-missing {
  border-color: rgba(255, 126, 126, 0.12);
}

.sticker-row.is-obtained {
  border-color: rgba(255, 202, 112, 0.16);
}

.sticker-row.is-stuck {
  border-color: rgba(134, 255, 204, 0.16);
}

.sticker-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 10px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-weight: 900;
  font-size: 1rem;
}

.sticker-main strong {
  display: block;
  font-size: 1rem;
  line-height: 1.25;
}

.sticker-meta {
  margin-top: 6px;
  font-size: 0.88rem;
}

.sticker-actions {
  display: grid;
  gap: 8px;
  justify-items: end;
}

.state-pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.status-select {
  min-width: 180px;
  padding: 12px 14px;
}

.duplicate-control {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 180px;
}

.duplicate-control span {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mission-label);
  font-weight: 800;
}

.duplicate-input {
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(148, 196, 255, 0.16);
  background: var(--mission-input);
  color: var(--mission-text);
  padding: 11px 12px;
  font-size: 0.98rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.duplicate-input:hover,
.duplicate-input:focus {
  border-color: rgba(148, 196, 255, 0.3);
  outline: none;
}

.state-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid transparent;
}

.state-missing {
  color: #ffd8d8;
  background: rgba(255, 126, 126, 0.14);
  border-color: rgba(255, 126, 126, 0.18);
}

.state-obtained {
  color: #ffe5bc;
  background: rgba(255, 202, 112, 0.14);
  border-color: rgba(255, 202, 112, 0.18);
}

.state-stuck {
  color: #d7ffee;
  background: rgba(134, 255, 204, 0.14);
  border-color: rgba(134, 255, 204, 0.18);
}

body[data-theme="light"] .state-missing {
  color: #a73333;
  background: rgba(255, 126, 126, 0.16);
  border-color: rgba(167, 51, 51, 0.16);
}

body[data-theme="light"] .state-obtained {
  color: #9a6314;
  background: rgba(255, 202, 112, 0.24);
  border-color: rgba(154, 99, 20, 0.14);
}

body[data-theme="light"] .state-stuck {
  color: #0f7c54;
  background: rgba(134, 255, 204, 0.24);
  border-color: rgba(15, 124, 84, 0.14);
}

.tracker-help ul {
  margin: 18px 0 0;
  padding-left: 20px;
  color: var(--mission-soft);
  line-height: 1.6;
}

.legend {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.legend-row {
  padding: 14px;
}

.legend-row p {
  margin: 10px 0 0;
  font-size: 0.92rem;
  line-height: 1.45;
}

.status-grid-side {
  margin-top: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.empty-state {
  padding: 24px;
  border-radius: 18px;
  text-align: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.08);
  color: var(--mission-soft);
}

@media (max-width: 1250px) {
  .tracker-shell {
    grid-template-columns: minmax(290px, 340px) minmax(0, 1fr);
  }

  .tracker-help {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .tracker-shell {
    grid-template-columns: 1fr;
  }

  .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .section-list {
    max-height: none;
  }
}

@media (max-width: 700px) {
  .button-grid,
  .summary-grid,
  .status-grid-side {
    grid-template-columns: 1fr;
  }

  .aux-row,
  .save-row,
  .board-top,
  .section-head,
  .meter-copy {
    flex-direction: column;
    align-items: stretch;
  }

  .board-progress,
  .section-progress {
    text-align: left;
  }

  .sticker-row {
    grid-template-columns: 1fr;
  }

  .sticker-actions {
    justify-items: stretch;
  }

  .status-select {
    min-width: 0;
  }
}