:root {
  color-scheme: dark;
  --bg: #101318;
  --panel: #171d25;
  --panel-2: #1f2732;
  --text: #edf2f7;
  --muted: #aab7c4;
  --border: #334150;
  --accent: #4ea0ff;
  --accent-2: #65d48b;
  --danger: #ff7c7c;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", Arial, sans-serif;
  letter-spacing: 0;
}

a {
  color: var(--accent);
  text-decoration: none;
}

button,
.button,
input,
select,
textarea {
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
}

button,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  background: var(--accent);
  color: #07111e;
  font-weight: 700;
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

.secondary {
  background: var(--panel-2);
  color: var(--text);
}

.app-shell {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0 42px;
}

.toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.toolbar h1,
.login-panel h1 {
  margin: 0 0 8px;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.05;
}

.toolbar p,
.login-panel p,
.muted {
  color: var(--muted);
  margin: 0;
}

.actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}

.config-card,
.panel,
.login-panel,
.notice,
.error {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.config-card {
  display: flex;
  min-height: 118px;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
  color: var(--text);
}

.config-card span {
  font-size: 18px;
  font-weight: 700;
}

.config-card small {
  color: var(--muted);
  line-height: 1.35;
}

.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.login-panel {
  width: min(430px, 100%);
  padding: 24px;
}

label {
  display: grid;
  gap: 7px;
  margin-top: 14px;
  color: var(--muted);
}

input,
select,
textarea {
  width: 100%;
  background: #0c1016;
  color: var(--text);
  padding: 10px 11px;
}

.login-panel button {
  width: 100%;
  margin-top: 18px;
}

.editor textarea {
  min-height: 62vh;
  resize: vertical;
  font-family: Consolas, "Cascadia Mono", monospace;
  font-size: 14px;
  line-height: 1.45;
}

.editor .actions {
  margin-top: 12px;
}

.rich-text-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  margin-bottom: 10px;
}

.rich-text-toolbar button,
.rich-text-toolbar select {
  min-height: 36px;
}

.rich-color-control {
  display: flex;
  grid-template-columns: auto 38px;
  gap: 7px;
  align-items: center;
  margin: 0;
  padding: 0 8px;
  min-height: 36px;
  border: 1px solid var(--border);
  border-radius: 6px;
}

.rich-color-control input {
  width: 32px;
  height: 28px;
  padding: 2px;
}

.rich-text-canvas {
  min-height: 52vh;
  padding: 18px;
  overflow-wrap: anywhere;
  background: var(--input);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  line-height: 1.55;
}

.rich-text-canvas:focus {
  border-color: var(--accent);
  outline: 1px solid var(--accent);
}

.rich-text-value {
  display: none;
}

.shared-text-reader {
  min-height: 240px;
  padding: 24px;
}

.shared-text-preview {
  margin-top: 22px;
}

.shared-text-preview .section-title-row {
  margin-bottom: 10px;
}

.shared-text-reader > div {
  color: var(--text);
  font-size: 1rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.shared-text-reader h1,
.shared-text-reader h2,
.shared-text-reader h3,
.rich-text-canvas h1,
.rich-text-canvas h2,
.rich-text-canvas h3 {
  color: inherit;
}

.shared-text-reader a,
.rich-text-canvas a {
  color: var(--accent);
  text-decoration: underline;
}

.shared-text-reader.shared-text-empty > div,
.shared-text-meta {
  color: var(--muted);
}

.notice,
.error {
  padding: 12px 14px;
  margin: 0 0 14px;
}

.notice {
  border-color: rgba(101, 212, 139, 0.45);
  color: var(--accent-2);
}

.error {
  border-color: rgba(255, 124, 124, 0.55);
  color: var(--danger);
}

.back-link {
  display: inline-block;
  margin-bottom: 12px;
}

.split {
  display: grid;
  grid-template-columns: minmax(260px, 380px) 1fr;
  gap: 14px;
}

.panel {
  padding: 16px;
}

.panel h2 {
  margin: 0 0 12px;
  font-size: 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

code {
  color: var(--text);
}

@media (max-width: 760px) {
  .toolbar,
  .split {
    grid-template-columns: 1fr;
    display: grid;
  }

  .toolbar {
    align-items: stretch;
  }

  .actions,
  .actions form,
  .actions button,
  .actions .button {
    width: 100%;
  }
}

/* Desktop application mirror */
body {
  background: var(--bg);
  color: var(--text);
  font-size: 13.333px;
}

button,
.button {
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid #31445c;
  border-radius: 8px;
  background: #182536;
  color: var(--text);
  font-weight: 600;
}

button:hover,
.button:hover {
  background: #22344a;
}

button:not(.secondary):not(.danger-button):not(.restart-bot-button) {
  border-color: var(--green-border);
  background: var(--green-bg);
  color: var(--green-text);
}

.secondary {
  background: #182536;
  color: var(--text);
}

.danger-button {
  border-color: var(--red-border);
  background: var(--red-bg);
  color: var(--red-text);
}

input,
select,
textarea {
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--input);
  color: var(--text);
  padding: 6px;
}

.desktop-window {
  width: min(1600px, calc(100% - 20px));
  min-height: calc(100vh - 20px);
  margin: 10px auto;
  padding: 0;
}

.desktop-app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 82px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
}

.desktop-app-header h1 {
  margin: 0;
  color: var(--title-text);
  font-size: 27px;
  font-weight: 800;
  line-height: 1.15;
}

.desktop-app-header p {
  margin: 4px 0 0;
  color: var(--muted);
}

.desktop-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.user-pill,
.badge-good,
.badge-warn,
.badge-bad {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 9px;
  font-weight: 700;
}

.user-pill {
  border: 1px solid var(--border);
  color: var(--muted);
}

.badge-good {
  background: var(--green-bg);
  color: var(--green-text);
}

.badge-warn {
  background: #3a2c0a;
  color: var(--yellow-text);
}

.badge-bad {
  background: var(--red-bg);
  color: var(--red-text);
}

.restart-bot-form {
  margin: 0;
}

.restart-bot-button {
  border-color: #c96a1b;
  background: #4a2507;
  color: #ffb86b;
}

.restart-bot-button:hover {
  background: #66330c;
}

.restart-status {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 9px;
  font-weight: 700;
}

.restart-status-success {
  background: var(--green-bg);
  color: var(--green-text);
}

.restart-status-warn {
  background: #3a2508;
  color: #ffb86b;
}

.restart-status-bad {
  background: var(--red-bg);
  color: var(--red-text);
}

.desktop-tabs,
.inner-tabs {
  display: flex;
  align-items: end;
  gap: 1px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.desktop-tabs {
  padding: 7px 7px 0;
  border-bottom: 1px solid var(--border);
}

.desktop-tab,
.inner-tab {
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
  background: var(--panel);
  color: var(--muted);
  font-weight: 600;
}

.desktop-tab.active,
.inner-tab.active {
  border-color: var(--border);
  background: #1b2a3c;
  color: #fff;
}

.inner-tabs {
  margin: 0 0 12px;
  border-bottom: 1px solid var(--border);
}

.desktop-tab-body {
  min-height: calc(100vh - 170px);
  padding: 12px 7px 28px;
}

.desktop-page-toolbar {
  align-items: center;
  margin: 0 0 12px;
  padding: 0 2px;
}

.desktop-page-toolbar h1,
.toolbar h1 {
  margin: 0 0 4px;
  color: var(--blue-text);
  font-size: 18px;
  line-height: 1.2;
}

.panel,
.config-card,
.notice,
.error {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
}

.panel h2 {
  color: var(--blue-text);
  font-size: 16px;
  font-weight: 800;
}

.desktop-section {
  margin-bottom: 10px;
}

.section-title-row,
.desktop-action-row,
.desktop-toolbar,
.summary-toolbar,
.guardian-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.section-title-row h2,
.guardian-heading h2 {
  margin: 0;
}

.desktop-action-row {
  justify-content: flex-start;
  margin: 12px 0;
}

.desktop-toolbar {
  min-height: 48px;
  margin-bottom: 10px;
  padding: 7px;
}

.desktop-toolbar form,
.summary-toolbar form,
.button-management form {
  display: flex;
  align-items: end;
  gap: 8px;
  flex-wrap: wrap;
}

.desktop-toolbar .form-row,
.summary-toolbar .form-row {
  min-width: 210px;
  margin: 0;
}

.desktop-form-stack,
.field-row-stack {
  display: grid;
  gap: 10px;
}

.path-grid {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.connection-profile-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) auto;
  align-items: end;
  gap: 10px;
  margin: 10px 0;
}

.connection-profile-row label {
  margin: 0;
}

.connection-fields,
.map-config-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 14px;
}

.path-row {
  display: grid;
  grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.form-row {
  display: grid;
  grid-template-columns: minmax(125px, 0.8fr) minmax(0, 1.4fr);
  align-items: center;
  gap: 8px;
  margin: 5px 0;
}

.form-row > span,
.path-row > span {
  color: var(--muted);
}

.form-row textarea {
  min-height: 58px;
}

.check-row {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 7px;
  margin: 7px 0;
  color: var(--text);
}

.three-pane-editor {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}

.editor-pane {
  min-width: 0;
}

.button-management {
  margin: 0 0 10px;
}

.desktop-split {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(280px, 1fr);
  gap: 10px;
  align-items: start;
}

.config-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}

.desktop-split > *,
.three-pane-editor > *,
.config-split > * {
  min-width: 0;
}

.split-table,
.split-detail {
  min-height: 480px;
}

.split-detail {
  position: sticky;
  top: 8px;
  max-height: 78vh;
  overflow: auto;
}

.split-detail pre,
.source-console,
.debug-console,
.discord-preview {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text);
  font-family: Consolas, "Cascadia Mono", monospace;
  font-size: 12px;
  line-height: 1.45;
}

.source-console,
.debug-console,
.discord-preview {
  max-height: 68vh;
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--input);
}

.interactive-table tbody tr {
  cursor: pointer;
}

.interactive-table tbody tr:hover,
.interactive-table tbody tr.selected {
  background: var(--selected);
}

.player-results {
  display: grid;
  gap: 14px;
}

.player-profile-card {
  padding: 0;
  overflow: hidden;
}

.player-profile-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, #142337, #101923);
}

.player-profile-heading h2,
.player-profile-section h3,
.player-eyebrow {
  margin: 0;
}

.player-eyebrow {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.player-badges {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.player-badge,
.player-count {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #182638;
  color: var(--blue-text);
  font-size: 12px;
  font-weight: 800;
}

.player-badge.linked {
  border-color: #24663e;
  background: #102b1c;
  color: #69e69a;
}

.player-badge.unlinked {
  border-color: #6d3b38;
  background: #2d1717;
  color: #ff9a93;
}

.player-profile-section {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.player-profile-section h3 {
  margin-bottom: 11px;
  color: var(--blue-text);
  font-size: 14px;
}

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

.player-profile-columns > :first-child {
  border-right: 1px solid var(--border);
}

.player-info-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.player-info-grid > div {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid #243448;
  border-radius: 8px;
  background: #0d1620;
}

.player-info-grid dt {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.player-info-grid dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-weight: 700;
}

.player-profile-footer {
  border-bottom: 0;
}

.guardian-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.guardian-stat {
  display: grid;
  gap: 6px;
  min-height: 110px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #0f1722;
}

.guardian-stat span {
  color: var(--blue-text);
  font-size: 16px;
  font-weight: 800;
}

.guardian-stat strong {
  color: var(--green-text);
  font-size: 27px;
  font-weight: 900;
}

.guardian-stat small,
.source-line {
  color: var(--muted);
}

.source-line {
  padding: 4px 0;
  overflow-wrap: anywhere;
}

.theme-grid {
  display: grid;
  gap: 7px;
}

.theme-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(180px, 1fr) 56px;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 8px;
  border: 1px solid #1d2a3a;
  border-radius: 7px;
  background: #0d141d;
}

.theme-row input[type="color"] {
  width: 56px;
  min-height: 36px;
  padding: 2px;
}

.compact-button {
  min-height: 32px;
  padding: 4px 9px;
}

.map-layout {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
}

.map-stage {
  border-radius: 9px;
  background: var(--input);
}

.user-access-list,
.user-access-card {
  display: grid;
  gap: 14px;
}

.user-access-list {
  margin-top: 14px;
}

.user-access-basics {
  display: grid;
  grid-template-columns: minmax(150px, 0.6fr) minmax(260px, 1.4fr) minmax(140px, 0.5fr);
  gap: 12px;
  align-items: end;
}

.user-account-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.user-account-meta > div {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--input);
}

.user-account-meta span {
  color: var(--muted);
  font-size: 12px;
}

.user-account-meta strong {
  overflow-wrap: anywhere;
  font-size: 13px;
}

.permission-group {
  min-width: 0;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
}

.permission-group legend {
  padding: 0 6px;
  color: var(--blue-text);
  font-weight: 700;
}

.permission-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.permission-option {
  display: flex;
  min-width: 0;
  gap: 8px;
  align-items: flex-start;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--input);
}

.permission-option input {
  flex: 0 0 auto;
  margin-top: 3px;
}

.permission-option span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.permission-option strong,
.permission-option small {
  overflow-wrap: anywhere;
}

.permission-option small {
  color: var(--muted);
}

.compact-notice {
  margin: 0;
}

@media (max-width: 1080px) {
  .three-pane-editor,
  .guardian-stats,
  .permission-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .desktop-split,
  .map-layout,
  .config-split {
    grid-template-columns: 1fr;
  }

  .split-detail {
    position: static;
    min-height: 220px;
    max-height: none;
  }

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

@media (max-width: 760px) {
  .desktop-window {
    width: min(100% - 10px, 1500px);
    margin: 5px auto;
  }

  .desktop-app-header,
  .desktop-page-toolbar,
  .section-title-row,
  .guardian-heading {
    align-items: stretch;
    display: grid;
    grid-template-columns: 1fr;
  }

  .desktop-header-actions {
    justify-content: flex-start;
  }

  .three-pane-editor,
  .guardian-stats,
  .form-grid,
  .connection-profile-row,
  .connection-fields,
  .map-config-grid,
  .permission-grid,
  .user-access-basics,
  .user-account-meta,
  .player-profile-columns,
  .player-info-grid {
    grid-template-columns: 1fr;
  }

  .player-profile-columns > :first-child {
    border-right: 0;
  }

  .path-row,
  .form-row,
  .theme-row {
    grid-template-columns: 1fr;
  }

  .desktop-page-toolbar .actions,
  .desktop-page-toolbar .actions form,
  .desktop-page-toolbar .actions button,
  .desktop-page-toolbar .actions .button {
    width: auto;
  }
}

/* Integrated web control panel */
.app-shell {
  padding-top: 0;
}

.top-nav {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 26px;
}

.top-nav div,
.layer-toggles {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.top-nav a {
  color: var(--muted);
  font-weight: 600;
}

.top-nav .brand {
  color: var(--text);
  font-size: 18px;
  font-weight: 800;
}

.danger-button {
  background: #b94949;
  color: white;
}

input[type="checkbox"] {
  width: auto;
}

.panel {
  margin-bottom: 14px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 14px;
}

.compact-form button {
  margin-top: 16px;
}

.picker,
.map-toolbar {
  display: flex;
  align-items: end;
  gap: 10px;
  flex-wrap: wrap;
}

.picker label {
  min-width: min(360px, 100%);
  margin: 0;
}

.empty-state {
  min-height: 150px;
  display: grid;
  place-items: center;
  color: var(--muted);
}

.stats-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  border: 1px solid var(--border);
  background: var(--panel);
  margin-bottom: 14px;
}

.stat {
  min-height: 88px;
  padding: 14px;
  border-right: 1px solid var(--border);
  display: grid;
  align-content: center;
  gap: 6px;
}

.stat:last-child {
  border-right: 0;
}

.stat span {
  color: var(--muted);
  font-size: 13px;
}

.stat strong {
  font-size: 22px;
}

.section-actions {
  margin: 0 0 14px;
}

.data-section h2 {
  margin: 0 0 14px;
  font-size: 20px;
}

.data-section .table-wrap {
  max-height: none;
}

.data-section .data-table td {
  max-width: none;
  white-space: pre-wrap;
}

.nowrap-table .table-wrap {
  overflow: auto;
  scrollbar-width: thin;
}

.nowrap-table .data-table {
  width: max-content;
  min-width: 100%;
}

.nowrap-table .data-table th,
.nowrap-table .data-table td {
  max-width: none;
  white-space: nowrap;
  overflow-wrap: normal;
}

.data-section.scroll-table .table-wrap {
  max-height: 360px;
  overflow: auto;
  scrollbar-width: thin;
}

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

.dmv-section .section-title-row {
  margin-bottom: 14px;
}

.dmv-section .section-title-row h2,
.dmv-section > h2 {
  display: flex;
  align-items: center;
  gap: 9px;
}

.dmv-table .dmv-type {
  color: var(--title-text);
  font-weight: 700;
}

.dmv-table code {
  white-space: nowrap;
}

.dmv-table .dmv-coords code,
.dmv-table .dmv-time {
  color: var(--muted);
}

.dmv-empty {
  min-height: 90px;
  display: grid;
  place-items: center;
  color: var(--muted);
  border: 1px dashed var(--border);
}

.table-wrap {
  overflow: auto;
  max-height: 620px;
}

th,
td {
  vertical-align: top;
  max-width: 360px;
  overflow-wrap: anywhere;
}

th {
  position: sticky;
  top: 0;
  background: var(--panel-2);
  z-index: 2;
}

details pre,
.map-detail pre {
  max-width: 560px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.layer-toggles label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.map-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 330px);
  gap: 14px;
  align-items: start;
}

.map-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #080b0f;
}

.map-stage > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#marker-layer,
#zone-layer,
#history-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#history-layer {
  pointer-events: none;
}

#history-layer circle {
  pointer-events: none;
}

.map-marker {
  position: absolute;
  width: 25px;
  height: 25px;
  min-height: 0;
  padding: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid white;
  color: white;
  background: #2784d7;
  z-index: 5;
}

.map-marker img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  max-width: none;
}

.marker-vehicle {
  background: #d89524;
}

.marker-flag {
  background: #d84b4b;
}

.map-zone {
  position: absolute;
  min-height: 0;
  padding: 0;
  background: rgba(225, 60, 60, 0.16);
  border: 1px solid rgba(255, 82, 82, 0.88);
  border-radius: 0;
  z-index: 3;
}

.zone-circle {
  border-radius: 50%;
}

.zone-box {
  border-radius: 0 !important;
}

.history-line,
.history-line-casing {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.history-line-casing {
  stroke: rgba(5, 8, 12, 0.82);
  stroke-width: 0.82;
}

.history-line {
  stroke-width: 0.42;
}

.history-start,
.history-end,
.history-point {
  stroke: rgba(255, 255, 255, 0.96);
  stroke-width: 0.2;
  vector-effect: non-scaling-stroke;
}

.history-start {
  fill: #32d06e;
}

.history-end {
  fill: #ef4d4d;
}

.history-point {
  fill: rgba(255, 255, 255, 0.72);
}

.map-detail {
  position: sticky;
  top: 12px;
  max-height: 80vh;
  overflow: auto;
}

@media (max-width: 760px) {
  .form-grid,
  .map-layout {
    display: grid;
    grid-template-columns: 1fr;
  }

  .top-nav {
    align-items: flex-start;
    padding: 14px 0;
  }

  .top-nav,
  .top-nav div {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .top-nav .brand {
    grid-column: 1 / -1;
  }

  .stat {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .map-detail {
    position: static;
    max-height: none;
  }
}

/* Desktop-map parity controls */
.color-combo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  gap: 8px;
  align-items: center;
}

.color-combo input[type="color"] {
  width: 48px;
  min-height: 36px;
  padding: 2px;
}

.zone-check-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  margin: 10px 0 4px;
}

.zone-check-option {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--input);
  overflow-wrap: anywhere;
}

#tool-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
}

.map-tool-circle {
  fill: rgba(192, 132, 252, 0.16);
  stroke: #c084fc;
  stroke-width: 0.35;
  vector-effect: non-scaling-stroke;
}

.map-tool-circle.final {
  fill: rgba(192, 132, 252, 0.22);
}

.map-tool-line {
  stroke: #38bdf8;
  stroke-width: 0.42;
  vector-effect: non-scaling-stroke;
}

.map-tool-line.final {
  stroke-width: 0.55;
}

.map-distance-label,
.map-zone-label {
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.78);
  stroke-width: 0.45;
  font-weight: 700;
}

.map-distance-label {
  font-size: 2.4px;
  dominant-baseline: middle;
}

.map-zone-label {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 4;
  max-width: 160px;
  padding: 2px 5px;
  border-radius: 4px;
  color: #ffd4d4;
  background: rgba(0, 0, 0, 0.58);
  font-size: 12px;
  font-weight: 700;
  pointer-events: none;
  text-align: center;
}

.history-arrow {
  stroke: none;
  pointer-events: none;
  filter: drop-shadow(0 0 0.18px rgba(0, 0, 0, 0.95));
}

#history-layer .history-hit-point {
  fill: transparent;
  stroke: none;
  pointer-events: auto;
  cursor: help;
  outline: none;
}

#history-layer .history-hit-point:focus {
  fill: rgba(255, 255, 255, 0.12);
}

@media (max-width: 760px) {
  .zone-check-list,
  .color-combo {
    grid-template-columns: 1fr;
  }
}

/* Map viewer interaction parity */
.map-control-panel {
  padding: 16px;
}

.map-panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.map-panel-heading h2,
.map-panel-heading p {
  margin: 0;
}

.map-panel-heading p {
  margin-top: 4px;
}

.map-panel-heading-static {
  margin-bottom: 14px;
}

.map-collapse-all {
  flex: 0 0 auto;
  min-width: 132px;
}

.map-control-groups {
  display: grid;
  gap: 8px;
}

.map-control-group {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.018);
}

.map-control-group > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 10px 13px;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.map-control-group > summary::-webkit-details-marker {
  display: none;
}

.map-control-group > summary::before {
  content: ">";
  width: 16px;
  color: var(--muted);
  font-weight: 800;
  transform: rotate(0deg);
  transition: transform 140ms ease;
}

.map-control-group[open] > summary::before {
  transform: rotate(90deg);
}

.map-control-group > summary:hover {
  background: rgba(255, 255, 255, 0.035);
}

.map-control-group > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.map-control-group > summary span {
  font-weight: 750;
}

.map-control-group > summary small {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
}

.map-group-content {
  padding: 13px;
  border-top: 1px solid var(--border);
}

.map-group-content .form-row:first-child,
.map-group-content .desktop-action-row:first-child {
  margin-top: 0;
}

.map-readouts {
  display: grid;
  gap: 3px;
  margin-top: 10px;
}

.map-readouts p,
.map-action-content > .muted {
  margin: 0;
}

.map-compact-actions {
  margin-top: 2px;
}

.map-action-content {
  display: grid;
  gap: 10px;
}

.map-surface {
  position: absolute;
  transform-origin: 0 0;
}

.map-surface > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

.map-tile-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(var(--tile-columns, 15), minmax(0, 1fr));
  grid-template-rows: repeat(var(--tile-rows, 15), minmax(0, 1fr));
  opacity: 0;
  pointer-events: none;
}

.map-tile-layer.is-active {
  opacity: 1;
}

.map-tile-layer img {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: fill;
  border: 0;
}

#marker-layer,
#zone-layer,
#history-layer,
#tool-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#history-layer,
#tool-layer {
  pointer-events: none;
  overflow: visible;
}

#history-layer {
  z-index: 2;
}

#zone-layer {
  z-index: 3;
  pointer-events: none;
}

#tool-layer {
  z-index: 4;
}

.flag-owner-connection {
  position: absolute;
  z-index: 1;
  height: 3px;
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, #67e8f9 0 9px, transparent 9px 16px);
  transform-origin: 0 50%;
  pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(34, 211, 238, 0.95)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.9));
}

#marker-layer {
  z-index: 5;
  pointer-events: none;
}

.map-zone,
.map-marker,
#history-layer .history-hit-point {
  pointer-events: auto;
}

.map-marker {
  position: absolute;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #ffffff;
  transform: translate(-50%, -50%);
  overflow: visible;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
}

.map-marker img {
  width: 36px;
  height: 36px;
  max-width: none;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.8));
}

.marker-player {
  width: 25px;
  height: 25px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: #2784d7;
}

.marker-vehicle,
.marker-flag,
.marker-buried_chest {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.color-swatch-only {
  display: inline-grid;
  grid-template-columns: 38px;
  justify-content: start;
  width: auto;
}

.color-swatch-only input[type="color"] {
  width: 38px;
  height: 34px;
  min-height: 34px;
  padding: 2px;
  cursor: pointer;
}

.zone-check-list,
.zone-check-option {
  display: none;
}

.map-tool-circle {
  fill: rgba(192, 132, 252, 0.18);
  stroke: #c084fc;
  stroke-width: 0.6;
  vector-effect: non-scaling-stroke;
}

.map-tool-circle.final {
  fill: rgba(192, 132, 252, 0.24);
}

.map-tool-line {
  stroke: #38bdf8;
  stroke-width: 0.65;
  vector-effect: non-scaling-stroke;
}

.map-tool-line.final {
  stroke-width: 0.78;
}

.map-distance-label {
  font-size: 2.8px;
  dominant-baseline: middle;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.82);
  stroke-width: 0.5;
  font-weight: 700;
}

.map-zone {
  border-width: 1px;
  border-style: solid;
}

.map-zone-label {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.64);
}

.map-detail-content {
  display: grid;
  gap: 10px;
  white-space: normal;
}

.map-detail-title {
  margin: 0;
  font-size: 1rem;
}

.map-detail-section {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.map-detail-note {
  margin: 0;
  color: var(--muted);
}

.map-detail-grid {
  display: grid;
  grid-template-columns: minmax(96px, 0.42fr) minmax(0, 1fr);
  gap: 6px 10px;
  margin: 0;
  font-size: 0.9rem;
}

.map-detail-grid dt {
  min-width: 0;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.map-detail-grid dd {
  min-width: 0;
  margin: 0;
  color: var(--text);
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .map-panel-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .map-collapse-all {
    width: 100%;
  }

  .map-control-group > summary {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .map-control-group > summary small {
    width: calc(100% - 26px);
    margin-left: 26px;
  }

  .color-swatch-only {
    grid-template-columns: 38px;
  }

  .map-detail-grid {
    grid-template-columns: 1fr;
  }
}

/* Map viewer follow-up fixes */
.map-stage {
  touch-action: none;
}

.map-surface {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}

.map-stage.can-pan .map-surface {
  cursor: grab;
}

.map-stage.is-panning .map-surface {
  cursor: grabbing;
}

.map-tool-circle {
  stroke-width: 2px;
}

.map-tool-line {
  stroke-width: 3px;
}

.map-tool-line.final {
  stroke-width: 4px;
}

.map-distance-label {
  font-size: 3px;
  stroke-width: 0.65px;
}

.map-marker,
.marker-vehicle,
.marker-flag,
.marker-buried_chest {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.map-marker::before,
.map-marker::after {
  display: none !important;
  content: none !important;
}

.marker-vehicle img,
.marker-flag img,
.marker-buried_chest img {
  display: block;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.marker-player {
  width: 30px;
  height: 30px;
}

.marker-player img {
  display: block;
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.map-detail-content {
  gap: 12px;
  line-height: 1.35;
}

.map-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 6px;
}

.map-detail-row {
  display: grid;
  grid-template-columns: minmax(110px, 38%) minmax(0, 1fr);
  gap: 10px;
  padding: 7px 9px;
  border-bottom: 1px solid var(--border);
  align-items: start;
}

.map-detail-row:last-child {
  border-bottom: 0;
}

.map-detail-key {
  min-width: 0;
  color: var(--muted);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.map-detail-value {
  min-width: 0;
  color: var(--text);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.flag-legend {
  display: grid;
  gap: 7px;
  margin-top: 2px;
}

.flag-legend-title {
  margin-top: 0;
}

.flag-legend-list {
  display: grid;
  gap: 5px;
}

.flag-legend-item {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.025);
}

.flag-legend-item.is-active {
  border-color: rgba(255, 255, 255, 0.38);
  background: rgba(255, 255, 255, 0.07);
}

.flag-legend-swatch {
  width: 12px;
  height: 12px;
  margin-top: 3px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.flag-legend-swatch.flag_blue {
  background: #2784d7;
}

.flag-legend-swatch.flag_yellow {
  background: #e6b729;
}

.flag-legend-swatch.flag_red {
  background: #d84b4b;
}

.flag-legend-copy,
.flag-legend-label,
.flag-legend-meaning {
  display: block;
  min-width: 0;
}

.flag-legend-label {
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 700;
}

.flag-legend-meaning {
  margin-top: 1px;
  color: var(--muted);
  font-size: 0.76rem;
}

.flag-legend-current {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--green-bg);
  color: var(--green-text);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .map-detail-row {
    grid-template-columns: 1fr;
    gap: 3px;
  }
}

/* Map viewer zoom sharpness and scaled overlay fixes */
.map-surface > img {
  image-rendering: auto;
}

.map-marker {
  transform: translate(-50%, -50%) !important;
  transform-origin: center center;
}

.map-zone-label {
  display: none !important;
}

/* Force live zone overlay colors from API payload */
.map-zone {
  border-color: var(--zone-color, #ff5252) !important;
  background-color: var(--zone-fill, rgba(255, 82, 82, 0.22)) !important;
  box-shadow: none !important;
}

/* Map-first workspace */
.map-command-bar {
  padding: 14px 16px;
}

.map-command-heading,
.map-command-actions,
.map-tool-strip,
.map-sidebar-title {
  display: flex;
  align-items: center;
}

.map-command-heading,
.map-sidebar-title {
  justify-content: space-between;
  gap: 16px;
}

.map-command-heading h2,
.map-sidebar-title h2 {
  margin: 2px 0 0;
}

.map-command-heading h2 {
  font-size: 1.28rem;
}

.map-sidebar-title h2 {
  font-size: 1rem;
}

.map-command-eyebrow {
  display: block;
  color: var(--muted);
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.map-command-actions {
  justify-content: flex-end;
  gap: 7px;
  flex-wrap: wrap;
}

.map-command-actions button {
  min-height: 34px;
  padding: 6px 11px;
}

.map-tool-strip {
  gap: 8px 14px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--border);
}

.map-tool-strip .check-row {
  margin: 0;
  white-space: nowrap;
}

.map-tool-value {
  min-width: 0;
  color: var(--muted);
  font-size: 0.76rem;
}

.map-view-value {
  margin-left: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-workspace {
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 10px;
  align-items: start;
}

.map-workspace.sidebar-collapsed {
  grid-template-columns: minmax(0, 1fr) 0;
}

.map-workspace.sidebar-collapsed .map-sidebar {
  display: none;
}

.map-sidebar {
  position: sticky;
  top: 10px;
  display: grid;
  gap: 10px;
  min-width: 0;
  max-height: calc(100vh - 20px);
  overflow-y: auto;
  scrollbar-width: thin;
}

.map-sidebar-panel {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--panel);
}

.map-sidebar .map-detail {
  position: static;
  max-height: none;
  overflow: visible;
}

.map-live-indicator {
  max-width: 120px;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.7rem;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-sidebar .map-control-group {
  border-radius: 7px;
}

.map-sidebar .map-control-group > summary {
  min-height: 42px;
  padding: 9px 10px;
}

.map-sidebar .map-control-group > summary small {
  font-size: 0.69rem;
}

.map-sidebar .map-group-content {
  padding: 11px;
}

.map-layer-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 6px;
}

.map-layer-list label {
  min-height: 34px;
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.025);
  font-size: 0.78rem;
}

.map-layer-list label:first-child,
.map-layer-list label:last-child {
  grid-column: 1 / -1;
}

.map-sidebar-fields {
  display: grid;
  gap: 9px;
}

.map-filter-grid {
  display: grid;
  gap: 9px;
}

.map-time-range {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}

.map-time-range .form-row {
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 8px;
}

.map-time-range input {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  font-size: 0.78rem;
  pointer-events: auto;
  cursor: text;
  color-scheme: dark;
}

.map-time-range input::-webkit-calendar-picker-indicator {
  opacity: 0.9;
  cursor: pointer;
}

.map-filter-card {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.022);
}

.map-filter-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--border);
}

.map-filter-heading > span {
  font-size: 0.8rem;
  font-weight: 750;
}

.map-filter-heading > small,
.map-field-help {
  color: var(--muted);
  font-size: 0.68rem;
}

.map-field-help {
  margin: -2px 0 0;
  line-height: 1.4;
}

.map-filter-card .map-compact-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin: 0;
}

.map-filter-card .map-compact-actions button:only-child {
  grid-column: 1 / -1;
}

.map-sidebar-fields .form-row {
  margin: 0;
}

.map-sidebar-fields .form-row > span:first-child {
  font-size: 0.76rem;
}

.map-sidebar-actions {
  display: grid;
  gap: 7px;
}

.map-sidebar-actions button,
.map-sidebar .map-compact-actions button {
  width: 100%;
}

@media (max-width: 1100px) {
  .map-workspace {
    grid-template-columns: minmax(0, 1fr) 350px;
  }

  .map-command-heading {
    align-items: flex-start;
  }

  .map-view-value {
    width: 100%;
    margin-left: 0;
  }
}

@media (max-width: 820px) {
  .map-command-heading {
    display: grid;
  }

  .map-command-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .map-command-actions button {
    width: 100%;
  }

  .map-workspace,
  .map-workspace.sidebar-collapsed {
    grid-template-columns: 1fr;
  }

  .map-sidebar {
    position: static;
    max-height: none;
  }
}

@media (max-width: 520px) {
  .map-layer-list {
    grid-template-columns: 1fr;
  }

  .map-layer-list label:first-child,
  .map-layer-list label:last-child {
    grid-column: auto;
  }

  .map-tool-strip {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media not all {
/* Blue & gold operations tracker theme (disabled) */
:root {
  --gold: var(--yellow-text);
  --gold-bright: #f3d47b;
  --gold-deep: #9b7021;
  --blue-bright: var(--blue-text);
  --blue-glow: rgba(62, 151, 238, 0.2);
  --gold-glow: rgba(227, 185, 79, 0.18);
  --panel-raised: #102743;
  --panel-soft: rgba(11, 29, 52, 0.84);
}

html {
  background: var(--bg);
}

body {
  background:
    radial-gradient(circle at 12% -8%, rgba(35, 108, 175, 0.3), transparent 30rem),
    radial-gradient(circle at 92% 6%, rgba(204, 158, 49, 0.13), transparent 26rem),
    linear-gradient(145deg, #061427 0%, var(--bg) 48%, #08192d 100%);
  background-attachment: fixed;
  font-family: "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(104, 159, 212, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(104, 159, 212, 0.025) 1px, transparent 1px);
  background-size: 32px 32px;
  content: "";
  pointer-events: none;
}

a {
  color: var(--blue-bright);
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

a:hover {
  color: var(--gold-bright);
}

.desktop-window {
  width: min(1660px, calc(100% - 32px));
  margin: 16px auto;
}

.desktop-app-header {
  position: relative;
  min-height: 98px;
  padding: 18px 22px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--gold) 52%, var(--border));
  border-radius: 16px 16px 5px 5px;
  background:
    linear-gradient(100deg, rgba(17, 49, 82, 0.98), rgba(8, 29, 52, 0.97) 62%, rgba(32, 43, 54, 0.96));
  box-shadow: 0 16px 40px rgba(0, 5, 14, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.desktop-app-header::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(var(--gold-bright), var(--gold-deep));
  content: "";
}

.desktop-app-header::after {
  position: absolute;
  top: -90px;
  right: 14%;
  width: 260px;
  height: 260px;
  border: 1px solid rgba(227, 185, 79, 0.11);
  border-radius: 50%;
  box-shadow: 0 0 0 38px rgba(227, 185, 79, 0.025), 0 0 0 74px rgba(227, 185, 79, 0.02);
  content: "";
  pointer-events: none;
}

.desktop-brand-lockup {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand-mark,
.login-brand-mark {
  display: grid;
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 1px solid var(--gold);
  border-radius: 12px;
  background: linear-gradient(145deg, #183d66, #0a2039);
  box-shadow: inset 0 0 0 3px rgba(227, 185, 79, 0.1), 0 8px 24px rgba(0, 6, 18, 0.35);
  color: var(--gold-bright);
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.brand-eyebrow,
.login-kicker {
  display: block;
  margin: 0 0 3px;
  color: var(--gold);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.desktop-app-header h1 {
  color: var(--text);
  font-size: clamp(22px, 2.2vw, 30px);
  letter-spacing: -0.02em;
}

.desktop-app-header p {
  color: var(--muted);
  font-size: 13px;
}

.desktop-header-actions {
  position: relative;
  z-index: 1;
}

.desktop-tabs {
  gap: 4px;
  margin-top: 8px;
  padding: 7px 8px 0;
  border: 1px solid var(--border);
  border-top-color: rgba(227, 185, 79, 0.28);
  border-radius: 5px 5px 12px 12px;
  background: rgba(5, 18, 34, 0.82);
  box-shadow: 0 8px 28px rgba(0, 5, 15, 0.24);
}

.desktop-tab,
.inner-tab {
  padding: 10px 14px;
  border-radius: 7px 7px 0 0;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.desktop-tab:hover,
.inner-tab:hover {
  border-color: rgba(102, 183, 255, 0.22);
  background: rgba(38, 84, 129, 0.25);
  color: var(--text);
}

.desktop-tab.active,
.inner-tab.active {
  position: relative;
  border-color: var(--border);
  background: linear-gradient(180deg, #173b62, #0e2947);
  color: var(--gold-bright);
  box-shadow: inset 0 2px 0 var(--gold), 0 -5px 18px var(--blue-glow);
}

.desktop-tab-body {
  padding: 18px 7px 32px;
}

.desktop-page-toolbar {
  min-height: 56px;
  margin-bottom: 16px;
  padding: 0 6px 10px;
  border-bottom: 1px solid rgba(40, 74, 112, 0.66);
}

.desktop-page-toolbar h1,
.toolbar h1 {
  color: var(--gold-bright);
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: -0.02em;
}

.desktop-page-toolbar p,
.toolbar p {
  max-width: 820px;
  font-size: 13px;
  line-height: 1.55;
}

.panel,
.config-card,
.notice,
.error,
.login-panel {
  border-color: var(--border);
  background:
    linear-gradient(150deg, rgba(16, 39, 67, 0.94), rgba(8, 27, 49, 0.96));
  box-shadow: 0 10px 28px rgba(0, 6, 18, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.panel {
  border-radius: 13px;
}

.panel h2,
.data-section h2,
.player-profile-section h3,
.guardian-heading h2 {
  color: var(--gold-bright);
  letter-spacing: 0.01em;
}

.config-card {
  position: relative;
  overflow: hidden;
  border-radius: 13px;
}

.config-card::after {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 46px;
  height: 2px;
  background: var(--gold);
  content: "";
}

.config-card:hover {
  border-color: color-mix(in srgb, var(--gold) 60%, var(--border));
  background: linear-gradient(150deg, #153a61, #0b233e);
  box-shadow: 0 14px 34px rgba(0, 7, 20, 0.3), 0 0 0 1px rgba(227, 185, 79, 0.08);
  color: var(--text);
  transform: translateY(-2px);
}

button,
.button {
  min-height: 38px;
  border: 1px solid var(--gold-deep);
  border-radius: 8px;
  background: linear-gradient(180deg, #e6bd58, #bd8b2f);
  box-shadow: inset 0 1px 0 rgba(255, 248, 210, 0.35), 0 5px 14px rgba(0, 4, 12, 0.2);
  color: #08182a;
  font-weight: 800;
  letter-spacing: 0.01em;
}

button:not(.secondary):not(.danger-button):not(.restart-bot-button) {
  border-color: var(--gold-deep);
  background: linear-gradient(180deg, #e6bd58, #bd8b2f);
  color: #08182a;
}

button:hover,
.button:hover,
button:not(.secondary):not(.danger-button):not(.restart-bot-button):hover {
  border-color: var(--gold-bright);
  background: linear-gradient(180deg, #f1d073, #d49e38);
  color: #061427;
  transform: translateY(-1px);
}

.button.secondary,
button.secondary {
  border-color: #355d86;
  background: linear-gradient(180deg, #173d65, #102d4e);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
  color: #dfeefe;
}

.button.secondary:hover,
button.secondary:hover {
  border-color: var(--gold);
  background: linear-gradient(180deg, #1d4b79, #14385e);
  color: var(--gold-bright);
}

input,
select,
textarea,
.rich-text-canvas {
  min-height: 38px;
  border-color: #31577f;
  border-radius: 8px;
  background: rgba(5, 21, 39, 0.92);
  box-shadow: inset 0 2px 6px rgba(0, 4, 12, 0.2);
}

input:focus,
select:focus,
textarea:focus,
.rich-text-canvas:focus {
  border-color: var(--gold);
  outline: 2px solid var(--gold-glow);
  box-shadow: 0 0 0 3px var(--gold-glow), inset 0 2px 6px rgba(0, 4, 12, 0.18);
}

label,
.form-row > span,
.path-row > span {
  color: #b6c6d6;
  font-weight: 600;
}

.user-pill,
.badge-good,
.badge-warn,
.badge-bad,
.restart-status {
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.user-pill {
  border-color: rgba(227, 185, 79, 0.46);
  background: rgba(227, 185, 79, 0.08);
  color: var(--gold-bright);
}

.stats-band,
.guardian-stats {
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--border);
  box-shadow: 0 10px 28px rgba(0, 6, 18, 0.2);
}

.stat,
.guardian-stat {
  position: relative;
  min-height: 105px;
  border: 0;
  background: linear-gradient(145deg, #102b4a, #0a2039);
}

.stat::before,
.guardian-stat::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(var(--gold-bright), var(--gold-deep));
  content: "";
}

.stat span,
.guardian-stat span {
  color: #9fb6cb;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.stat strong,
.guardian-stat strong {
  color: var(--text);
  font-size: 28px;
  font-variant-numeric: tabular-nums;
}

.table-wrap {
  border: 1px solid rgba(40, 74, 112, 0.72);
  border-radius: 9px;
  background: rgba(4, 17, 32, 0.5);
}

.data-table th {
  border-bottom-color: color-mix(in srgb, var(--gold) 45%, var(--border));
  background: #102e50;
  color: var(--gold-bright);
  font-size: 11px;
  letter-spacing: 0.065em;
  text-transform: uppercase;
}

.data-table td {
  border-bottom-color: rgba(40, 74, 112, 0.48);
}

.data-table tbody tr:nth-child(even) {
  background: rgba(39, 80, 121, 0.11);
}

.data-table tbody tr:hover {
  background: rgba(33, 91, 147, 0.32);
}

.notice {
  border-left: 4px solid var(--blue-bright);
  color: #dcecff;
}

.error {
  border-left: 4px solid var(--red-text);
}

.login-shell {
  position: relative;
  overflow: hidden;
}

.login-shell::before {
  position: absolute;
  width: min(660px, 90vw);
  height: min(660px, 90vw);
  border: 1px solid rgba(227, 185, 79, 0.09);
  border-radius: 50%;
  box-shadow: 0 0 0 70px rgba(59, 132, 201, 0.035), 0 0 0 140px rgba(227, 185, 79, 0.018);
  content: "";
}

.login-panel {
  position: relative;
  width: min(450px, 100%);
  padding: 38px;
  border-color: color-mix(in srgb, var(--gold) 56%, var(--border));
  border-radius: 18px;
  text-align: center;
  box-shadow: 0 28px 80px rgba(0, 5, 16, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.login-panel::before {
  position: absolute;
  inset: 0 22% auto;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
  content: "";
}

.login-brand-mark {
  width: 68px;
  height: 68px;
  margin: 0 auto 18px;
  font-size: 21px;
}

.login-panel h1 {
  margin-bottom: 5px;
  color: var(--text);
  letter-spacing: -0.035em;
}

.login-panel .login-kicker {
  margin-bottom: 12px;
  color: var(--gold);
}

.login-panel label {
  text-align: left;
}

.login-panel button {
  min-height: 44px;
}

@media (max-width: 820px) {
  .desktop-window {
    width: min(100% - 16px, 1660px);
    margin: 8px auto;
  }

  .desktop-app-header {
    align-items: flex-start;
    padding: 16px;
  }

  .brand-mark {
    width: 46px;
    height: 46px;
  }

  .desktop-tab {
    padding: 9px 11px;
  }
}

@media (max-width: 520px) {
  .desktop-brand-lockup {
    align-items: flex-start;
  }

  .desktop-app-header h1 {
    font-size: 20px;
  }

  .brand-eyebrow {
    letter-spacing: 0.12em;
  }

  .login-panel {
    padding: 30px 22px;
  }

  .stats-band,
  .guardian-stats {
    border-radius: 10px;
  }
}
}