:root {
  --bg: #f3f6f8;
  --surface: #ffffff;
  --surface-2: #eef3f5;
  --surface-soft: #f7f9fa;
  --surface-muted: #edf2f4;
  --masthead: #eef2f4;
  --nav-surface: #fbfcfd;
  --table-head: #e6edf0;
  --row-hover: #f1f8fa;
  --row-selected: #e8f4f7;
  --row-active: #cce8f1;
  --text: #182026;
  --muted: #60707a;
  --line: #d3dee3;
  --line-strong: #aab9c1;
  --accent: #176b87;
  --accent-strong: #0c5067;
  --accent-soft: #dceef3;
  --warn: #b45f06;
  --shadow: 0 5px 18px rgba(15, 23, 30, 0.06);
  --shadow-float: 0 10px 28px rgba(15, 23, 30, 0.11);
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--text);
  font-family:
    "Segoe UI",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
}

button,
input,
select {
  font: inherit;
}

button,
select,
input[type="file"],
input[type="number"],
input[type="search"],
input[type="date"],
input[type="text"],
textarea {
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text);
}

button {
  min-height: 34px;
  padding: 6px 12px;
  cursor: pointer;
}

button:hover {
  border-color: var(--accent);
}

:where(button, select, input, textarea, summary, a[href]):focus-visible {
  outline: 3px solid rgba(23, 107, 135, 0.28);
  outline-offset: 2px;
}

button.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 650;
}

button:disabled {
  cursor: default;
  opacity: 0.55;
}

select {
  min-height: 34px;
  padding: 5px 28px 5px 10px;
}

input[type="number"],
input[type="date"] {
  width: 96px;
  min-height: 34px;
  padding: 5px 9px;
}

input[type="search"],
input[type="text"],
textarea {
  width: 100%;
  min-height: 32px;
  padding: 5px 8px;
}

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

input[type="file"] {
  width: 100%;
  min-height: 34px;
  padding: 5px 6px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--masthead);
}

.topbar > * {
  min-width: 0;
}

.brand-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 26px;
  min-width: 0;
  white-space: nowrap;
}

.app-logo {
  display: block;
  width: 34px;
  height: 24px;
  object-fit: contain;
  flex: 0 0 auto;
}

.topbar h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 650;
  letter-spacing: 0;
}

.topbar p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.lab-link {
  color: var(--accent-strong);
  font-weight: 650;
  text-decoration: none;
}

.lab-link:hover {
  text-decoration: underline;
}

.topbar-status {
  flex: 1 1 440px;
  width: 52vw;
  max-width: 52vw;
  min-width: 220px;
  color: var(--muted);
  font-size: 13px;
  text-align: right;
}

.topbar-account-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
  margin-bottom: 4px;
}

.topbar-utility-button {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 4px 9px;
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.82);
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

.version-button {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.language-select {
  flex: 0 0 auto;
  width: auto;
  min-width: 108px;
  min-height: 30px;
  padding-top: 3px;
  padding-bottom: 3px;
  color: var(--text);
  font-size: 12px;
}

#statusText[data-tone="error"] {
  color: #b42318;
  font-weight: 650;
}

#statusText[data-tone="warning"] {
  color: #8a5700;
  font-weight: 650;
}

#statusText[data-tone="busy"] {
  color: var(--accent-strong);
}

.app-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 46px;
  overflow-x: auto;
  padding: 0 20px;
  border-bottom: 1px solid var(--line);
  background: var(--nav-surface);
  box-shadow: 0 2px 8px rgba(15, 23, 30, 0.04);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.app-nav::-webkit-scrollbar {
  display: none;
}

.app-nav button {
  position: relative;
  flex: 0 0 auto;
  min-height: 45px;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 650;
  scroll-snap-align: center;
}

.nav-coming-soon-badge {
  display: inline-flex;
  margin-left: 5px;
  padding: 2px 5px;
  border: 1px solid #cbd8dc;
  border-radius: 999px;
  background: #f2f6f7;
  color: #52666e;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}

.app-view select,
.app-view input,
.app-view textarea {
  max-width: 100%;
  min-width: 0;
}

.app-view h2,
.app-view h3,
.panel-head strong,
.section-head strong {
  overflow-wrap: anywhere;
}

.app-nav button::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  background: transparent;
}

.app-nav button:hover,
.app-nav button.is-active {
  border-color: transparent;
  background: transparent;
  color: var(--accent-strong);
}

.app-nav button.is-active::after {
  background: var(--accent);
}

.app-nav::after {
  content: "";
  flex: 0 0 14px;
}

.app-view[hidden],
[data-analysis-panel][hidden] {
  display: none !important;
}

.access-panel[hidden] {
  display: none;
}

.auth-box {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  flex-wrap: wrap;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  margin-bottom: 0;
}

.auth-user {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 2px 4px;
  border: 0;
  background: transparent;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-weight: 650;
  cursor: pointer;
}

.auth-user-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.auth-notification-badge {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  color: #fff;
  background: var(--accent-strong);
  box-shadow: 0 0 0 2px var(--surface);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
}

.auth-user:hover,
.auth-user:focus-visible {
  color: var(--accent-strong);
  text-decoration: underline;
}

.auth-role {
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-2);
  font-size: 12px;
  white-space: nowrap;
}

.auth-rank {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 27px;
  padding: 3px 8px;
  border: 1px solid color-mix(in srgb, #d39b16 55%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, #fff4c7 72%, var(--surface));
  color: #76520a;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.auth-rank:hover,
.auth-rank:focus-visible {
  border-color: #c1840b;
  background: color-mix(in srgb, #ffe99a 78%, var(--surface));
  color: #5c3d00;
}

.auth-team-count {
  max-width: 86px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-test-user-control {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 3px 4px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.admin-test-user-control select {
  width: auto;
  max-width: 150px;
  min-height: 24px;
  padding: 1px 24px 1px 6px;
  border: 0;
  background-color: transparent;
  color: var(--text);
  font-size: 12px;
}

.admin-test-user-control.is-active {
  border-color: #d69e2e;
  background: #fff7df;
  color: #855600;
  box-shadow: 0 0 0 2px rgb(214 158 46 / 12%);
}

.auth-wallet {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.auth-balance {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  min-height: 25px;
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
}

.auth-balance strong {
  color: var(--text);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.auth-token {
  border-color: #9bcfc2;
  background: #edf8f5;
}

.auth-token.is-low {
  border-color: #e7bd68;
  background: #fff7e7;
}

.auth-token.is-low strong {
  color: #8a5700;
}

.auth-token.is-critical {
  border-color: #e3a09a;
  background: #fff0ef;
}

.auth-token.is-critical strong {
  color: #b42318;
}

.auth-button,
.primary-auth-button {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  font-weight: 650;
}

.secondary-auth-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-color: var(--line-strong);
  background: var(--surface);
  color: var(--text);
}

.admin-attention-badge {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #b54708;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.secondary-auth-button .admin-attention-badge {
  flex: 0 0 auto;
}

.feedback-open-button {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 4px 10px;
  white-space: nowrap;
}

.support-open-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 4px 10px;
  border-color: #d5a6ae;
  background: #fff9fa;
  color: #7e3443;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.support-open-button > span:first-child {
  color: #9f3f52;
  font-size: 13px;
  line-height: 1;
}

.support-open-button:hover {
  border-color: #bd7381;
  background: #fff1f4;
  color: #6d2635;
}

.auth-button.is-active,
.secondary-auth-button.is-active {
  border-color: var(--accent);
  background: #eaf3ff;
  color: var(--accent-strong);
}

.auth-warning {
  color: #9a3d00;
  font-weight: 650;
}

.guest-demo-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 48px;
  padding: 9px 12px;
  border: 1px solid #b9d8d1;
  border-left: 4px solid var(--accent);
  border-radius: 7px;
  background: #f1faf7;
}

.guest-demo-copy {
  display: grid;
  min-width: 180px;
  gap: 2px;
}

.guest-demo-copy strong {
  font-size: 13px;
}

.guest-demo-copy span {
  color: var(--muted);
  font-size: 11px;
}

.guest-demo-categories {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 6px;
}

.guest-demo-category {
  min-width: 78px;
  border-color: #9bcfc2;
  background: var(--surface);
  color: var(--text);
  font-weight: 650;
}

.guest-demo-category:disabled {
  border-style: dashed;
  background: transparent;
  color: var(--muted);
  opacity: 0.75;
}

.auth-provider-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.progress-wrap {
  position: relative;
  width: 100%;
  height: 5px;
  margin-top: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-2);
}

.progress-fill {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 160ms ease;
}

.progress-wrap.is-indeterminate .progress-fill {
  position: absolute;
  width: 36%;
  animation: progress-slide 1.1s infinite ease-in-out;
}

@keyframes progress-slide {
  0% {
    left: -36%;
  }
  100% {
    left: 100%;
  }
}

.app-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  padding: 16px;
}

.app-view {
  min-width: 0;
}

.workspace {
  display: grid;
  min-width: 0;
  gap: 14px;
}

.feature-pending-workspace {
  min-height: min(560px, calc(100vh - 190px));
  place-content: center;
  justify-items: center;
  gap: 9px;
  padding: 36px 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 30%, rgba(62, 145, 165, 0.1), transparent 42%),
    var(--surface);
  text-align: center;
}

.feature-pending-mark {
  display: grid;
  width: 82px;
  height: 82px;
  place-items: center;
  border: 1px solid #a9c8d1;
  border-radius: 24px;
  background: #edf7f9;
  color: #176078;
  font-size: 14px;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.feature-pending-badge {
  padding: 3px 8px;
  border-radius: 999px;
  background: #e8f2f4;
  color: #326673;
  font-size: 10px;
  font-weight: 750;
}

.feature-pending-workspace h2,
.feature-pending-workspace p {
  margin: 0;
}

.feature-pending-workspace p {
  max-width: 620px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.nav-coming-soon-badge.is-beta,
.analysis-beta-badge {
  background: #e8f1ff;
  color: #1557a8;
}

.trim-analysis-workspace {
  gap: 12px;
}

.trim-analysis-head,
.trim-analysis-toolbar,
.trim-analysis-log-card,
.trim-analysis-comparison {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.trim-analysis-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  background: var(--surface-soft);
}

.trim-analysis-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.trim-analysis-title-row h2,
.trim-analysis-head p {
  margin: 0;
}

.trim-analysis-head p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
}

.trim-analysis-beta-note {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 999px;
  background: #f3f7fc;
  color: #42617d;
  font-size: 11px;
}

.trim-analysis-toolbar {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(160px, .75fr) auto auto;
  align-items: end;
  gap: 10px;
  padding: 12px 14px;
  background: var(--surface-muted);
}

.trim-thrust-pitch-guidance {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #bed5ec;
  border-radius: 9px;
  background: #f3f8fd;
}

.trim-thrust-pitch-guidance strong,
.trim-thrust-pitch-guidance p { margin: 0; }

.trim-thrust-pitch-guidance p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.trim-thrust-pitch-guidance-badge {
  padding: 5px 9px;
  border-radius: 999px;
  background: #dceaf8;
  color: #24557e;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.trim-thrust-pitch-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.trim-thrust-pitch-summary > div {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.trim-thrust-pitch-summary span,
.trim-thrust-pitch-summary small {
  display: block;
  color: var(--muted);
  font-size: 10px;
}

.trim-thrust-pitch-summary strong {
  display: block;
  margin-top: 3px;
  font-size: 17px;
}

.trim-thrust-pitch-chart-panel,
.trim-thrust-pitch-events {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
}

.trim-thrust-pitch-chart-panel h3,
.trim-thrust-pitch-events h3 { margin: 0 0 8px; font-size: 13px; }

.trim-thrust-pitch-chart {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 270px;
  overflow: hidden;
}

.trim-thrust-pitch-chart-wrap {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
}

.trim-thrust-pitch-chart text { fill: #617687; font-size: 10px; }
.trim-thrust-pitch-chart .axis-line { stroke: #9aacbb; stroke-width: 1; }
.trim-thrust-pitch-chart .zero-line { stroke: #60798d; stroke-width: 1.2; stroke-dasharray: 4 4; }

.trim-thrust-pitch-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 14px;
  margin-bottom: 5px;
  font-size: 10px;
}

.trim-thrust-pitch-legend span { display: inline-flex; align-items: center; gap: 5px; }
.trim-thrust-pitch-legend i { width: 8px; height: 8px; border-radius: 50%; background: var(--event-color); }

.trim-thrust-pitch-table-wrap { width: 100%; min-width: 0; max-width: 100%; overflow: auto; }
.trim-thrust-pitch-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 10px; }
.trim-thrust-pitch-table th,
.trim-thrust-pitch-table td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.trim-thrust-pitch-table th:first-child,
.trim-thrust-pitch-table td:first-child,
.trim-thrust-pitch-table th:nth-child(2),
.trim-thrust-pitch-table td:nth-child(2) { text-align: left; }
.trim-thrust-pitch-table tbody tr:last-child td { border-bottom: 0; }

@media (max-width: 760px) {
  .trim-thrust-pitch-guidance { grid-template-columns: 1fr; }
  .trim-thrust-pitch-guidance-badge { justify-self: start; }
  .trim-thrust-pitch-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trim-thrust-pitch-chart { min-width: 0; min-height: 220px; }
  .trim-thrust-pitch-chart text { font-size: 14px; }
}

.trim-analysis-toolbar [hidden] { display: none !important; }

.trim-analysis-toolbar > label {
  display: grid;
  min-width: 0;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.trim-analysis-toolbar select {
  width: 100%;
  min-height: 36px;
}

.trim-analysis-settings-control {
  display: flex;
  align-items: flex-end;
  min-height: 38px;
}

.trim-analysis-settings-menu > summary,
.trim-analysis-run-actions .primary-button {
  min-height: 38px;
}

.trim-analysis-settings-panel {
  right: 0;
  left: auto;
  width: min(310px, calc(100vw - 42px));
}

.trim-analysis-settings-panel label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  color: var(--text);
  font-size: 12px;
}

.trim-analysis-settings-panel .trim-analysis-scope-field {
  flex-direction: column;
  align-items: stretch;
}

.trim-analysis-scope-field select {
  width: 100%;
  min-height: 34px;
}

.trim-analysis-run-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-height: 38px;
}

.trim-analysis-run-actions .primary-button {
  min-width: 150px;
  padding-right: 16px;
  padding-left: 16px;
}

.trim-analysis-status {
  min-height: 20px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.trim-analysis-safety {
  justify-self: start;
}

.page-help-disclosure,
.inline-help-disclosure,
.summary-help-disclosure {
  position: relative;
  z-index: 8;
}

.page-help-disclosure summary,
.inline-help-disclosure summary,
.summary-help-disclosure summary {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  list-style: none;
}

.page-help-disclosure summary::-webkit-details-marker,
.inline-help-disclosure summary::-webkit-details-marker,
.summary-help-disclosure summary::-webkit-details-marker {
  display: none;
}

.page-help-disclosure summary:hover,
.page-help-disclosure summary:focus-visible,
.inline-help-disclosure summary:hover,
.inline-help-disclosure summary:focus-visible,
.summary-help-disclosure summary:hover,
.summary-help-disclosure summary:focus-visible {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.page-help-disclosure > p,
.inline-help-disclosure > p,
.summary-help-disclosure > p {
  position: absolute;
  z-index: 12;
  top: calc(100% + 7px);
  left: 0;
  width: min(360px, calc(100vw - 36px));
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
  color: var(--text);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.55;
}

.summary-help-disclosure > p {
  right: 0;
  left: auto;
}

.inline-help-disclosure > p {
  color: #6c5622;
}

.trim-analysis-title-row,
.control-response-title-row,
.diagnostic-explainer-title,
.summary-title-with-help {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

.diagnostic-explainer.is-compact h2 {
  margin: 0;
}

.summary-strip.trim-analysis-selection-summary {
  grid-template-columns: repeat(var(--sortie-count, 1), minmax(0, 1fr));
  padding: 0;
  border: 0;
}

.trim-analysis-summary-section,
.trim-analysis-row-section {
  overflow: visible;
}

.trim-analysis-summary-card .overview-summary-grid {
  margin-top: 8px;
}

.trim-analysis-row-body > :first-child {
  border: 0;
  border-radius: 0 0 10px 10px;
}

.trim-analysis-row-section .control-response-row-header button small {
  margin-left: auto;
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
}

.trim-analysis-result {
  display: grid;
  min-width: 0;
  gap: 12px;
}

.trim-analysis-preview-section {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  overflow: hidden;
}

.trim-analysis-preview-section:empty { display: none; }

.trim-analysis-preview-head {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
}

.trim-analysis-preview-head h3,
.trim-analysis-preview-head p,
.trim-analysis-preview-card h3 { margin: 0; }

.trim-analysis-preview-head h3 { font-size: 14px; }

.trim-analysis-preview-head p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.trim-analysis-preview-grid {
  display: grid;
  grid-template-columns: repeat(var(--trim-columns, 1), minmax(0, 1fr));
}

.trim-analysis-preview-card {
  min-width: 0;
  padding: 12px;
}

.trim-analysis-preview-card + .trim-analysis-preview-card { border-left: 1px solid var(--line); }

.trim-analysis-preview-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.trim-analysis-preview-card > header > div { min-width: 0; }

.trim-analysis-preview-card h3 {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trim-analysis-preview-card header small,
.trim-analysis-preview-chart > small {
  color: var(--muted);
  font-size: 9px;
}

.trim-analysis-preview-card header .secondary-button {
  flex: 0 0 auto;
  min-height: 28px;
  padding: 4px 8px;
  font-size: 10px;
}

.trim-analysis-preview-chart { margin: 8px 0 0; }

.trim-analysis-preview-chart svg {
  display: block;
  width: 100%;
  min-height: 170px;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.trim-analysis-preview-chart.is-dragging svg { cursor: grabbing; }

.trim-analysis-preview-chart svg text {
  fill: #617687;
  font-size: 9px;
}

.trim-analysis-preview-chart .trim-analysis-chart-legend { margin-bottom: 2px; }

.trim-analysis-selected-region {
  fill: #2563eb;
  opacity: .1;
}

.trim-analysis-applied-region {
  fill: #16a36a;
  opacity: .16;
}

.trim-analysis-range-overview { margin-top: -3px; }

.trim-analysis-range-overview > svg {
  width: 100%;
  min-height: 0;
  height: 28px;
  cursor: default;
  touch-action: auto;
}

.trim-analysis-overview-track { fill: #e7edf2; }

.trim-analysis-overview-selected { fill: #60a5fa; }

.trim-analysis-overview-applied { fill: #22a875; }

.trim-analysis-overview-visible {
  fill: none;
  stroke: #334155;
  stroke-width: 1.5;
}

.trim-analysis-range-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 10px;
  margin: -2px 8px 3px;
  color: var(--muted);
  font-size: 9px;
}

.trim-analysis-range-legend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.trim-analysis-range-legend i {
  display: inline-block;
  width: 10px;
  height: 5px;
  border-radius: 3px;
  background: #334155;
}

.trim-analysis-range-legend .is-selected i { background: #60a5fa; }
.trim-analysis-range-legend .is-applied i { background: #22a875; }
.trim-analysis-range-legend .is-visible i {
  height: 7px;
  border: 1px solid #334155;
  background: transparent;
}

.trim-analysis-consensus {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f5f8fa;
}

.trim-analysis-consensus.has-findings {
  border-color: #e4c36f;
  background: #fff9e9;
}

.trim-analysis-consensus h3,
.trim-analysis-consensus p,
.trim-analysis-consensus ul {
  margin: 0;
}

.trim-analysis-consensus h3 {
  font-size: 13px;
}

.trim-analysis-consensus p,
.trim-analysis-consensus ul {
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.trim-analysis-consensus ul {
  padding-left: 18px;
}

.trim-analysis-comparison {
  overflow: hidden;
}

.trim-analysis-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
}

.trim-analysis-section-head h3,
.trim-analysis-log-card h3 {
  margin: 0;
  font-size: 14px;
}

.trim-analysis-comparison-grid,
.trim-analysis-log-grid {
  display: grid;
  grid-template-columns: repeat(var(--trim-columns, 1), minmax(0, 1fr));
}

.trim-analysis-comparison-column,
.trim-analysis-log-card {
  min-width: 0;
  padding: 14px;
}

.trim-analysis-comparison-column + .trim-analysis-comparison-column,
.trim-analysis-log-card + .trim-analysis-log-card {
  border-left: 1px solid var(--line);
}

.trim-analysis-log-grid .trim-analysis-log-card {
  border-radius: 0;
}

.trim-analysis-log-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 10px;
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
}

.trim-analysis-comparison-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.trim-analysis-comparison-card-head h3 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trim-confidence-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  border-radius: 999px;
  background: #eef2f5;
  color: #4b6170;
  font-size: 10px;
  font-weight: 750;
}

.trim-confidence-badge.is-high { background: #e7f6ef; color: #176b4d; }
.trim-confidence-badge.is-medium { background: #fff4d8; color: #8a5a00; }
.trim-confidence-badge.is-low { background: #fdeceb; color: #a33b35; }

.trim-analysis-metrics {
  display: grid;
  gap: 7px;
  margin-top: 12px;
}

.trim-analysis-metric {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) auto;
  gap: 4px 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  font-size: 12px;
}

.trim-analysis-metric small {
  grid-column: 1 / -1;
  color: var(--muted);
}

.trim-analysis-metrics.is-compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.trim-analysis-result-group {
  margin-top: 12px;
}

.trim-analysis-result-group + .trim-analysis-result-group {
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.trim-analysis-result-group h4 {
  margin: 0;
  color: #35586a;
  font-size: 11px;
  font-weight: 750;
}

.trim-analysis-result-group .trim-analysis-metrics {
  margin-top: 7px;
}

.trim-analysis-metric.is-key {
  display: flex;
  min-width: 0;
  min-height: 58px;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-2);
}

.trim-analysis-metric.is-key span {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trim-analysis-metric.is-key strong {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.trim-analysis-metric.is-key small {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.2;
}

.trim-analysis-chart-grid {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.trim-analysis-range {
  margin-top: 10px;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 7px;
  background: #f8fafb;
}

.trim-analysis-range summary {
  cursor: pointer;
  color: #35586a;
  font-size: 10px;
  font-weight: 700;
}

.trim-analysis-range > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  align-items: end;
  gap: 7px;
  margin-top: 8px;
}

.trim-analysis-range label {
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: 9px;
}

.trim-analysis-range input {
  width: 100%;
  min-width: 0;
  min-height: 32px;
}

.trim-analysis-range button {
  min-height: 32px;
  white-space: nowrap;
}

.trim-analysis-range small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.45;
}

.trim-analysis-chart {
  min-width: 0;
  margin: 0;
  padding: 9px 9px 4px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 94%, #eef6fa);
}

.trim-analysis-chart figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
}

.trim-analysis-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 5px;
  color: var(--muted);
  font-size: 9px;
}

.trim-analysis-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.trim-analysis-legend-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 4px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.trim-analysis-legend-button:hover,
.trim-analysis-legend-button:focus-visible {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.trim-analysis-legend-button.is-off {
  opacity: 0.38;
  text-decoration: line-through;
}

.trim-analysis-chart-legend i {
  width: 14px;
  border-top: 2px var(--trim-series-dash, solid) var(--trim-series-color, #64748b);
}

.trim-analysis-chart-legend i.is-dot {
  width: 7px;
  height: 7px;
  border: 0;
  border-radius: 50%;
  background: var(--trim-series-color, #64748b);
}

.trim-analysis-chart svg {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 3px;
  overflow: visible;
  background: #ffffff;
}

.trim-analysis-chart svg text {
  fill: var(--muted);
  font-size: 9px;
}

.trim-chart-grid,
.trim-chart-zero {
  stroke: color-mix(in srgb, var(--line) 86%, transparent);
  stroke-width: 1;
}

.trim-chart-zero {
  stroke-dasharray: 3 3;
}

.trim-chart-series path {
  fill: none;
  stroke-width: 1.8;
  vector-effect: non-scaling-stroke;
}

.trim-analysis-scatter-hint {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.trim-analysis-scatter-grid {
  grid-template-columns: 1fr;
  margin-top: 7px;
}

.trim-analysis-scatter-grid.is-optional {
  margin-top: 12px;
}

.trim-analysis-scatter-chart {
  position: relative;
  background: color-mix(in srgb, var(--surface) 97%, #e8f2f8);
}

.trim-analysis-scatter-chart.is-interactive svg {
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.trim-analysis-scatter-chart.is-dragging svg {
  cursor: grabbing;
}

.trim-scatter-series circle {
  fill: var(--trim-scatter-color, #2563eb);
  fill-opacity: 0.38;
  stroke: color-mix(in srgb, var(--trim-scatter-color, #2563eb) 75%, #ffffff);
  stroke-opacity: 0.22;
  stroke-width: 0.35;
  vector-effect: non-scaling-stroke;
}

.trim-scatter-series circle:hover {
  fill-opacity: 0.9;
  r: 2.6px;
}

.trim-scatter-range,
.trim-scatter-mean {
  stroke: var(--trim-scatter-color, #2563eb);
  vector-effect: non-scaling-stroke;
}

.trim-scatter-range {
  stroke-width: 2;
  stroke-opacity: 0.72;
}

.trim-scatter-mean {
  stroke-width: 3;
}

.trim-scatter-trend {
  fill: none;
  stroke: var(--trim-scatter-color, #0f172a);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.trim-scatter-zero-axis {
  stroke: color-mix(in srgb, var(--text, #0f172a) 82%, transparent);
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.trim-scatter-crosshair {
  stroke: color-mix(in srgb, var(--text, #0f172a) 72%, transparent);
  stroke-width: 1;
  stroke-dasharray: 4 3;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.trim-scatter-crosshair-point {
  fill: var(--surface, #ffffff);
  stroke: var(--text, #0f172a);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.trim-analysis-chart-legend .is-trend {
  width: 16px;
  border-top: 3px solid #0f172a;
}

.trim-analysis-chart-legend .is-overall-mean {
  width: 18px;
  border-top: 2px dashed #111827;
}

.trim-scatter-overall-mean {
  stroke: #111827;
  stroke-width: 2;
  stroke-dasharray: 6 4;
  vector-effect: non-scaling-stroke;
}

.trim-scatter-interaction-hint {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
  text-align: right;
}

.trim-scatter-tooltip {
  position: absolute;
  z-index: 4;
  max-width: min(240px, calc(100% - 20px));
  padding: 5px 7px;
  border: 1px solid color-mix(in srgb, var(--line) 80%, #2563eb);
  border-radius: 6px;
  background: color-mix(in srgb, var(--surface) 96%, #ffffff);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.16);
  color: var(--text);
  font-size: 10px;
  line-height: 1.35;
  pointer-events: none;
  white-space: nowrap;
}

.trim-hover-propulsion {
  margin-top: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface) 96%, #e8f2f8);
}

.trim-hover-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-top: 7px;
}

.trim-hover-summary > div {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 7px 8px;
  border-radius: 7px;
  background: var(--surface);
}

.trim-hover-summary span,
.trim-hover-summary small {
  color: var(--muted);
  font-size: 9px;
}

.trim-hover-summary strong {
  font-size: 14px;
}

.trim-hover-motor-table {
  display: grid;
  gap: 1px;
  margin-top: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--line);
}

.trim-hover-motor-row {
  display: grid;
  grid-template-columns: minmax(72px, 1fr) repeat(3, minmax(72px, 1fr));
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  background: var(--surface);
  font-size: 10px;
}

.trim-hover-motor-row.is-head {
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}

.trim-hover-motor-row .is-positive {
  color: #b45309;
}

.trim-hover-motor-row .is-negative {
  color: #0369a1;
}

.trim-gain-schedule {
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface) 97%, #eef6ff);
}

.info-dialog.trim-gain-comparison-dialog {
  width: min(1480px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  overflow: hidden;
}

.trim-gain-comparison-dialog > .info-dialog-head {
  margin: 0 16px;
  padding: 16px 0 12px;
}

.trim-gain-comparison-dialog-body {
  display: grid;
  gap: 10px;
  min-height: 0;
  padding: 0 16px 16px;
  overflow: auto;
}

.trim-gain-dialog-help {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 10px;
}

.trim-gain-dialog-help strong {
  flex: 0 0 auto;
  color: var(--text);
}

.trim-gain-dialog-grid {
  display: grid;
  grid-template-columns: repeat(var(--trim-gain-columns, 1), minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}

.trim-gain-dialog-column {
  min-width: 0;
  overflow: hidden;
  border-top: 4px solid var(--trim-log-color, var(--accent));
  border-radius: 9px;
  background: var(--surface);
}

.trim-gain-dialog-log-head {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
}

.trim-gain-dialog-log-head h3 {
  margin: 0;
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trim-gain-dialog-log-head small {
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trim-gain-dialog-column > .trim-gain-schedule {
  margin-top: 0;
  border-radius: 0 0 9px 9px;
}

.trim-gain-schedule .trim-analysis-section-head {
  align-items: flex-start;
  padding: 10px 11px;
}

.trim-gain-schedule .trim-analysis-section-head h4,
.trim-gain-axis-head h5 {
  margin: 0;
}

.trim-gain-schedule .trim-analysis-section-head p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}

.trim-gain-status {
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 750;
  white-space: nowrap;
}

.trim-gain-status.is-active {
  background: #e7f6ef;
  color: #176b4d;
}

.trim-gain-status.is-inactive {
  background: #fff4d8;
  color: #8a5a00;
}

.trim-gain-parameters {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  padding: 8px 11px 0;
  color: var(--muted);
  font-size: 9px;
}

.trim-gain-parameters strong {
  color: var(--text);
  font-weight: 700;
}

.trim-gain-warning,
.trim-gain-observed-summary {
  margin: 8px 11px 0;
  padding: 7px 8px;
  border-radius: 7px;
  font-size: 10px;
  line-height: 1.45;
}

.trim-gain-warning {
  background: #fff4d8;
  color: #7a4c00;
}

.trim-gain-warning.is-info {
  margin-bottom: 10px;
  background: #eef2f5;
  color: #4b6170;
}

.trim-gain-observed-summary {
  background: #edf7ff;
  color: #255b7a;
}

.trim-gain-schedule > .trim-analysis-scatter-hint {
  margin: 7px 11px 0;
}

.trim-gain-axis-grid {
  display: grid;
  gap: 10px;
  padding: 10px;
}

.trim-gain-scale-card,
.trim-gain-axis-card {
  min-width: 0;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 8px;
  background: var(--surface);
}

.trim-gain-scale-card {
  margin: 10px 10px 0;
}

.trim-gain-scale-card h5 {
  margin: 0 0 6px;
  font-size: 12px;
}

.trim-gain-axis-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.trim-gain-axis-head h5 {
  font-size: 12px;
}

.trim-gain-axis-head small {
  overflow: hidden;
  color: var(--muted);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trim-gain-chart {
  padding: 6px 6px 0;
  background: color-mix(in srgb, var(--surface) 98%, #e8f2f8);
}

.control-effector-chart svg {
  cursor: grab;
  touch-action: none;
}

.control-effector-chart {
  position: relative;
}

.control-effector-chart.is-dragging svg {
  cursor: grabbing;
}

.control-effect-crosshair {
  stroke: #334155;
  stroke-width: 1;
  stroke-dasharray: 3 3;
  pointer-events: none;
  vector-effect: non-scaling-stroke;
}

.control-effect-zero-line {
  stroke: color-mix(in srgb, var(--text) 58%, transparent);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}

.trim-analysis-chart svg .control-effect-zero-tick {
  fill: var(--text);
  font-weight: 700;
}

.control-effect-tooltip {
  position: absolute;
  z-index: 4;
  display: grid;
  gap: 4px;
  width: max-content;
  min-width: 154px;
  max-width: min(220px, calc(100% - 16px));
  padding: 7px 8px;
  border: 1px solid color-mix(in srgb, var(--line) 70%, #334155);
  border-radius: 6px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: 0 5px 15px rgb(15 23 42 / 16%);
  color: var(--text);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.control-effect-tooltip[hidden] {
  display: none;
}

.control-effect-tooltip > strong {
  padding-bottom: 3px;
  border-bottom: 1px solid var(--line);
}

.control-effect-tooltip > span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.trim-gain-reference,
.trim-gain-observed {
  vector-effect: non-scaling-stroke;
}

.trim-gain-reference {
  stroke: #64748b;
  stroke-width: 1;
  stroke-dasharray: 4 3;
}

.trim-gain-reference-label {
  fill: #64748b !important;
  font-size: 8px !important;
}

.trim-gain-observed {
  stroke: #dc2626;
  stroke-width: 1.5;
  stroke-dasharray: 2 3;
}

.trim-analysis-chart-legend i.is-observed {
  border-color: #dc2626;
  border-top-style: dashed;
}

.trim-gain-table-wrap {
  margin-top: 7px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.trim-gain-table {
  width: 100%;
  min-width: 360px;
  border-collapse: collapse;
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}

.trim-gain-scale-card .trim-gain-table {
  min-width: 0;
  table-layout: fixed;
}

.trim-gain-scale-card .trim-gain-table th {
  white-space: normal;
}

.trim-gain-table th,
.trim-gain-table td {
  padding: 5px 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  text-align: right;
  white-space: nowrap;
}

.trim-gain-table th:first-child,
.trim-gain-table td:first-child {
  text-align: left;
}

.trim-gain-table th {
  background: var(--surface-2);
  color: var(--muted);
  font-weight: 750;
}

.trim-gain-table tbody tr:last-child td {
  border-bottom: 0;
}

.trim-gain-table td small {
  display: block;
  color: var(--muted);
  font-size: 8px;
}

@media (max-width: 720px) {
  .trim-hover-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .trim-hover-motor-row {
    grid-template-columns: minmax(64px, 0.8fr) repeat(3, minmax(62px, 1fr));
    gap: 5px;
    padding-inline: 6px;
    font-size: 9px;
  }

  .trim-gain-schedule .trim-analysis-section-head {
    gap: 7px;
  }

  .trim-gain-axis-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .trim-gain-axis-head small {
    max-width: 100%;
  }

  .trim-gain-dialog-help {
    align-items: stretch;
    flex-direction: column;
  }

  .info-dialog.trim-gain-comparison-dialog > .info-dialog-head {
    margin-inline: 12px;
  }

  .info-dialog.trim-gain-comparison-dialog .trim-gain-comparison-dialog-body {
    padding: 0 12px 12px;
  }

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

@media (min-width: 721px) and (max-width: 1050px) {
  .trim-gain-dialog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.trim-analysis-diagnoses {
  display: grid;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.trim-analysis-diagnoses li {
  padding: 8px 9px;
  border-radius: 7px;
  background: #f4f7f9;
  color: #425968;
  font-size: 11px;
  line-height: 1.45;
}

.trim-analysis-diagnoses li.is-warning { background: #fff5df; color: #76520d; }
.trim-analysis-diagnoses li.is-ok { background: #eaf7f0; color: #236448; }

.trim-analysis-subtitle {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.trim-analysis-empty {
  padding: 28px 18px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 900px) {
  .trim-analysis-head {
    align-items: stretch;
    flex-direction: column;
  }

  .trim-analysis-toolbar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .trim-analysis-settings-control,
  .trim-analysis-settings-menu,
  .trim-analysis-settings-menu > summary {
    width: 100%;
  }

  .trim-analysis-run-actions {
    justify-content: flex-end;
  }

  .trim-analysis-beta-note {
    align-self: flex-start;
  }

  .summary-strip.trim-analysis-selection-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .trim-analysis-range > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .trim-analysis-range button {
    grid-column: 1 / -1;
  }

  .trim-analysis-comparison-grid,
  .trim-analysis-log-grid,
  .trim-analysis-preview-grid {
    grid-template-columns: 1fr;
  }

  .trim-analysis-comparison-column + .trim-analysis-comparison-column,
  .trim-analysis-log-card + .trim-analysis-log-card {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .trim-analysis-preview-card + .trim-analysis-preview-card {
    border-top: 1px solid var(--line);
    border-left: 0;
  }
}

@media (max-width: 600px) {
  .trim-analysis-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .trim-analysis-run-actions {
    grid-column: 1;
  }

  .trim-analysis-run-actions .primary-button {
    flex: 1 1 auto;
  }

  .trim-analysis-settings-panel {
    right: auto;
    left: 0;
  }
}

.panel,
.chart-panel,
.param-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.panel {
  padding: 14px;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.panel-head h2,
.chart-head h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: 0;
}

.data-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 36px;
  margin-bottom: 4px;
}

.archive-summary {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
  white-space: nowrap;
}

.panel-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.table-view-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.table-view-control select {
  min-height: 36px;
  height: 36px;
  padding-top: 3px;
  padding-bottom: 3px;
  font-size: 12px;
}

.show-hidden-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 36px;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.show-hidden-toggle input {
  margin: 0;
}

.data-list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 5px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.data-list-options,
.data-list-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.data-list-options {
  flex-wrap: wrap;
}

.data-list-actions {
  flex: 0 0 auto;
}

.data-list-actions > button {
  min-height: 36px;
  height: 36px;
  white-space: nowrap;
}

.data-toolbar-label,
.data-control-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}

.data-controls {
  display: grid;
  gap: 8px;
  padding-top: 10px;
}

.data-upload-controls {
  margin-top: 9px;
  padding: 10px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--surface-2);
  box-shadow: inset 3px 0 0 var(--accent);
}

.data-panel > .data-controls:not(.data-upload-controls) {
  margin-top: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-soft);
}

.data-upload-controls .data-control-label {
  color: var(--text);
  font-weight: 700;
}

.data-control-row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
}

.data-filter-row {
  grid-template-columns: minmax(0, 1fr);
}

.data-control-label {
  display: flex;
  align-items: center;
  min-height: 36px;
}

.upload-workspace {
  display: grid;
  width: min(100%, 1140px);
  min-width: 0;
  gap: 8px;
}

.upload-form {
  display: grid;
  grid-template-columns:
    minmax(220px, 290px)
    108px
    minmax(190px, 220px)
    378px
    minmax(104px, max-content);
  gap: 8px;
  align-items: center;
}

.upload-form.is-guest {
  grid-template-columns:
    minmax(260px, 390px)
    108px
    378px
    minmax(104px, max-content);
}

.upload-form[aria-busy="true"] .upload-team-picker {
  pointer-events: none;
  opacity: 0.65;
}

.upload-progress-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 34%);
  align-items: center;
  gap: 10px;
  padding-top: 7px;
  border-top: 1px solid var(--line);
}

.upload-progress-panel[hidden] {
  display: none;
}

.upload-progress-copy {
  display: flex;
  align-items: baseline;
  min-width: 0;
  gap: 8px;
  font-size: 12px;
}

.upload-progress-copy strong {
  flex: 0 0 auto;
  color: var(--text);
  font-size: 12px;
}

.upload-progress-copy span {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload-progress-panel[data-tone="error"] .upload-progress-copy strong {
  color: #b42318;
}

.upload-progress-track {
  position: relative;
  width: 100%;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}

.upload-progress-fill {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 140ms ease;
}

.upload-progress-track.is-indeterminate .upload-progress-fill {
  position: absolute;
  width: 34%;
  animation: progress-slide 1.1s infinite ease-in-out;
}

.upload-form > input[type="file"],
.upload-form > select,
.upload-form > .upload-note-input,
.upload-form > button,
.upload-form > .upload-team-picker {
  width: 100%;
  min-width: 0;
}

.upload-form > input[type="file"],
.upload-form > select,
.upload-form > .upload-note-input,
.upload-form > button,
.upload-team-picker summary {
  min-height: 36px;
  height: 36px;
}

.upload-form button {
  min-width: 104px;
  padding-right: 16px;
  padding-left: 16px;
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  white-space: nowrap;
}

.upload-data-notice {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.upload-data-notice summary {
  width: fit-content;
  color: var(--accent);
  cursor: pointer;
}

.upload-data-notice p {
  max-width: 980px;
  margin: 5px 0 0;
}

.upload-team-picker {
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.upload-team-picker summary {
  display: flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  min-height: 36px;
  padding: 5px 28px 5px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  list-style: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload-team-picker summary::-webkit-details-marker {
  display: none;
}

.upload-team-picker summary::after {
  content: "▾";
  flex: 0 0 auto;
  margin-left: auto;
  padding-left: 6px;
  color: var(--muted);
  font-size: 11px;
}

.upload-team-picker[open] summary::after {
  content: "▴";
}

.upload-team-options {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  z-index: 20;
  display: grid;
  gap: 4px;
  width: max(170px, 100%);
  max-width: min(360px, calc(100vw - 24px));
  max-height: 300px;
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.upload-default-team-control {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 2px 4px 8px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}

.upload-default-team-control select {
  min-width: 0;
  width: 100%;
  height: 30px;
  padding: 3px 24px 3px 7px;
  font-size: 12px;
}

.upload-team-option-list {
  display: grid;
  gap: 4px;
}

.upload-team-option {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 28px;
  padding: 4px 6px;
  border-radius: 6px;
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
}

.upload-team-option span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload-team-option small {
  flex: 0 0 auto;
  padding: 1px 5px;
  border-radius: 4px;
  background: #e7f2f5;
  color: #176078;
  font-size: 10px;
  font-weight: 700;
}

.upload-team-option:hover {
  background: var(--surface-2);
}

.upload-team-option input {
  width: auto;
  margin: 0;
}

.upload-team-empty {
  color: var(--muted);
  font-size: 12px;
}

.log-filters {
  display: grid;
  grid-template-columns:
    max-content
    116px
    96px
    minmax(200px, 300px)
    minmax(200px, 260px)
    minmax(132px, 160px)
    max-content;
  justify-content: start;
  gap: 5px;
  align-items: center;
}

.log-filters input[type="date"],
.log-filters select {
  width: 100%;
}

#logSearchInput {
  width: 100%;
  max-width: 300px;
}

#logTableViewSelect {
  min-width: 116px;
}

#logPageSizeSelect {
  min-width: 92px;
}

.log-filters > :not(.compact-options-disclosure) {
  min-width: 0;
  min-height: 36px;
  height: 36px;
}

.log-filter-toggle {
  justify-content: center;
  padding: 0 8px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--surface);
  font-size: 11px;
}

.log-filter-toggle:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.log-filters button {
  padding-right: 7px;
  padding-left: 7px;
  font-size: 11px;
  white-space: nowrap;
}


.compact-options-disclosure {
  position: relative;
  min-width: 0;
}

.compact-options-disclosure > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}

.compact-options-disclosure > summary::-webkit-details-marker {
  display: none;
}

.compact-options-disclosure > summary::after {
  content: "▾";
  color: var(--muted);
  font-size: 10px;
}

.compact-options-disclosure[open] > summary {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.compact-options-disclosure[open] > summary::after {
  content: "▴";
}

.compact-options-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.log-filter-more {
  justify-self: end;
}

.log-filter-more-panel {
  grid-template-columns: 1fr;
  width: min(390px, calc(100vw - 32px));
}

.log-filter-more-panel > * {
  min-width: 0;
  min-height: 34px;
}

.log-filter-more-panel .log-filter-toggle {
  min-height: 34px;
  height: auto;
  line-height: 1.25;
  white-space: normal;
}

.log-filter-date-row,
.log-filter-option-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.log-filter-action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.log-filter-date-field {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.log-filter-select-field {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.log-filter-select-field select {
  width: 100%;
  min-width: 0;
  min-height: 34px;
}

.log-filter-date-field input,
.log-filter-action-row button {
  width: 100%;
  min-width: 0;
  min-height: 34px;
}

.log-filter-option-row .show-hidden-toggle {
  justify-content: flex-start;
  min-width: 0;
}

.log-filter-summary {
  min-height: 18px;
  margin: 9px 0 7px;
  color: var(--muted);
  font-size: 12px;
}

.log-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 38px;
  padding: 5px 2px 0;
  color: var(--muted);
  font-size: 12px;
}

.log-pagination[hidden] {
  display: none;
}

.log-pagination-controls {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.log-pagination-controls button {
  min-width: 32px;
  min-height: 30px;
  padding: 3px 8px;
}

.log-pagination-controls span {
  min-width: 68px;
  text-align: center;
}

.log-table-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  max-height: none;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-gutter: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.mobile-upload-toggle {
  display: none;
}

.log-table {
  width: 100%;
  min-width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12.5px;
}

.log-table[data-view="basic"] {
  min-width: 1468px;
}

.log-table[data-view="full"] {
  min-width: 2050px;
}

.log-table[data-view="basic"] [data-log-column="compare"] { width: 50px; }
.log-table[data-view="basic"] [data-log-column="label"] { width: 190px; }
.log-table[data-view="basic"] [data-log-column="airframe"] { width: 120px; }
.log-table[data-view="basic"] [data-log-column="date"] { width: 130px; }
.log-table[data-view="basic"] [data-log-column="duration"] { width: 76px; }
.log-table[data-view="basic"] [data-log-column="speed"],
.log-table[data-view="basic"] [data-log-column="airspeed"],
.log-table[data-view="basic"] [data-log-column="altitude"] { width: 76px; }
.log-table[data-view="basic"] [data-log-column="type"] { width: 68px; }
.log-table[data-view="basic"] [data-log-column="place"] { width: 142px; }
.log-table[data-view="basic"] [data-log-column="weather"] {
  width: 180px;
  min-width: 180px;
}
.log-table[data-view="basic"] [data-log-column="note"] { width: 192px; }
.log-table[data-view="basic"] [data-log-column="diagnostics"] { width: 92px; }

.log-table[data-view="full"] [data-log-column="compare"] { width: 2%; }
.log-table[data-view="full"] [data-log-column="label"] { width: 7.5%; }
.log-table[data-view="full"] [data-log-column="visibility"] { width: 3.5%; }
.log-table[data-view="full"] [data-log-column="airframe"] { width: 4.5%; }
.log-table[data-view="full"] [data-log-column="date"] { width: 5%; }
.log-table[data-view="full"] [data-log-column="duration"] { width: 3%; }
.log-table[data-view="full"] [data-log-column="speed"],
.log-table[data-view="full"] [data-log-column="airspeed"],
.log-table[data-view="full"] [data-log-column="altitude"] { width: 3%; }
.log-table[data-view="full"] [data-log-column="type"] { width: 2.5%; }
.log-table[data-view="full"] [data-log-column="firmware"] { width: 4%; }
.log-table[data-view="full"] [data-log-column="hardware"] { width: 5.5%; }
.log-table[data-view="full"] [data-log-column="place"] { width: 5.5%; }
.log-table[data-view="full"] [data-log-column="weather"] { width: 10%; }
.log-table[data-view="full"] [data-log-column="note"] { width: 5%; }
.log-table[data-view="full"] [data-log-column="pilot"] { width: 4%; }
.log-table[data-view="full"] [data-log-column="takeoff-weight"] { width: 3.2%; }
.log-table[data-view="full"] [data-log-column="center-of-gravity"] { width: 4%; }
.log-table[data-view="full"] [data-log-column="configuration-info"] { width: 5%; }
.log-table[data-view="full"] [data-log-column="attachments"] { width: 2.5%; }
.log-table[data-view="full"] [data-log-column="diagnostics"] { width: 4%; }
.log-table[data-view="full"] [data-log-column="size"] { width: 2.5%; }
.log-table[data-view="full"] [data-log-column="owner"] { width: 4%; }
.log-table[data-view="full"] [data-log-column="uploaded"] { width: 4%; }
.log-table[data-view="full"] [data-log-column="filename"] { width: 6.5%; }
.log-table[data-view="full"] [data-log-column="duplicate"] { width: 3%; }
.log-table[data-view="full"] [data-log-column="manage"] { width: 4.5%; }

.log-table [data-log-column="duration"],
.log-table [data-log-column="speed"],
.log-table [data-log-column="airspeed"],
.log-table [data-log-column="altitude"] {
  width: 1%;
  white-space: nowrap;
}

.speed-value-cell {
  min-width: 76px;
  white-space: nowrap;
}

.log-table [data-log-column="weather"] .weather-pill {
  width: 100%;
  max-width: none;
  overflow-wrap: normal;
  white-space: nowrap;
}

.log-table[data-view="basic"] td:is(
  [data-log-column="label"],
  [data-log-column="airframe"],
  [data-log-column="place"],
  [data-log-column="note"]
) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.log-table[data-view="full"] th {
  overflow-wrap: break-word;
  white-space: normal;
}

.log-table[data-view="full"] :is(
  td[data-log-column="label"],
  td[data-log-column="visibility"],
  td[data-log-column="airframe"],
  td[data-log-column="place"],
  td[data-log-column="weather"],
  td[data-log-column="note"],
  td[data-log-column="pilot"],
  td[data-log-column="configuration-info"],
  td[data-log-column="owner"],
  td[data-log-column="filename"],
  td[data-log-column="manage"]
) {
  overflow-wrap: anywhere;
  white-space: normal;
}

.log-table[data-view="full"] [data-log-column="weather"] .weather-pill {
  line-height: 1.3;
  white-space: normal;
}

.log-table[data-view="full"] [data-log-column="label"] .link-button {
  max-width: 100%;
  max-height: 2.6em;
  line-height: 1.3;
  overflow-wrap: anywhere;
  white-space: normal;
}

.log-table[data-view="full"] :is(
  [data-log-column="duration"],
  [data-log-column="speed"],
  [data-log-column="airspeed"],
  [data-log-column="altitude"],
  [data-log-column="firmware"],
  [data-log-column="hardware"]
) {
  min-width: 0;
  max-width: none;
}

.log-table[data-view="full"] :is(
  [data-log-column="date"],
  [data-log-column="duration"],
  [data-log-column="speed"],
  [data-log-column="airspeed"],
  [data-log-column="altitude"],
  [data-log-column="uploaded"]
) {
  white-space: normal;
}

.log-table[data-view="full"] :is(
  .share-badge,
  .diagnostic-pill,
  .danger-link-button,
  .file-download-link
) {
  max-width: 100%;
  line-height: 1.25;
  overflow-wrap: anywhere;
  white-space: normal;
}

.log-table[data-view="full"] .share-badge {
  min-width: 0;
  padding-right: 3px;
  padding-left: 3px;
}

.place-compact {
  display: inline-block;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}

.metadata-external-link {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  gap: 4px;
  overflow: hidden;
  color: var(--accent-strong);
  font-weight: 650;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metadata-external-link:hover,
.metadata-external-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.metadata-external-link > span {
  flex: 0 0 auto;
  font-size: 10px;
}

.log-table[data-view="basic"] :is(
  [data-log-column="visibility"],
  [data-log-column="firmware"],
  [data-log-column="hardware"],
  [data-log-column="size"],
  [data-log-column="owner"],
  [data-log-column="uploaded"],
  [data-log-column="filename"],
  [data-log-column="pilot"],
  [data-log-column="takeoff-weight"],
  [data-log-column="center-of-gravity"],
  [data-log-column="configuration-info"],
  [data-log-column="attachments"],
  [data-log-column="duplicate"],
  [data-log-column="manage"]
) {
  display: none;
}

.log-table [data-log-column="firmware"],
.log-table [data-log-column="hardware"] {
  min-width: 118px;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-count-cell {
  text-align: center !important;
  white-space: nowrap;
}

.flight-mass-cell {
  text-align: right !important;
  white-space: nowrap !important;
}

.log-table th,
.log-table td {
  box-sizing: border-box;
  padding: 7px 8px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.log-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background-clip: padding-box;
  background: var(--table-head);
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.log-table[data-view="basic"] th {
  line-height: 1.2;
  overflow-wrap: break-word;
  white-space: normal;
}

.log-table th[data-sort] {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.log-table th[data-sort]::after {
  content: "↕";
  margin-left: 4px;
  color: var(--line-strong);
  font-size: 10px;
}

.log-table th.is-sorted {
  color: var(--accent-strong);
}

.log-table th.is-sorted[data-direction="ascending"]::after {
  content: "↑";
  color: var(--accent-strong);
}

.log-table th.is-sorted[data-direction="descending"]::after {
  content: "↓";
  color: var(--accent-strong);
}

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

.log-table tbody tr:nth-child(even) {
  background: var(--surface-soft);
}

.log-table tbody tr:hover,
.log-table tbody tr.is-active {
  background: var(--row-hover);
}

.log-table tbody tr.is-selected {
  background: var(--row-selected);
}

.log-table tbody tr.is-active,
.log-table tbody tr.is-active.is-selected,
.log-table tbody tr.is-active.is-hidden-log {
  background: var(--row-active);
  color: var(--text);
}

.log-table tbody tr.is-active td:first-child {
  box-shadow: inset 5px 0 0 var(--accent);
}

.log-table tbody tr.is-active .link-button {
  color: var(--accent-strong);
  font-weight: 750;
}

.log-table tbody tr.is-hidden-log {
  color: #7d8a93;
  background: #f6f8f9;
}

.log-table tbody tr.is-hidden-log .link-button {
  color: #6f7e87;
}

.log-table tbody tr.is-missing-time .takeoff-cell {
  color: #b42318;
  font-weight: 650;
}

.hidden-badge {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  margin-left: 5px;
  padding: 1px 5px;
  border: 1px solid #c7d0d6;
  border-radius: 5px;
  color: #6f7e87;
  font-size: 11px;
  font-weight: 650;
  vertical-align: middle;
}

.log-table tbody tr.is-selected td:first-child {
  box-shadow: inset 3px 0 0 var(--accent);
}

.check-col {
  width: 54px;
  text-align: center;
}

.compare-checkbox {
  width: 16px;
  height: 16px;
}

.file-cell {
  color: var(--muted);
}

.file-download-link {
  display: inline-block;
  max-width: 240px;
  overflow: hidden;
  color: var(--accent-strong);
  font-weight: 650;
  text-decoration: none;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}

.file-download-link::after {
  content: " \2193";
  font-size: 11px;
  font-weight: 800;
}

.file-download-link:hover,
.file-download-link:focus-visible {
  text-decoration: underline;
}

.compare-tray {
  position: sticky;
  top: 10px;
  z-index: 18;
  display: grid;
  grid-template-columns: auto auto auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  padding: 9px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: rgba(247, 249, 250, 0.97);
  box-shadow: var(--shadow-float);
  backdrop-filter: blur(8px);
}

.compare-tray-heading {
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}

.compare-tray-heading strong {
  font-size: 13px;
}

.compare-tray-heading span,
.compare-tray-empty {
  color: var(--muted);
  font-size: 12px;
}

.compare-clear-button {
  min-height: 24px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--accent-strong);
  font-size: 11px;
}

.compare-clear-button:hover:not(:disabled) {
  text-decoration: underline;
}

.compare-tray-items {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  max-width: min(840px, calc(100vw - 360px));
  overflow-x: auto;
}

.compare-chip {
  display: inline-flex;
  flex: 0 1 280px;
  align-items: center;
  gap: 7px;
  min-width: 150px;
  max-width: 280px;
  padding: 4px 4px 4px 9px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--compare-color);
  border-radius: 6px;
  background: var(--surface);
}

.compare-chip-text {
  display: grid;
  min-width: 0;
}

.compare-chip strong,
.compare-chip small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compare-chip strong {
  font-size: 12px;
}

.compare-chip small {
  color: var(--muted);
  font-size: 10px;
}

.compare-chip button {
  width: 25px;
  min-height: 25px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 18px;
}

.compare-open-button,
.primary-report-button {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  font-weight: 650;
  white-space: nowrap;
}

.duplicate-cell {
  min-width: 78px;
  white-space: nowrap;
}

.duplicate-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 6px;
  border: 1px solid #d8b25f;
  border-radius: 5px;
  background: #fff7df;
  color: #765014;
  font-size: 11px;
  font-weight: 700;
  cursor: help;
}

.log-title-line {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.log-title-line .link-button {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.duplicate-inline-badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 18px;
  padding: 1px 5px;
  border-radius: 4px;
  background: #fff1c7;
  color: #7a5100;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.log-duplicate-notice {
  grid-column: 1 / -1;
  padding: 12px;
  border: 1px solid #dfb44f;
  border-radius: 7px;
  background: #fff9e9;
  color: #5f4307;
}

.log-duplicate-notice-head {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

.log-duplicate-notice-head > span {
  display: inline-grid;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #a86b00;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  place-items: center;
}

.log-duplicate-notice strong,
.log-duplicate-notice p {
  margin: 0;
}

.log-duplicate-notice p,
.log-duplicate-notice small {
  color: #765b20;
  font-size: 11px;
  line-height: 1.45;
}

.log-duplicate-notice ul {
  display: grid;
  gap: 5px;
  margin: 9px 0;
  padding: 0;
  list-style: none;
}

.log-duplicate-notice li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 9px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.72);
}

.log-duplicate-match-copy {
  min-width: 0;
}

.log-duplicate-notice li strong,
.log-duplicate-notice li span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.log-duplicate-notice li span {
  margin-top: 2px;
  color: #806b3d;
  font-size: 10px;
}

.log-duplicate-notice li .link-button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.log-duplicate-match-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.log-duplicate-match-actions button {
  white-space: nowrap;
}

.duplicate-empty {
  color: var(--muted);
}

.visibility-cell,
.owner-cell,
.upload-cell,
.diagnostic-cell {
  white-space: nowrap;
}

.owner-cell,
.upload-cell {
  color: var(--muted);
}

.takeoff-cell {
  white-space: nowrap;
}

.table-time-warning {
  margin-left: 2px;
  color: #b42318;
  font-weight: 800;
  cursor: help;
}

.table-time-missing {
  color: #b42318;
  font-weight: 650;
  cursor: help;
}

.link-button {
  min-height: 0;
  max-width: 220px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-strong);
  font-weight: 650;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.danger-link-button {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #99411b;
  font-size: 12px;
  white-space: nowrap;
}

.danger-link-button:hover {
  text-decoration: underline;
}

.hard-delete-button {
  margin-left: 8px;
  color: #b42318;
  font-weight: 700;
}

.log-type {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 10.5px;
  font-weight: 700;
}

.weather-pill {
  display: inline-flex;
  align-items: center;
  max-width: 230px;
  min-height: 22px;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--muted);
  line-height: 1.25;
  overflow-wrap: anywhere;
  text-align: left;
  white-space: normal;
}

.weather-pill.is-ok {
  border-color: #b8d8c4;
  background: #eef8f1;
  color: #275f39;
}

.weather-pill.is-error {
  border-color: #e2b9a7;
  background: #fff2ea;
  color: #99411b;
}

.weather-pill.is-pending {
  border-style: dashed;
}

.weather-pill.is-muted {
  opacity: 0.72;
}

.diagnostic-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.diagnostic-pill.is-ok {
  border-color: #b8d8c4;
  background: #eef8f1;
  color: #275f39;
}

.diagnostic-pill.is-info {
  border-color: #b7cde8;
  background: #eef5ff;
  color: #215a92;
}

.diagnostic-pill.is-warning {
  border-color: #e4cf97;
  background: #fff8e5;
  color: #815514;
}

.diagnostic-pill.is-error {
  border-color: #e2b9a7;
  background: #fff2ea;
  color: #99411b;
}

.diagnostic-pill.is-muted {
  opacity: 0.72;
}

.diagnostic-open-button {
  cursor: pointer;
  font-family: inherit;
}

.diagnostic-open-button:hover,
.diagnostic-open-button:focus-visible {
  filter: brightness(0.97);
  outline: 2px solid color-mix(in srgb, currentColor 28%, transparent);
  outline-offset: 2px;
}

.log-detail-panel {
  margin-top: 10px;
}

.detail-permission-note {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 10px;
  border-left: 3px solid #7c8aa0;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.detail-permission-note strong {
  flex: 0 0 auto;
  color: var(--text);
}

.detail-editor.is-read-only :is(input, select, textarea):disabled {
  opacity: 0.78;
  cursor: not-allowed;
}

.share-badge {
  display: inline-block;
  min-width: 42px;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
  text-align: center;
  vertical-align: 1px;
}

.share-badge.is-private {
  border-color: #d8c4a2;
  background: #fff7e8;
  color: #815514;
}

.share-badge.is-team {
  border-color: #aac8d8;
  background: #eaf5fa;
  color: #17607a;
}

.share-badge.is-public {
  border-color: #b8d8c4;
  background: #eef8f1;
  color: #27613b;
}

.demo-badge {
  display: inline-block;
  margin-left: 3px;
  padding: 2px 5px;
  border: 1px solid #e5bd67;
  border-radius: 5px;
  background: #fff7e6;
  color: #805300;
  font-size: 9px;
  font-weight: 750;
  text-transform: uppercase;
  vertical-align: 1px;
}

.demo-log-readonly {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px 12px;
  font-size: 12px;
}

.demo-log-readonly strong {
  color: var(--text);
}

.demo-log-readonly span {
  color: var(--muted);
}

.user-admin-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 12px;
  position: fixed;
  top: 54px;
  left: 18px;
  right: 18px;
  z-index: 100;
  width: min(1800px, calc(100vw - 36px));
  height: min(980px, calc(100vh - 72px));
  max-height: calc(100vh - 72px);
  margin: 0 auto;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
  box-shadow:
    0 18px 44px rgba(15, 23, 42, 0.22),
    0 0 0 9999px rgba(15, 23, 42, 0.28);
}

.user-admin-panel[hidden] {
  display: none;
}

.user-admin-panel.is-team-surface {
  grid-template-rows: auto minmax(0, 1fr);
}

.user-admin-panel.is-directory-workspace {
  top: 24px;
  width: min(1800px, calc(100vw - 36px));
  height: calc(100vh - 48px);
  max-height: calc(100vh - 48px);
  grid-template-rows: auto auto minmax(0, 1fr);
}

.admin-directory-workspace-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
}

.admin-directory-workspace-nav span {
  color: var(--muted);
  font-size: 11px;
}

.admin-directory-workspace-loading {
  display: grid;
  place-content: center;
  gap: 6px;
  min-height: 320px;
  color: var(--muted);
  text-align: center;
}

.admin-directory-workspace-loading strong {
  color: var(--text);
}

.admin-panel-head,
.admin-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.admin-panel-head h3,
.admin-section-head h4 {
  margin: 0;
  color: var(--text);
}

.admin-panel-head p,
.admin-section-head p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.admin-close-button,
.admin-detail-close {
  display: inline-grid;
  place-items: center;
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
}

.admin-close-button:hover,
.admin-detail-close:hover {
  border-color: var(--line);
  background: var(--surface-2);
  color: var(--text);
}

.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  column-gap: clamp(12px, 1.4vw, 20px);
  row-gap: 0;
  border-bottom: 1px solid var(--line);
}

.admin-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 2px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  white-space: nowrap;
}

.admin-tabs button:hover {
  background: transparent;
  color: var(--text);
}

.admin-tabs button.is-active {
  border-bottom-color: var(--accent);
  color: var(--text);
  font-weight: 700;
}

.admin-tabs button span {
  display: inline-grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.admin-tabs button.is-active span {
  background: #e4f1f4;
  color: #15556b;
}

.admin-tabs button .admin-attention-badge,
.admin-tabs button.is-active .admin-attention-badge {
  background: #b54708;
  color: #fff;
}

.admin-section-head span {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.admin-sections {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

body.admin-panel-open {
  overflow: hidden;
  overscroll-behavior: none;
}

.user-admin-panel {
  overscroll-behavior: contain;
}

/* Token and storage settings contain their own wide tables. Keep one vertical
   scroll surface for the whole tab so administrators do not have to manage an
   outer scrollbar and nested table scrollbars at the same time. */
.admin-sections.is-single-scroll {
  overflow: hidden;
}

.admin-sections.is-single-scroll > .admin-section {
  height: 100%;
  min-height: 0;
  padding-right: 6px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.admin-sections.is-single-scroll .admin-table-wrap {
  max-height: none;
  overflow-x: auto;
  overflow-y: visible;
}

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

.admin-team-review-queue {
  display: grid;
  gap: 9px;
  padding: 11px 12px;
  border: 1px solid #efc078;
  border-radius: 7px;
  background: #fff8eb;
}

.admin-team-review-head,
.admin-team-review-item,
.admin-team-review-actions {
  display: flex;
  align-items: center;
}

.admin-team-review-head {
  justify-content: space-between;
  gap: 12px;
}

.admin-team-review-head h4,
.admin-team-review-head p {
  margin: 0;
}

.admin-team-review-head p {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.admin-team-review-head > span {
  color: #985d0b;
  font-size: 11px;
  font-weight: 700;
}

.admin-team-review-list {
  display: grid;
  gap: 5px;
}

.admin-team-review-item {
  display: grid;
  grid-template-columns: auto minmax(150px, 1fr) minmax(170px, 1fr) auto;
  gap: 10px;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid rgba(201, 139, 43, 0.25);
  border-radius: 6px;
  background: var(--surface);
}

.admin-team-review-type {
  padding: 3px 7px;
  border-radius: 999px;
  background: #fce8c5;
  color: #8a5407;
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
}

.admin-team-review-identity,
.admin-team-review-context {
  display: grid;
  min-width: 0;
}

.admin-team-review-identity strong,
.admin-team-review-identity small,
.admin-team-review-context span,
.admin-team-review-context small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-team-review-identity small,
.admin-team-review-context small {
  color: var(--muted);
  font-size: 10px;
}

.admin-team-review-context span {
  font-size: 11px;
}

.admin-team-review-actions {
  gap: 5px;
}

.admin-user-toolbar.is-approval-mode > select {
  display: none;
}

.admin-user-approval-queue {
  display: grid;
  gap: 8px;
  padding: 11px 12px;
  border: 1px solid #efc078;
  border-radius: 7px;
  background: #fff8eb;
}

.admin-user-approval-head,
.admin-user-approval-actions {
  display: flex;
  align-items: center;
}

.admin-user-approval-head {
  justify-content: space-between;
  gap: 12px;
}

.admin-user-approval-head h5,
.admin-user-approval-head p {
  margin: 0;
}

.admin-user-approval-head p {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.admin-user-approval-head > span {
  color: #985d0b;
  font-size: 11px;
  font-weight: 700;
}

.admin-user-approval-list {
  display: grid;
  gap: 5px;
}

.admin-user-approval-item {
  display: grid;
  grid-template-columns: minmax(180px, 1.25fr) minmax(170px, 1fr) minmax(130px, auto) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(201, 139, 43, 0.25);
  border-radius: 6px;
  background: var(--surface);
}

.admin-user-approval-identity,
.admin-user-approval-profile,
.admin-user-approval-date {
  display: grid;
  min-width: 0;
}

.admin-user-approval-identity strong,
.admin-user-approval-identity small,
.admin-user-approval-profile span,
.admin-user-approval-profile small,
.admin-user-approval-date span,
.admin-user-approval-date small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-user-approval-identity small,
.admin-user-approval-profile small,
.admin-user-approval-date small {
  color: var(--muted);
  font-size: 10px;
}

.admin-user-approval-profile span,
.admin-user-approval-date span {
  font-size: 11px;
}

.admin-user-approval-actions {
  justify-content: flex-end;
  gap: 5px;
}

.admin-dashboard-section {
  gap: 14px;
  padding-bottom: 4px;
}

.admin-dashboard-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-dashboard-toolbar > div {
  min-width: 0;
}

.admin-dashboard-toolbar > .link-button {
  flex: 0 0 auto;
  min-width: max-content;
  white-space: nowrap;
}

.admin-dashboard-toolbar p {
  margin: 3px 0 0 17px;
  color: var(--muted);
  font-size: 11px;
}

.admin-dashboard-live {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.admin-dashboard-live strong {
  color: var(--text);
  font-size: 13px;
}

.admin-dashboard-live > span:last-child {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-live-dot {
  display: inline-block;
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #159447;
  box-shadow: 0 0 0 3px rgba(21, 148, 71, 0.13);
}

.admin-dashboard-warning {
  padding: 8px 10px;
  border-left: 3px solid #c37a05;
  background: #fff8e8;
  color: #71450a;
  font-size: 12px;
}

.admin-dashboard-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}

.admin-dashboard-metric {
  display: grid;
  align-content: start;
  min-width: 0;
  min-height: 92px;
  padding: 11px 12px;
  border-right: 1px solid var(--line);
  background: var(--surface);
}

.admin-dashboard-metric.is-clickable {
  width: 100%;
  border: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.admin-dashboard-metric.is-clickable:hover,
.admin-dashboard-metric.is-clickable:focus-visible {
  background: #eaf5f8;
  box-shadow: inset 0 -3px 0 var(--accent);
}

.admin-dashboard-metric:last-child {
  border-right: 0;
}

.admin-dashboard-metric.is-live {
  background: #f2faf5;
}

.admin-dashboard-metric > span {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-dashboard-metric > strong {
  margin-top: 5px;
  overflow: hidden;
  color: var(--text);
  font-size: 23px;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-dashboard-metric.is-live > strong {
  color: #0f7637;
}

.admin-dashboard-metric > small {
  margin-top: 5px;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-dashboard-statistics {
  display: grid;
  gap: 12px;
}

.admin-dashboard-detail-layer {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: grid;
  padding: clamp(12px, 4vh, 40px) clamp(12px, 4vw, 54px);
  place-items: center;
}

.admin-dashboard-detail-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: rgba(15, 23, 42, 0.42);
  cursor: default;
}

.admin-dashboard-detail-backdrop:hover {
  background: rgba(15, 23, 42, 0.42);
}

.admin-dashboard-detail-dialog {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, auto);
  gap: 12px;
  width: min(1120px, 100%);
  max-height: min(820px, calc(100vh - 48px));
  padding: 16px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
}

.admin-dashboard-detail-dialog > header {
  position: sticky;
  top: -16px;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: -16px -16px 0;
  padding: 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.admin-dashboard-detail-dialog > header h4,
.admin-dashboard-detail-dialog > header p {
  margin: 0;
}

.admin-dashboard-detail-dialog > header p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.admin-dashboard-detail-dialog > .admin-dashboard-list {
  max-height: none;
}

.admin-dashboard-statistics > header,
.admin-statistics-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-dashboard-statistics h4,
.admin-dashboard-statistics h5,
.admin-dashboard-statistics p {
  margin: 0;
}

.admin-dashboard-statistics header p,
.admin-statistics-detail-head span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.admin-statistics-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
}

.admin-statistics-actions select {
  min-width: 112px;
}

.admin-statistics-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.admin-statistics-chart-grid.is-single {
  grid-template-columns: minmax(0, 1fr);
}

.admin-statistics-chart-grid > section {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fbfcfc;
}

.admin-trend-chart {
  width: 100%;
  height: 168px;
  margin-top: 8px;
}

.admin-trend-chart svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.admin-trend-grid { stroke: #dce4e7; stroke-width: 1; vector-effect: non-scaling-stroke; }
.admin-trend-separator { stroke: #aebdc2; stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.admin-trend-bar { fill: #6bb7aa; }
.admin-trend-hit { fill: transparent; pointer-events: all; }
.admin-trend-total-line { fill: none; stroke: #185f70; stroke-width: 2; vector-effect: non-scaling-stroke; }

.admin-trend-axis,
.admin-trend-legend {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 10px;
}

.admin-trend-legend {
  justify-content: flex-start;
  margin-top: 5px;
}

.admin-trend-legend span::before {
  display: inline-block;
  width: 10px;
  height: 3px;
  margin-right: 5px;
  vertical-align: middle;
  background: #6bb7aa;
  content: "";
}

.admin-trend-legend .is-total::before { background: #185f70; }
.admin-statistics-empty { display: grid; min-height: 168px; place-items: center; color: var(--muted); font-size: 12px; }

.admin-dashboard-context-strip {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 28px;
  padding: 0 3px;
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.admin-dashboard-context-strip span + span {
  position: relative;
}

.admin-dashboard-context-strip span + span::before {
  position: absolute;
  top: 50%;
  left: -9px;
  width: 1px;
  height: 12px;
  background: var(--line);
  content: "";
  transform: translateY(-50%);
}

.admin-directory-launch-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.admin-directory-launch-grid > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding: 10px 12px;
  border-color: var(--line);
  background: var(--surface-2);
  color: var(--text);
  text-align: left;
}

.admin-directory-launch-grid > button:hover {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

.admin-directory-launch-grid span,
.admin-directory-launch-grid strong {
  display: block;
  min-width: 0;
}

.admin-directory-launch-grid strong {
  font-size: 13px;
}

.admin-directory-launch-grid small {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-directory-launch-grid b {
  color: var(--accent-strong);
  font-size: 18px;
}

.admin-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  min-height: 0;
}

.admin-dashboard-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  min-width: 0;
}

.admin-dashboard-overview-grid .admin-dashboard-visit-analytics,
.admin-dashboard-overview-grid .admin-dashboard-token-operations {
  min-width: 0;
  margin-top: 0;
}

.admin-dashboard-overview-grid .admin-dashboard-visit-metrics,
.admin-dashboard-overview-grid .admin-dashboard-token-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-dashboard-overview-grid .admin-dashboard-visit-metrics .admin-dashboard-metric,
.admin-dashboard-overview-grid .admin-dashboard-token-metrics .admin-dashboard-metric {
  min-height: 76px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.admin-dashboard-overview-grid .admin-dashboard-visit-metrics .admin-dashboard-metric:nth-child(2n),
.admin-dashboard-overview-grid .admin-dashboard-token-metrics .admin-dashboard-metric:nth-child(2n) {
  border-right: 0;
}

.admin-dashboard-overview-grid .admin-dashboard-visit-metrics .admin-dashboard-metric:last-child,
.admin-dashboard-overview-grid .admin-dashboard-token-metrics .admin-dashboard-metric:last-child {
  grid-column: 1 / -1;
  border-right: 0;
  border-bottom: 0;
}

.admin-dashboard-overview-grid .admin-dashboard-visit-grid {
  grid-template-columns: minmax(0, 1fr);
}

.admin-dashboard-block {
  display: grid;
  min-width: 0;
  border-top: 1px solid var(--line);
}

.admin-dashboard-block > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
  padding: 10px 2px 8px;
}

.admin-dashboard-block h4 {
  margin: 0;
  color: var(--text);
  font-size: 13px;
}

.admin-dashboard-block header p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.admin-dashboard-block > header > strong {
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.admin-feature-usage-summary {
  margin-top: 2px;
}

.admin-feature-usage-bars,
.admin-feature-usage-groups {
  display: grid;
  gap: 8px;
}

.admin-feature-usage-overview {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
  align-items: center;
  gap: 20px;
  padding: 4px 2px 14px;
}

.admin-feature-usage-chart {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.admin-feature-usage-donut {
  position: relative;
  display: grid;
  width: 132px;
  aspect-ratio: 1;
  border-radius: 50%;
  place-items: center;
}

.admin-feature-usage-donut::after {
  position: absolute;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--surface);
  content: "";
}

.admin-feature-usage-donut > span {
  position: relative;
  z-index: 1;
  display: grid;
  text-align: center;
}

.admin-feature-usage-donut strong {
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

.admin-feature-usage-donut small {
  color: var(--muted);
  font-size: 9px;
}

.admin-feature-usage-legend {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.admin-feature-usage-legend > div {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 10px;
}

.admin-feature-usage-legend i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.admin-feature-usage-legend span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-feature-usage-legend strong {
  font-variant-numeric: tabular-nums;
}

.admin-feature-usage-summary .admin-feature-usage-bars {
  grid-template-columns: minmax(0, 1fr);
  padding: 0;
}

.admin-feature-usage-row {
  display: grid;
  grid-template-columns: minmax(130px, 0.9fr) minmax(100px, 1.5fr) 48px;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.admin-feature-usage-row > div:first-child {
  display: grid;
  min-width: 0;
}

.admin-feature-usage-row strong,
.admin-feature-usage-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-feature-usage-row strong {
  font-size: 11px;
}

.admin-feature-usage-row span {
  color: var(--muted);
  font-size: 9px;
}

.admin-feature-usage-row > b {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.admin-feature-usage-track {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8eeec;
}

.admin-feature-usage-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.admin-feature-usage-dialog {
  width: min(980px, 100%);
}

.admin-feature-usage-totals {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.admin-feature-usage-totals span,
.admin-feature-usage-totals strong {
  padding: 5px 8px;
  border-radius: 5px;
  background: var(--surface-muted);
  font-size: 10px;
}

.admin-feature-usage-group {
  display: grid;
  gap: 7px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.admin-feature-usage-group > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.admin-feature-usage-group h5 {
  font-size: 12px;
}

.admin-feature-usage-group > header strong {
  color: var(--accent-strong);
  font-size: 12px;
}

.account-analysis-share-section > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.account-analysis-share-section {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: clamp(480px, 62vh, 620px);
  min-height: 0;
}

.admin-table-wrap.account-analysis-share-table-wrap {
  height: 100%;
  min-height: 0;
  max-height: none;
  overflow: auto;
}

.account-analysis-share-section h3,
.account-analysis-share-section p {
  margin: 0;
}

.account-analysis-share-section h3 {
  font-size: 14px;
}

.account-analysis-share-section p,
.account-analysis-share-section > header > span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.analysis-share-table-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.analysis-share-table-actions button {
  min-height: 28px;
  padding: 4px 8px;
  font-size: 10px;
}

.admin-dashboard-token-operations {
  margin-top: 2px;
}

.admin-dashboard-visit-analytics {
  margin-top: 2px;
}

.admin-dashboard-visit-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.admin-dashboard-visit-metrics .admin-dashboard-metric {
  min-height: 84px;
  border-bottom: 0;
}

.admin-dashboard-visit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, 0.8fr);
  gap: 12px;
  margin-top: 10px;
}

.admin-visit-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 112px;
  padding: 8px 6px 3px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(to bottom, transparent 49%, var(--line) 50%, transparent 51%);
}

.admin-visit-chart > span {
  position: relative;
  flex: 1 1 0;
  min-width: 4px;
  max-width: 28px;
  border-radius: 3px 3px 0 0;
  background: #cfd9df;
}

.admin-visit-chart > span > i {
  position: absolute;
  inset: 0 0 auto;
  display: block;
  border-radius: 3px 3px 0 0;
  background: #277f97;
}

.admin-visit-legend {
  display: flex;
  gap: 14px;
  padding-top: 6px;
  color: var(--muted);
  font-size: 10px;
}

.admin-visit-legend span::before {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 5px;
  border-radius: 2px;
  background: #cfd9df;
  content: "";
}

.admin-visit-legend .is-member::before {
  background: #277f97;
}

.admin-dashboard-location-list {
  display: grid;
  align-content: start;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.admin-dashboard-location-list > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
}

.admin-dashboard-location-list > div:last-child {
  border-bottom: 0;
}

.admin-dashboard-location-list span {
  color: var(--muted);
  text-align: right;
}

.admin-dashboard-privacy-note {
  margin: 9px 2px 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.admin-dashboard-token-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
}

.admin-dashboard-token-metrics .admin-dashboard-metric {
  border-bottom: 0;
}

.admin-dashboard-token-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.admin-dashboard-token-actions > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 6px;
  background: var(--surface-2);
  font-size: 11px;
}

.admin-dashboard-token-actions span {
  color: var(--muted);
  text-align: right;
}

.admin-dashboard-list {
  overflow: auto;
  max-height: 238px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}

.admin-dashboard-activity-log {
  margin-top: 2px;
}

.admin-dashboard-activity-log .admin-dashboard-list {
  overflow: visible;
  max-height: none;
}

.admin-dashboard-activity-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-dashboard-activity-controls select {
  min-height: 30px;
  padding: 3px 28px 3px 8px;
}

.admin-today-user-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
}

.admin-today-user-row:last-child {
  border-bottom: 0;
}

.admin-today-user-row > div {
  min-width: 0;
}

.admin-today-user-row > div:last-child {
  text-align: right;
}

.admin-today-user-row strong,
.admin-today-user-row span {
  display: block;
}

.admin-today-user-row span {
  overflow: hidden;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-dashboard-activity-log .admin-activity-row {
  grid-template-columns: 88px minmax(180px, 0.7fr) minmax(260px, 1.5fr);
  min-height: 44px;
}

.admin-online-row {
  display: grid;
  grid-template-columns: 10px minmax(160px, 1.1fr) minmax(150px, 1fr) minmax(82px, auto);
  align-items: center;
  gap: 9px;
  min-height: 54px;
  padding: 7px 9px;
  border-bottom: 1px solid var(--line);
}

.admin-online-row:last-child,
.admin-activity-row:last-child {
  border-bottom: 0;
}

.admin-online-person,
.admin-online-view,
.admin-online-seen,
.admin-activity-row > div {
  display: grid;
  min-width: 0;
}

.admin-online-person strong,
.admin-online-view strong,
.admin-online-seen strong,
.admin-activity-row strong {
  overflow: hidden;
  color: var(--text);
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-online-person span,
.admin-online-view span,
.admin-online-seen span,
.admin-activity-row span {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-online-seen {
  text-align: right;
}

.admin-activity-row {
  display: grid;
  grid-template-columns: 72px minmax(130px, 0.8fr) minmax(180px, 1.4fr);
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 6px 9px;
  border-bottom: 1px solid var(--line);
}

.admin-activity-row time {
  color: var(--muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.admin-dashboard-list-empty,
.admin-dashboard-empty {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 118px;
  padding: 18px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.admin-dashboard-empty {
  min-height: 260px;
}

.admin-dashboard-empty strong {
  color: var(--text);
}

.admin-dashboard-traffic {
  align-content: start;
}

.admin-hour-chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 104px;
  padding: 8px 5px 4px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(to bottom, transparent 24%, var(--line) 25%, transparent 26%, transparent 49%, var(--line) 50%, transparent 51%, transparent 74%, var(--line) 75%, transparent 76%);
}

.admin-hour-chart > span {
  flex: 1 1 0;
  min-width: 3px;
  max-width: 22px;
  border-radius: 2px 2px 0 0;
  background: #d9e2e7;
}

.admin-hour-chart > span.has-activity {
  background: #277f97;
}

.admin-hour-labels {
  display: flex;
  justify-content: space-between;
  padding: 5px 3px 0;
  color: var(--muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.admin-system-status {
  padding: 3px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.admin-system-status.is-ready {
  background: #e8f6ed;
  color: #0f7637;
}

.admin-system-status.is-degraded {
  background: #fff1e8;
  color: #a64519;
}

.admin-dashboard-system dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.admin-dashboard-system-priority {
  grid-template-columns: minmax(230px, 0.75fr) minmax(0, 2.25fr);
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--line);
  border-left: 3px solid #277f97;
  border-radius: 6px;
  background: var(--surface);
}

.admin-dashboard-system-priority > header {
  align-items: center;
  min-height: 66px;
  padding: 10px 12px;
  border-right: 1px solid var(--line);
}

.admin-dashboard-system-priority dl {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 0;
  border-left: 0;
}

.admin-dashboard-system dl > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 45px;
  padding: 7px 9px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.admin-dashboard-system-priority dl > div {
  min-height: 66px;
  border-bottom: 0;
}

.admin-dashboard-system-priority dl > div:nth-child(n + 5) {
  border-top: 1px solid var(--line);
}

.admin-dashboard-system-priority dl > div:last-child {
  border-right: 0;
}

.admin-dashboard-system dt {
  color: var(--muted);
  font-size: 10px;
}

.admin-dashboard-system dd {
  margin: 0;
  color: var(--text);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: right;
}

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

.admin-table input,
.admin-table select {
  min-width: 0;
  width: 100%;
}

.admin-table-wrap {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 300px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.admin-storage-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.admin-storage-summary article {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f7f9fa;
}

.admin-storage-summary span,
.admin-storage-summary small {
  color: var(--muted);
  font-size: 12px;
}

.admin-storage-summary strong {
  font-size: 18px;
}

.admin-storage-breakdown {
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fbfcfc;
}

.admin-storage-breakdown-head h5,
.admin-storage-breakdown-head p,
.admin-storage-breakdown-grid h6 {
  margin: 0;
}

.admin-storage-breakdown-head p,
.admin-storage-breakdown > small {
  color: var(--muted);
  font-size: 11px;
}

.admin-storage-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 12px 0 8px;
}

.admin-storage-breakdown-grid article { min-width: 0; }
.admin-storage-breakdown-grid h6 { margin-bottom: 8px; font-size: 12px; }

.admin-storage-usage-list {
  display: grid;
  gap: 8px;
  max-height: 280px;
  padding-right: 5px;
  overflow-y: auto;
}

.admin-storage-usage-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 8px;
}

.admin-storage-usage-row > div:first-child { min-width: 0; }
.admin-storage-usage-row strong,
.admin-storage-usage-row > div:first-child span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-storage-usage-row strong { font-size: 11px; }
.admin-storage-usage-row > div:first-child span { color: var(--muted); font-size: 9px; }
.admin-storage-usage-value { color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.admin-storage-usage-track { grid-column: 1 / -1; height: 7px; overflow: hidden; border-radius: 4px; background: #e4eaec; }
.admin-storage-usage-track > span { display: block; height: 100%; border-radius: inherit; background: #23826f; }
.admin-storage-breakdown-grid article:nth-child(2) .admin-storage-usage-track > span { background: #3f7da0; }
.admin-storage-usage-empty { color: var(--muted); font-size: 12px; }

.admin-storage-maintenance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f7f9fa;
}

.admin-storage-maintenance > div {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 5px 8px;
  min-width: 0;
}

.admin-storage-maintenance strong,
.admin-storage-maintenance p,
.admin-storage-scan-progress {
  grid-column: 1 / -1;
}

.admin-storage-maintenance p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.admin-storage-maintenance small {
  color: var(--muted);
}

.admin-storage-scan-status {
  padding: 2px 7px;
  border-radius: 999px;
  background: #e5ebee;
  color: #53646c;
  font-size: 11px;
  font-weight: 700;
}

.admin-storage-scan-status.is-running,
.admin-storage-scan-status.is-queued {
  background: #e4f1ee;
  color: #176a5a;
}

.admin-storage-scan-status.is-failed {
  background: #f8e7e4;
  color: #9a3f34;
}

.admin-storage-scan-progress {
  position: relative;
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: #dfe6ea;
}

.admin-storage-scan-progress > span {
  display: block;
  height: 100%;
  background: #23826f;
}

.admin-storage-scan-progress.is-indeterminate > span {
  width: 35% !important;
  animation: admin-scan-progress 1.2s ease-in-out infinite;
}

@keyframes admin-scan-progress {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(300%);
  }
}

.admin-quota-meter {
  width: 100%;
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: #dfe6ea;
}

.admin-quota-meter > span {
  display: block;
  height: 100%;
  background: #23826f;
}

.admin-storage-form fieldset {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 10px;
  margin: 0 0 16px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.admin-storage-form legend {
  padding: 0 6px;
  font-weight: 700;
}

.admin-storage-form label,
.admin-email-form label {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
}

.admin-storage-form small,
.admin-email-form small {
  color: var(--muted);
  font-weight: 400;
}

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

.admin-storage-grid h5,
.admin-email-section h5 {
  margin: 0 0 4px;
  font-size: 14px;
}

.admin-storage-grid p {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 12px;
}

.admin-storage-override-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(170px, 220px);
  align-items: start;
  gap: 10px;
}

.admin-storage-override-head label {
  min-width: 0;
}

.admin-storage-grid .admin-storage-override-head input[type="search"] {
  width: 100%;
}

.admin-storage-filter-count {
  display: block;
  min-height: 16px;
  margin: -3px 0 6px;
  color: var(--muted);
  font-size: 10px;
  text-align: right;
}

.admin-storage-grid .admin-table-wrap {
  max-height: 320px;
}

.admin-storage-grid input {
  width: 110px;
}

.admin-email-config {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 3px 12px;
  margin-bottom: 14px;
  padding: 10px 12px;
  border-left: 4px solid #a94f3f;
  background: #fff5f2;
}

.admin-email-workspace-nav {
  display: grid;
  grid-template-columns: repeat(5, minmax(116px, 1fr));
  gap: 6px;
  margin-bottom: 14px;
  padding: 5px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-2);
}

.admin-email-workspace-nav button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 38px;
  padding: 7px 9px;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  white-space: nowrap;
}

.admin-email-workspace-nav button:hover,
.admin-email-workspace-nav button.is-active {
  border-color: var(--line-strong);
  background: var(--surface);
  color: var(--accent-strong);
  box-shadow: 0 2px 7px rgba(20, 39, 48, 0.08);
}

.admin-email-workspace-nav button span {
  font-size: 12px;
  font-weight: 700;
}

.admin-email-workspace-nav button small {
  color: inherit;
  font-size: 10px;
  font-weight: 600;
  opacity: 0.78;
}

.admin-email-workspace-panel {
  min-width: 0;
}

.admin-email-workspace-panel[hidden] {
  display: none;
}

.admin-email-workspace-intro {
  margin-bottom: 10px;
}

.admin-email-workspace-intro h5,
.admin-email-workspace-intro p {
  margin: 0;
}

.admin-email-workspace-intro p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.admin-email-recent {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.admin-email-recent-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.admin-email-recent-head h5 {
  margin: 0;
}

.admin-email-recent .admin-table-wrap {
  max-height: none;
}

.admin-email-recent-table td {
  padding-top: 7px;
  padding-bottom: 7px;
}

.admin-email-quick-templates {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  padding: 9px 11px;
  border: 1px solid #cbdde8;
  border-radius: 8px;
  background: #f3f8fb;
}

.admin-email-quick-templates > strong {
  flex: 0 0 auto;
  color: #31566d;
  font-size: 11px;
}

.admin-email-quick-templates > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.admin-email-quick-templates button {
  min-height: 30px;
  padding: 5px 9px;
  border-color: #a9c7d9;
  background: #fff;
  color: #234d66;
  font-size: 11px;
}

.admin-email-config.is-ready {
  border-left-color: #23826f;
  background: #f0f8f5;
}

.admin-email-config small {
  grid-column: 1 / -1;
  color: var(--muted);
}

.admin-email-config-actions {
  display: flex;
  justify-content: flex-end;
}

.admin-email-config-actions button {
  min-height: 30px;
  padding: 5px 10px;
  font-size: 11px;
}

.admin-email-usage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #f8fbfc;
}

.admin-email-usage.is-warning {
  border-color: #d49c3d;
  background: #fff8e8;
}

.admin-email-usage > div {
  display: grid;
  gap: 2px;
}

.admin-email-usage span,
.admin-email-usage small {
  color: var(--muted);
  font-size: 11px;
}

.admin-email-usage strong {
  font-size: 18px;
}

.admin-email-usage p {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.admin-email-policy-form {
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.admin-email-template-editor,
.admin-email-delivery-detail {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fbfcfd;
}

.admin-email-template-selectors {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(140px, 0.45fr);
  gap: 10px;
}

.admin-email-template-editor label,
.admin-email-delivery-detail label {
  display: grid;
  gap: 4px;
}

.admin-email-template-editor small,
.admin-email-delivery-detail small {
  color: var(--muted);
  font-size: 11px;
}

.admin-email-detail-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.admin-email-detail-head h5,
.admin-email-detail-head p {
  margin: 0;
}

.admin-email-detail-head p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.admin-email-detail-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
  margin: 0;
}

.admin-email-detail-meta div {
  display: grid;
  gap: 2px;
}

.admin-email-detail-meta dt {
  color: var(--muted);
  font-size: 10px;
}

.admin-email-detail-meta dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.admin-email-detail-error {
  margin: 0;
  padding: 8px;
  border-radius: 6px;
  color: #9a3128;
  background: #fde7e4;
}

.admin-email-policy-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.admin-email-policy-head h5,
.admin-email-policy-head p {
  margin: 0;
}

.admin-email-policy-head p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

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

.admin-email-policy-grid label {
  display: flex;
  align-items: start;
  gap: 8px;
  min-width: 0;
  padding: 9px;
  border-radius: 6px;
  background: #f5f8f9;
}

.admin-email-policy-grid label.is-fixed {
  background: #edf6f3;
}

.admin-email-policy-grid label span {
  display: grid;
  gap: 2px;
}

.admin-email-policy-grid small {
  color: var(--muted);
  font-size: 10px;
}

.admin-email-limit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.admin-email-limit-grid label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 11px;
}

.admin-email-form {
  display: grid;
  grid-template-columns: minmax(150px, 0.7fr) minmax(180px, 1fr);
  gap: 10px 14px;
  margin-bottom: 18px;
}

.admin-email-form .admin-email-users,
.admin-email-form label:has(textarea),
.admin-email-form .admin-form-actions {
  grid-column: 1 / -1;
}

.admin-email-form select[multiple] {
  min-height: 132px;
}

.admin-email-history {
  max-height: 360px;
}

.admin-email-history-open {
  padding: 0;
  border: 0;
  color: var(--accent);
  background: transparent;
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
}

.admin-email-status {
  display: inline-block;
  min-width: 54px;
  padding: 3px 6px;
  border-radius: 4px;
  background: #e8edf0;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
}

.admin-email-status.is-sent {
  color: #126452;
  background: #dff2eb;
}

.admin-email-status.is-failed {
  color: #9a3128;
  background: #fde7e4;
}

.admin-email-status.is-skipped {
  color: #78611d;
  background: #fff3cf;
}

@media (max-width: 760px) {
  .admin-email-workspace-nav {
    grid-template-columns: repeat(5, minmax(128px, 1fr));
    scrollbar-width: thin;
  }

  .admin-email-recent-head {
    align-items: stretch;
  }

  .admin-email-usage,
  .admin-email-policy-grid,
  .admin-email-limit-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-email-usage p {
    grid-column: auto;
  }

  .admin-email-policy-head {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-email-template-selectors,
  .admin-email-detail-meta {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-email-quick-templates {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-email-quick-templates > div {
    justify-content: flex-start;
  }
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.admin-user-table {
  min-width: 1500px;
  table-layout: auto;
}

.admin-user-table td {
  white-space: nowrap;
}

.admin-user-table td:first-child {
  width: 210px;
  max-width: 210px;
}

.admin-user-table th:first-child,
.admin-user-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--surface);
  box-shadow: 1px 0 0 var(--line);
}

.admin-user-table th:first-child {
  z-index: 4;
  background: var(--surface-2);
}

.admin-user-table th:last-child,
.admin-user-table td:last-child {
  position: sticky;
  right: 0;
  z-index: 2;
  background: var(--surface);
  box-shadow: -1px 0 0 var(--line);
}

.admin-user-table th:last-child {
  z-index: 4;
  background: var(--surface-2);
}

.admin-user-table tr.is-selected td:first-child,
.admin-user-table tr.is-selected td:last-child {
  background: #edf6f8;
}

.admin-user-table tbody tr:not(.is-selected):hover td:first-child,
.admin-user-table tbody tr:not(.is-selected):hover td:last-child {
  background: #f8fafb;
}

.admin-user-organization-cell {
  width: 140px;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-user-name-button {
  display: block;
  max-width: 200px;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 700;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-user-name-button:hover,
.admin-user-name-button:focus-visible {
  background: transparent;
  color: var(--accent);
  text-decoration: underline;
}

.admin-signup-at-cell,
.admin-last-seen-cell {
  white-space: nowrap;
}

.admin-user-metric-cell {
  min-width: 76px;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.admin-last-seen-cell {
  min-width: 96px;
}

.admin-team-table {
  min-width: 920px;
}

.admin-team-storage-cell,
.admin-team-activity-cell {
  min-width: 104px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.admin-team-storage-cell strong,
.admin-team-storage-cell .admin-row-subtext,
.admin-team-activity-cell strong,
.admin-team-activity-cell .admin-row-subtext {
  display: block;
}

.admin-user-access-cell {
  min-width: 120px;
  white-space: nowrap;
}

.admin-user-access-badges {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 5px;
}

.admin-team-roles-cell {
  max-width: 250px;
}

.admin-team-roles-cell strong,
.admin-team-roles-cell .admin-row-subtext {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-table th,
.admin-table td {
  padding: 6px 7px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.admin-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-2);
  color: var(--muted);
  font-weight: 650;
  white-space: nowrap;
}

.admin-table th.admin-sortable-header {
  padding: 0;
}

.admin-sort-button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  width: 100%;
  min-height: 31px;
  padding: 6px 7px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  text-align: left;
  white-space: nowrap;
}

.admin-sort-button:hover,
.admin-sort-button:focus-visible {
  background: #e9f1f3;
  color: var(--text);
}

.admin-sort-button:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.admin-sort-indicator {
  min-width: 10px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1;
  opacity: 0.45;
  text-align: center;
}

.admin-sort-button.is-active {
  color: var(--accent-strong);
  font-weight: 750;
}

.admin-sort-button.is-active .admin-sort-indicator {
  color: currentColor;
  opacity: 1;
}

.admin-table tr:last-child td {
  border-bottom: 0;
}

.admin-table tr.is-selected td {
  background: #edf6f8;
}

.admin-table tbody tr:not(.is-selected):hover td {
  background: #f8fafb;
}

.admin-table input[type="checkbox"] {
  width: auto;
}

.admin-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.admin-table-toolbar input {
  width: min(420px, 100%);
}

.admin-table-toolbar span,
.admin-muted {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.admin-directory-section {
  grid-template-rows: auto auto minmax(0, 1fr);
  min-height: 100%;
}

.admin-directory-section.has-review-queue {
  grid-template-rows: auto auto auto auto;
  align-content: start;
}

.admin-directory-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(130px, auto) minmax(145px, auto) auto;
  align-items: center;
  gap: 8px;
}

.admin-user-toolbar {
  grid-template-columns: minmax(240px, 1fr) minmax(116px, auto) minmax(116px, auto) minmax(150px, auto) minmax(145px, auto) auto;
}

.admin-user-attention-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-2));
  color: var(--text);
  font-size: 12px;
}

.admin-user-attention-filter button {
  flex: 0 0 auto;
  padding: 5px 9px;
}

.admin-directory-toolbar input,
.admin-directory-toolbar select {
  width: 100%;
  min-width: 0;
}

.admin-directory-search {
  min-width: 0;
}

.admin-filter-count {
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.admin-directory-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  min-height: 0;
  overflow: hidden;
}

.admin-directory-layout.has-editor {
  grid-template-columns: minmax(0, 1fr) minmax(400px, 430px);
}

.admin-directory-main {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
}

.admin-directory-table-wrap {
  height: 100%;
  max-height: none;
  border-radius: 6px 6px 0 0;
  scrollbar-gutter: stable;
}

.admin-directory-table-wrap .admin-table th,
.admin-directory-table-wrap .admin-table td {
  padding: 8px 9px;
}

.admin-directory-table-wrap .admin-table td {
  height: 46px;
}

.admin-directory-table-wrap .admin-table td > strong {
  display: block;
  max-width: 260px;
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-row-subtext {
  display: block;
  max-width: 260px;
  margin-top: 2px;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-note-cell {
  max-width: 230px;
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-team-name-button {
  display: grid;
  width: 100%;
  min-width: 0;
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.admin-team-name-button:hover strong,
.admin-team-name-button:focus-visible strong {
  color: var(--accent-strong);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.admin-team-name-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.admin-picker-limit-hint {
  grid-column: 1 / -1;
  margin: 0;
  padding: 8px 10px;
  color: var(--muted);
  background: var(--surface-2);
  font-size: 11px;
  text-align: center;
}

.admin-team-name-button strong,
.admin-team-person-cell strong {
  display: block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-team-person-cell {
  min-width: 150px;
}

.admin-team-managers-cell {
  min-width: 150px;
  max-width: 230px;
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-row-action {
  width: 52px;
  text-align: right !important;
  white-space: nowrap;
}

.admin-row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}

.admin-numeric-cell,
.admin-refill-cell {
  font-variant-numeric: tabular-nums;
  text-align: center !important;
}

.admin-user-token-cell {
  min-width: 120px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.admin-user-token-summary {
  display: inline-grid;
  min-width: 68px;
  margin-right: 5px;
  vertical-align: middle;
}

.admin-user-token-summary strong,
.admin-user-token-summary span {
  display: block;
  line-height: 1.25;
}

.admin-user-token-summary span {
  color: var(--muted);
  font-size: 10px;
}

.admin-user-token-detail {
  padding-inline: 3px;
  vertical-align: middle;
  white-space: nowrap;
}

.admin-status-badge,
.admin-role-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
  color: #34424c;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.admin-status-badge.is-active {
  border-color: #b8dcc9;
  background: #edf8f2;
  color: #17643a;
}

.admin-status-badge.is-pending {
  border-color: #ead4a2;
  background: #fff8e8;
  color: #805300;
}

.admin-status-badge.is-blocked,
.admin-status-badge.is-inactive {
  border-color: #e6c3bf;
  background: #fff1ef;
  color: #963e36;
}

.admin-role-badge.is-admin {
  border-color: #b9d4de;
  background: #edf6f8;
  color: #15556b;
}

.admin-team-summary-cell {
  width: 150px;
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-team-summary-cell small {
  margin-left: 5px;
  color: #176078;
  font-size: 9px;
  font-weight: 750;
}

.admin-directory-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 40px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 6px 6px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
}

.admin-page-controls,
.admin-page-controls label {
  display: flex;
  align-items: center;
  gap: 5px;
}

.admin-page-controls select {
  width: 62px;
  min-height: 28px;
  padding: 3px 22px 3px 7px;
}

.admin-page-controls button {
  width: 28px;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  background: var(--surface);
  color: var(--text);
}

.admin-page-controls strong {
  min-width: 48px;
  color: var(--text);
  font-size: 11px;
  text-align: center;
}

.admin-detail-panel {
  min-width: 0;
  min-height: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fbfcfd;
  overflow: auto;
}

.admin-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.admin-detail-head h5 {
  margin: 2px 0 0;
  color: var(--text);
  font-size: 15px;
  overflow-wrap: anywhere;
}

.admin-detail-email {
  display: block;
  max-width: 100%;
  margin-top: 3px;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-detail-kicker {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.admin-detail-form {
  display: grid;
  gap: 10px;
}

.admin-detail-form > label,
.admin-detail-form-grid > label {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}

.admin-detail-form input,
.admin-detail-form select,
.admin-detail-form textarea {
  width: 100%;
  min-width: 0;
}

.admin-detail-form textarea {
  resize: vertical;
}

.admin-detail-form label small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 400;
}

.admin-detail-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.admin-switch-field {
  display: flex !important;
  align-items: center;
  gap: 7px !important;
  color: var(--text) !important;
}

.admin-switch-field input {
  width: auto;
}

.admin-membership-fieldset {
  display: grid;
  gap: 7px;
  min-width: 0;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.admin-membership-fieldset legend {
  padding: 0 4px;
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
}

.admin-membership-fieldset > p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
}

.admin-team-picker-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
}

.admin-team-picker-search span {
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
}

.admin-editor-summary {
  display: grid;
  gap: 3px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}

.admin-editor-summary strong {
  color: var(--text);
  font-size: 11px;
}

.admin-editor-summary span {
  color: var(--muted);
  font-size: 10px;
  overflow-wrap: anywhere;
}

.admin-team-members-editor {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}

.admin-team-owner-field {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}

.admin-team-owner-selected {
  display: flex;
  align-items: center;
  min-height: 42px;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}

.admin-team-owner-avatar {
  display: inline-grid;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: #dceff4;
  color: #15556b;
  font-size: 12px;
  font-weight: 800;
}

.admin-team-owner-identity {
  display: grid;
  min-width: 0;
}

.admin-team-owner-identity strong,
.admin-team-owner-identity small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-team-owner-identity strong {
  color: var(--text);
  font-size: 11px;
}

.admin-team-owner-identity small,
.admin-team-owner-empty {
  color: var(--muted);
  font-size: 10px;
}

.admin-team-owner-results {
  display: grid;
  max-height: 210px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.admin-team-owner-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 7px 9px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: #fff;
  color: var(--text);
  text-align: left;
}

.admin-team-owner-option:last-of-type {
  border-bottom: 0;
}

.admin-team-owner-option:hover,
.admin-team-owner-option.is-selected {
  background: var(--surface-2);
}

.admin-team-owner-option > span {
  display: grid;
  min-width: 0;
}

.admin-team-owner-option strong,
.admin-team-owner-option small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-team-owner-option small {
  color: var(--muted);
  font-size: 10px;
}

.admin-team-owner-option em {
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 9px;
  font-style: normal;
}

.admin-team-owner-results > .admin-picker-limit-hint {
  margin: 0;
  padding: 8px 9px;
}

.admin-team-member-toolbar {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto auto;
  gap: 6px;
}

.admin-team-member-toolbar input {
  min-width: 0;
}

.admin-team-member-toolbar button {
  min-height: 32px;
  padding: 5px 8px;
  white-space: nowrap;
}

.admin-team-member-filter-count {
  color: var(--muted);
  font-size: 10px;
  text-align: right;
}

.admin-team-member-picker {
  display: grid;
  max-height: 260px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fff;
}

.admin-team-detail-panel .admin-team-member-picker {
  max-height: min(52vh, 520px);
  overflow: auto;
}

.admin-team-detail-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 0;
  overflow: hidden;
}

.admin-team-detail-panel .admin-detail-head {
  min-width: 0;
  margin: 0;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.admin-team-detail-form {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
  gap: 0;
}

.admin-team-editor-panel {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 0;
  padding: 14px;
  overflow: auto;
}

.admin-team-editor-panel[hidden] {
  display: none;
}

.admin-team-editor-panel > label,
.admin-team-editor-panel .admin-detail-form-grid > label {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}

.admin-team-detail-form > .admin-detail-actions {
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.admin-team-member-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(74px, auto) minmax(74px, auto);
  gap: 8px;
  padding: 0 8px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}

.admin-team-member-columns span:not(:first-child) {
  text-align: center;
}

.admin-team-member-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(74px, auto) minmax(74px, auto);
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 7px 8px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}

.admin-team-member-option.is-owner {
  background: #f2f8fa;
}

.admin-team-member-option:last-child {
  border-bottom: 0;
}

.admin-team-member-option:hover {
  background: var(--surface-2);
}

.admin-team-member-option input {
  width: auto;
  margin: 0;
}

.admin-team-member-identity {
  display: grid;
  min-width: 0;
}

.admin-team-member-identity strong,
.admin-team-member-identity small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-team-member-identity strong {
  color: var(--text);
  font-size: 11px;
}

.admin-team-member-identity em {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 4px;
  border-radius: 4px;
  background: #dceff4;
  color: #15556b;
  font-size: 8px;
  font-style: normal;
  vertical-align: 1px;
}

.admin-team-member-identity [data-team-owner-badge][hidden] {
  display: none !important;
}

.admin-team-member-identity small {
  color: var(--muted);
  font-size: 10px;
}

.admin-team-role-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--muted);
  font-size: 9px;
  cursor: pointer;
}

.admin-team-role-toggle input {
  width: auto;
  margin: 0;
}

.admin-refill-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.admin-refill-summary > div {
  display: grid;
  gap: 3px;
}

.admin-detail-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 4px;
}

.admin-user-detail-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 0;
  overflow: hidden;
}

.admin-user-editor-modal,
.admin-team-editor-modal {
  display: grid;
  position: fixed;
  inset: 0;
  z-index: 110;
  place-items: center;
  padding: 24px;
  background: rgb(15 23 42 / 46%);
  backdrop-filter: blur(1px);
}

.admin-user-editor-modal > .admin-user-detail-panel {
  width: min(720px, calc(100vw - 48px));
  height: min(720px, calc(100vh - 48px));
  max-height: calc(100vh - 48px);
  border-color: #b9cbd2;
  background: var(--surface);
  box-shadow: 0 18px 48px rgb(15 23 42 / 30%);
}

.admin-team-editor-modal > .admin-team-detail-panel {
  width: min(900px, calc(100vw - 48px));
  height: min(760px, calc(100vh - 48px));
  max-height: calc(100vh - 48px);
  border-color: #b9cbd2;
  background: var(--surface);
  box-shadow: 0 18px 48px rgb(15 23 42 / 30%);
}

@media (min-width: 1600px) and (min-height: 900px) {
  .admin-user-editor-modal > .admin-user-detail-panel {
    width: min(900px, calc(100vw - 64px));
    height: min(920px, calc(100vh - 64px));
    max-height: calc(100vh - 64px);
  }

  .admin-team-editor-modal > .admin-team-detail-panel {
    width: min(1100px, calc(100vw - 64px));
    height: min(960px, calc(100vh - 64px));
    max-height: calc(100vh - 64px);
  }
}

.admin-team-detail-panel .admin-detail-head > div {
  min-width: 0;
}

.admin-user-detail-panel .admin-detail-head {
  min-width: 0;
  margin: 0;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.admin-user-detail-panel .admin-detail-head > div {
  min-width: 0;
}

.admin-user-detail-form {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
  gap: 0;
}

.admin-user-detail-form > input[type="hidden"] {
  display: none;
}

.admin-editor-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  margin: 10px 14px 0;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
}

.admin-editor-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 31px;
  padding: 5px 10px;
  border: 0;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  font-size: 11px;
  font-weight: 700;
}

.admin-editor-tabs button:hover {
  border: 0;
  background: #eef4f6;
  color: var(--text);
}

.admin-editor-tabs button.is-active {
  border: 1px solid #b8d4de;
  background: var(--surface);
  color: #15556b;
  box-shadow: 0 1px 2px rgb(24 51 63 / 8%);
}

.admin-editor-tabs button > span {
  min-width: 19px;
  padding: 1px 5px;
  border-radius: 999px;
  background: #e4eef1;
  color: #315461;
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}

.admin-user-editor-panel {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 0;
  padding: 14px;
  overflow: auto;
}

.admin-user-editor-panel[hidden] {
  display: none;
}

.admin-user-editor-panel > label,
.admin-user-editor-panel .admin-detail-form-grid > label {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}

.admin-user-editor-panel input,
.admin-user-editor-panel select,
.admin-user-editor-panel textarea {
  width: 100%;
  min-width: 0;
}

.admin-user-editor-panel textarea {
  resize: vertical;
}

.admin-user-editor-panel label small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 400;
}

.admin-user-account-summary {
  display: grid;
  gap: 8px;
  padding: 11px 0 2px;
  border-top: 1px solid var(--line);
}

.admin-user-account-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.admin-user-account-summary-head strong {
  color: var(--text);
  font-size: 11px;
}

.admin-user-account-summary dl {
  display: grid;
  gap: 6px;
  margin: 0;
}

.admin-user-account-summary dl > div {
  display: grid;
  grid-template-columns: minmax(90px, auto) minmax(0, 1fr);
  gap: 10px;
}

.admin-user-account-summary dt {
  color: var(--muted);
  font-size: 10px;
}

.admin-user-account-summary dd {
  margin: 0;
  color: var(--text);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.admin-grant-refill-button {
  justify-self: end;
}

.admin-user-team-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.admin-user-team-heading > div {
  display: grid;
  gap: 3px;
}

.admin-user-team-heading strong {
  color: var(--text);
  font-size: 12px;
}

.admin-user-team-heading > div > span {
  color: var(--muted);
  font-size: 10px;
}

.admin-user-team-heading > span {
  flex: 0 0 auto;
  padding: 3px 6px;
  border-radius: 5px;
  background: var(--surface-2);
  color: #315461;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.admin-user-teams-panel .admin-team-picker-large {
  max-height: 300px;
  border-radius: 6px;
}

.admin-user-teams-panel .admin-default-team-field {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}

.admin-user-detail-actions {
  min-height: 54px;
  padding: 9px 14px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.admin-user-detail-actions .danger-link-button {
  margin-right: auto;
}

.admin-membership-fieldset .admin-default-team-field {
  grid-template-columns: 1fr;
  gap: 4px;
}

.admin-team-option[hidden] {
  display: none !important;
}

.admin-token-cell {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 135px;
  white-space: nowrap;
}

.admin-token-cell span {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.admin-policy-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 18px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}

.admin-policy-strip strong {
  margin-left: 4px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.admin-token-policy-disclosure {
  border-bottom: 1px solid var(--line);
}

.admin-token-policy-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 58px;
  padding: 9px 0 10px;
  cursor: pointer;
  list-style: none;
}

.admin-token-policy-summary::-webkit-details-marker {
  display: none;
}

.admin-token-policy-summary:hover > div > strong {
  color: var(--accent-strong);
}

.admin-token-policy-summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.admin-token-policy-summary > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.admin-token-policy-summary > div > strong {
  font-size: 14px;
}

.admin-token-policy-summary > div > small {
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.admin-token-policy-summary-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

.admin-token-policy-summary-meta i {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg);
  transition: transform 120ms ease;
}

.admin-token-policy-disclosure[open] .admin-token-policy-summary-meta i {
  transform: rotate(45deg);
}

.admin-token-policy {
  display: grid;
  gap: 12px;
  padding-top: 2px;
  padding-bottom: 14px;
}

.admin-token-policy-description {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.admin-token-policy-source {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.admin-token-policy-groups {
  display: grid;
  grid-template-columns: minmax(255px, 0.78fr) minmax(420px, 1.5fr);
  align-items: start;
  gap: 14px;
}

.admin-token-policy-group {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
}

.admin-token-policy-group-head {
  min-height: 62px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}

.admin-token-policy-group-head h5,
.admin-token-policy-group-head p {
  margin: 0;
}

.admin-token-policy-group-head h5 {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
}

.admin-token-policy-group-head h5 > span {
  display: inline-grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
}

.admin-token-policy-group.is-credit .admin-token-policy-group-head h5 > span {
  background: #dff3e7;
  color: #176b3a;
}

.admin-token-policy-group.is-debit .admin-token-policy-group-head h5 > span {
  background: #fbe4e4;
  color: #a22d2d;
}

.admin-token-policy-group-head p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.admin-token-policy-credit-fields {
  display: grid;
}

.admin-token-policy-credit-fields > label,
.admin-token-policy-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 190px);
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
}

.admin-token-policy-credit-fields > label:last-child,
.admin-token-policy-action:last-child {
  border-bottom: 0;
}

.admin-token-policy-credit-fields > label > span:first-child,
.admin-token-policy-action-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.admin-token-policy-credit-fields strong,
.admin-token-policy-action-copy strong {
  overflow-wrap: anywhere;
  font-size: 12px;
}

.admin-token-policy-credit-fields small,
.admin-token-policy-action-copy small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.admin-token-policy-action-copy small {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}

.admin-token-policy-status {
  padding: 1px 5px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface-2);
  font-size: 10px;
  font-weight: 650;
}

.admin-token-policy-status.is-active {
  border-color: #a8d8ba;
  background: #e8f6ed;
  color: #176b3a;
}

.admin-token-policy-status.is-beta {
  border-color: #b8c8ef;
  background: #eef3ff;
  color: #3158a6;
}

.admin-token-policy-status.is-planned {
  border-color: #dfc79d;
  background: #fff4dd;
  color: #8a5400;
}

.admin-token-policy-signed-input,
.admin-token-policy-period-input {
  display: grid;
  grid-template-columns: auto minmax(72px, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.admin-token-policy-signed-input b {
  font-size: 16px;
  line-height: 1;
}

.admin-token-policy-signed-input.is-credit b {
  color: #176b3a;
}

.admin-token-policy-signed-input.is-debit b {
  color: #b42323;
}

.admin-token-policy-signed-input input,
.admin-token-policy-period-input input {
  width: 100%;
  min-width: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.admin-token-policy-signed-input em,
.admin-token-policy-period-input em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  white-space: nowrap;
}

.admin-token-policy-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.admin-token-policy-footer p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.admin-token-policy-footer button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.admin-token-list {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
}

@media (max-width: 900px) {
  .admin-token-policy-groups {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .admin-directory-launch-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-directory-workspace-nav {
    align-items: stretch;
    flex-direction: column;
  }

  .user-admin-panel.is-directory-workspace {
    top: 10px;
    width: calc(100vw - 20px);
    height: calc(100vh - 20px);
    max-height: calc(100vh - 20px);
  }

  .admin-token-policy-summary {
    align-items: flex-start;
  }

  .admin-token-policy-summary-meta {
    max-width: 45%;
  }

  .admin-token-policy-source {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
  }

  .admin-token-policy-footer {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 470px) {
  .admin-token-policy-credit-fields > label,
  .admin-token-policy-action {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

.admin-token-account-wrap {
  max-height: 520px;
}

.admin-token-account-table {
  min-width: 1380px;
}

.admin-token-account-table td {
  white-space: nowrap;
}

.admin-token-account-table td:first-child,
.admin-token-account-table td:nth-child(2) {
  max-width: 185px;
}

.admin-token-account-table td:first-child strong,
.admin-token-account-table td:first-child span,
.admin-token-account-table td:nth-child(2) span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-token-row-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.admin-token-row-actions button {
  min-height: 26px;
  padding: 3px 7px;
  border-color: #c8d2d8;
  background: var(--surface);
  color: var(--muted);
  font-size: 11px;
}

.admin-token-row-actions button:hover,
.admin-token-row-actions button.is-active {
  border-color: #82aab8;
  background: #edf6f8;
  color: #15566d;
}

.admin-token-row-actions button[data-token-action="debit"],
.admin-token-row-actions button[data-token-action="reset"] {
  color: #8f3932;
}

.admin-row-subtext {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
}

.admin-token-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.admin-token-summary > div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px 10px;
}

.admin-token-summary > div:nth-child(odd) {
  border-right: 1px solid var(--line);
}

.admin-token-summary > div:nth-child(-n + 2) {
  border-bottom: 1px solid var(--line);
}

.admin-token-summary span {
  color: var(--muted);
  font-size: 11px;
}

.admin-token-summary strong {
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-token-history-panel {
  display: grid;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.admin-icon-button {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border-color: var(--line);
  background: var(--surface);
  color: var(--muted);
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
}

.admin-token-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(15, 23, 42, 0.34);
}

.info-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 143;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(15, 23, 42, 0.38);
}

.info-dialog-backdrop[hidden] {
  display: none;
}

.info-dialog {
  display: grid;
  gap: 14px;
  width: min(760px, calc(100vw - 36px));
  max-height: calc(100vh - 36px);
  padding: 18px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 20px 52px rgba(15, 23, 42, 0.28);
}

.diagnostic-detail-dialog {
  width: min(900px, calc(100vw - 36px));
}

.log-detail-dialog-card {
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1180px, calc(100vw - 36px));
  overflow: hidden;
}

.log-detail-dialog-body {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.log-detail-dialog-body > .detail-editor {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.log-detail-dialog-body > .detail-editor > .data-disclosure-toggle {
  display: none;
}

.log-detail-dialog-body > .detail-editor > .detail-editor-content {
  padding: 0;
}

.info-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

@media (max-width: 640px) {
  .log-detail-dialog-backdrop {
    padding: 8px;
  }

  .log-detail-dialog-card {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    padding: 12px;
  }
}

.info-dialog-head h2 {
  margin: 0;
  font-size: 20px;
}

.info-dialog-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.activity-ranking-dialog {
  width: min(620px, calc(100vw - 36px));
  overflow: hidden;
}

.activity-ranking-dialog-body {
  display: grid;
  gap: 12px;
  min-height: 160px;
  overflow: auto;
}

.activity-ranking-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 13px 15px;
  border: 1px solid color-mix(in srgb, #d39b16 38%, var(--line));
  border-radius: 9px;
  background: linear-gradient(135deg, color-mix(in srgb, #fff4c7 74%, var(--surface)), var(--surface));
}

.activity-ranking-hero > div {
  display: grid;
  min-width: 82px;
}

.activity-ranking-hero span,
.activity-ranking-hero time,
.activity-ranking-list-head span,
.activity-ranking-own-row > span,
.activity-ranking-policy {
  color: var(--muted);
  font-size: 11px;
}

.activity-ranking-hero > div strong {
  color: #76520a;
  font-size: 22px;
}

.activity-ranking-hero p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
}

.activity-ranking-hero time {
  white-space: nowrap;
}

.activity-ranking-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px;
}

.activity-ranking-list {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.activity-ranking-row {
  display: grid;
  grid-template-columns: 38px minmax(120px, 1fr) auto minmax(70px, auto);
  gap: 10px;
  align-items: center;
  min-height: 42px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
}

.activity-ranking-row.is-top-1 {
  border-color: color-mix(in srgb, #d39b16 58%, var(--line));
  background: color-mix(in srgb, #fff4c7 50%, var(--surface));
}

.activity-ranking-row.is-top-2 {
  background: color-mix(in srgb, #e8edf3 55%, var(--surface));
}

.activity-ranking-row.is-top-3 {
  background: color-mix(in srgb, #f0d7c4 45%, var(--surface));
}

.activity-ranking-row.is-current {
  box-shadow: inset 3px 0 0 var(--accent);
}

.activity-ranking-position {
  text-align: center;
  font-size: 17px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.activity-ranking-user {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.activity-ranking-user strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: auto;
  unicode-bidi: plaintext;
}

.activity-ranking-user small {
  flex: 0 0 auto;
  color: var(--accent-strong);
  font-weight: 700;
}

.activity-ranking-activity {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.activity-ranking-score {
  text-align: right;
  color: var(--accent-strong);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.activity-ranking-own-row {
  display: grid;
  gap: 5px;
  padding-top: 9px;
  border-top: 1px dashed var(--line-strong);
}

.activity-ranking-policy {
  margin: 0;
  padding: 9px 10px;
  border-radius: 6px;
  background: var(--surface-2);
  line-height: 1.5;
}

.activity-ranking-empty,
.activity-ranking-loading {
  display: grid;
  place-items: center;
  gap: 5px;
  min-height: 130px;
  padding: 20px;
  text-align: center;
  color: var(--muted);
}

.activity-ranking-empty p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
}

@media (max-width: 620px) {
  .activity-ranking-hero {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .activity-ranking-hero time {
    grid-column: 1 / -1;
  }

  .activity-ranking-row {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 7px;
  }

  .activity-ranking-activity {
    display: none;
  }
}

.version-history {
  display: grid;
  gap: 0;
}

.version-release {
  display: grid;
  grid-template-columns: minmax(88px, auto) minmax(0, 1fr);
  gap: 16px;
  padding: 14px 2px;
  border-bottom: 1px solid var(--line);
}

.version-release:last-child {
  border-bottom: 0;
}

.version-release-meta {
  display: grid;
  align-content: start;
  gap: 4px;
}

.version-release-meta strong {
  font-size: 15px;
}

.version-release-meta span {
  color: var(--muted);
  font-size: 11px;
}

.version-current-badge {
  width: max-content;
  padding: 2px 6px;
  border: 1px solid #9dc4aa;
  border-radius: 4px;
  background: #eef8f1;
  color: #275f39 !important;
  font-size: 10px !important;
  font-weight: 700;
}

.version-release ul {
  display: grid;
  gap: 7px;
  margin: 1px 0 0;
  padding-left: 18px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
}

.faq-list {
  display: grid;
  gap: 0;
}

.faq-tools {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 10px 0 6px;
  background: var(--surface);
}

.faq-tools input {
  width: 100%;
  min-height: 40px;
}

.faq-search-empty {
  margin: 18px 0;
  color: var(--muted);
  text-align: center;
}

.faq-list details {
  padding: 11px 2px;
  border-bottom: 1px solid var(--line);
}

.faq-list details:last-child {
  border-bottom: 0;
}

.faq-list summary {
  cursor: pointer;
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
}

.faq-list p {
  margin: 8px 22px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.diagnostic-dialog-body {
  min-height: 120px;
}

.diagnostic-dialog-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.diagnostic-dialog-identity {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.diagnostic-dialog-identity strong {
  overflow: hidden;
  font-size: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.diagnostic-dialog-identity span,
.diagnostic-dialog-identity small {
  color: var(--muted);
  line-height: 1.45;
}

.diagnostic-dialog-identity span {
  font-size: 13px;
}

.diagnostic-dialog-identity small {
  font-size: 12px;
}

.diagnostic-dialog-status {
  display: flex;
  align-items: center;
  gap: 10px;
}

.diagnostic-dialog-score {
  min-width: 86px;
  padding: 8px 10px;
  border-left: 1px solid var(--line);
  text-align: right;
}

.diagnostic-dialog-score b {
  font-size: 24px;
  line-height: 1;
}

.diagnostic-dialog-score span {
  color: var(--muted);
  font-size: 12px;
}

.diagnostic-dialog-disclaimer {
  margin: 11px 0 0;
  padding: 8px 10px;
  border-left: 3px solid #7c8aa0;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.diagnostic-dialog-counts {
  margin: 12px 0 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.diagnostic-timeline {
  display: grid;
  gap: 8px;
  margin: 4px 0 12px;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
}

.diagnostic-timeline > strong {
  font-size: 12px;
}

.diagnostic-timeline ol {
  display: flex;
  gap: 7px;
  margin: 0;
  padding: 0 0 2px;
  overflow-x: auto;
  list-style: none;
}

.diagnostic-timeline-event {
  display: grid;
  flex: 0 0 auto;
  gap: 2px;
  min-width: 92px;
  max-width: 180px;
  padding: 7px 9px;
  border-left: 3px solid #64748b;
  border-radius: 7px;
  background: var(--surface);
}

.diagnostic-timeline-event.is-takeoff,
.diagnostic-timeline-event.is-landing {
  border-left-color: #137c8b;
}

.diagnostic-timeline-event.is-mode {
  border-left-color: #2563a8;
}

.diagnostic-timeline-event time {
  color: var(--muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.diagnostic-timeline-event span {
  overflow: hidden;
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.diagnostic-timeline.is-compact {
  margin: 8px 10px;
  padding: 8px;
}

.diagnostic-timeline.is-compact .diagnostic-timeline-event {
  min-width: 82px;
}

.support-backdrop {
  z-index: 145;
}

.support-dialog {
  gap: 18px;
  width: min(920px, calc(100vw - 36px));
  border-color: #e5c8ce;
}

.support-dialog-head {
  border-bottom-color: #ead9dd;
}

.support-eyebrow {
  display: block;
  margin-bottom: 5px;
  color: #a34b5c;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.support-intro {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 16px;
  border: 1px solid #ead3d8;
  border-radius: 9px;
  background: linear-gradient(135deg, #fff7f9 0%, #fff 72%);
}

.support-intro p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.support-heart {
  display: grid;
  flex: 0 0 38px;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #f8dfe4;
  color: #b84e63;
  font-size: 19px;
}

.support-section {
  display: grid;
  gap: 12px;
}

.support-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.support-section-head h3,
.support-notice h3 {
  margin: 0;
  font-size: 15px;
}

.support-section-head p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.support-section-badge {
  flex: 0 0 auto;
  padding: 3px 8px;
  border: 1px solid #b8d8df;
  border-radius: 12px;
  background: #edf8fa;
  color: var(--accent-strong);
  font-size: 10px;
  font-weight: 750;
}

.support-section-badge.is-draft {
  border-color: var(--line);
  background: var(--surface-2);
  color: var(--muted);
}

.support-qr-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  margin-inline: auto;
}

.support-qr-option {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
}

.support-qr-option.is-ready {
  border-color: #dfc4ca;
  box-shadow: 0 7px 20px rgba(126, 52, 67, 0.07);
}

.support-qr-option.is-naverpay {
  border-color: #b8dfc7;
  box-shadow: 0 7px 20px rgba(3, 141, 70, 0.07);
}

.support-qr-option.is-kakaopay {
  border-color: #e3ca62;
  box-shadow: 0 7px 20px rgba(116, 88, 0, 0.08);
}

.support-qr-option.is-kakaopay .support-qr-meta > span {
  color: #6f5600;
}

.support-qr-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 9px;
}

.support-qr-meta strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.support-provider-name {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.support-provider-icon {
  position: relative;
  display: inline-flex;
  flex: 0 0 19px;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border-radius: 6px;
}

.support-provider-icon.is-toss {
  background: #3182f6;
}

.support-provider-icon.is-toss::before {
  width: 11px;
  height: 7px;
  border-radius: 7px 7px 3px 7px;
  background: #fff;
  content: "";
  transform: rotate(-18deg);
}

.support-provider-icon.is-kakaopay {
  background: #fee500;
}

.support-provider-icon.is-kakaopay::before {
  width: 12px;
  height: 9px;
  border-radius: 50%;
  background: #191600;
  content: "";
}

.support-provider-icon.is-kakaopay::after {
  position: absolute;
  bottom: 4px;
  left: 5px;
  width: 4px;
  height: 4px;
  background: #191600;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  content: "";
}

.support-provider-icon.is-naverpay {
  background: #03c75a;
  color: #fff;
}

.support-provider-icon.is-naverpay::before {
  content: "N";
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.support-qr-meta > span {
  color: #913f50;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.support-qr-meta > .support-qr-flexible {
  color: #087a3c;
  font-size: 11px;
}

.support-qr-link {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid #edf0f2;
  border-radius: 7px;
  background: #fff;
  cursor: zoom-in;
}

.support-qr-link:hover {
  border-color: #cf919d;
  box-shadow: 0 0 0 2px rgba(200, 93, 114, 0.11);
}

.support-qr-link:focus-visible {
  outline: 3px solid rgba(23, 107, 135, 0.24);
  outline-offset: 2px;
}

.support-qr-link img {
  display: block;
  width: 174%;
  max-width: none;
  height: auto;
  transform: translate(-21.25%, -18.5%);
}

.support-qr-option.is-naverpay .support-qr-link img {
  width: 100%;
  transform: none;
}

.support-qr-option.is-kakaopay .support-qr-link img {
  width: 157%;
  transform: translate(-18.3%, -20.2%);
}

.support-qr-help {
  margin: -3px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
}

.support-overseas {
  padding-top: 2px;
}

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

.support-overseas-grid article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
}

.support-overseas-grid article > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.support-overseas-grid p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.support-method-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: #24292f;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

.support-method-icon.is-global {
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 17px;
}

.support-notice {
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #f8fafb;
}

.support-notice ul {
  display: grid;
  gap: 5px;
  margin: 8px 0 0;
  padding-left: 19px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.feedback-backdrop {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(15, 23, 42, 0.38);
}

.account-backdrop {
  position: fixed;
  inset: 0;
  z-index: 142;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(15, 23, 42, 0.42);
}

.account-backdrop[hidden] {
  display: none;
}

.team-manage-backdrop {
  position: fixed;
  inset: 0;
  z-index: 144;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(15, 23, 42, 0.5);
}

.team-manage-backdrop[hidden] {
  display: none;
}

.team-manage-dialog {
  width: min(1120px, 97vw);
  max-height: min(880px, 94vh);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.34);
}

.team-manage-dialog-body {
  height: min(720px, calc(94vh - 78px));
  min-height: 440px;
  overflow: hidden;
}

.team-manage-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  height: 100%;
}

.team-manage-team-list {
  overflow: auto;
  padding: 12px;
  border-right: 1px solid var(--line);
  background: var(--surface-2);
}

.team-manage-team-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px 10px;
  color: var(--muted);
  font-size: 11px;
}

.team-manage-team-list > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 5px;
  padding: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  text-align: left;
}

.team-manage-team-list > button:hover {
  border-color: var(--line);
  background: var(--surface);
}

.team-manage-team-list > button.is-active {
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: inset 3px 0 0 var(--accent);
}

.team-manage-team-list > button > span {
  display: grid;
  min-width: 0;
}

.team-manage-team-list > button strong,
.team-manage-team-list > button small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-manage-team-list > button small {
  color: var(--muted);
  font-size: 10px;
}

.team-manage-team-list > button b {
  min-width: 20px;
  padding: 2px 6px;
  border-radius: 10px;
  background: var(--accent);
  color: white;
  font-size: 10px;
  text-align: center;
}

.team-manage-main {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
}

.team-manage-selected-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px 10px;
}

.team-manage-selected-head h3,
.team-manage-selected-head span {
  margin: 0;
}

.team-manage-selected-head > div > span {
  color: var(--muted);
  font-size: 10px;
}

.team-manage-tabs {
  display: flex;
  gap: 2px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
}

.team-manage-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
}

.team-manage-tabs button.is-active {
  border-bottom-color: var(--accent);
  color: var(--accent-strong);
}

.team-manage-tabs button span {
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 9px;
  background: var(--surface-2);
  font-size: 10px;
}

.team-manage-panel {
  overflow: auto;
  padding: 18px;
}

.team-manage-panel-section {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
}

.team-manage-panel-section + .team-manage-panel-section {
  margin-top: 12px;
}

.team-manage-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.team-manage-panel-head h3,
.team-manage-panel-head p {
  margin: 0;
}

.team-manage-panel-head p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.team-manage-panel-head > span {
  min-width: 28px;
  padding: 3px 7px;
  border-radius: 12px;
  background: var(--surface);
  font-size: 11px;
  text-align: center;
}

.team-manage-member-identity {
  display: grid;
  min-width: 0;
}

.team-manage-member-identity small {
  color: var(--muted);
  font-size: 10px;
}

.team-manage-settings-form,
.team-manage-settings-fields {
  display: grid;
  gap: 12px;
}

.team-manage-settings-fields label {
  display: grid;
  gap: 5px;
}

.team-manage-settings-fields label > span {
  color: var(--muted);
  font-size: 11px;
}

.team-manage-manager-list {
  display: grid;
}

.team-manage-manager-check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.team-manage-settings-actions {
  display: flex;
  justify-content: flex-end;
}

.account-team-card > .account-team-card-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
  flex-shrink: 0;
}

.account-dialog {
  width: min(980px, 96vw);
  max-height: min(850px, 92vh);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  box-shadow: 0 22px 70px rgba(15, 23, 42, 0.28);
}

.account-dialog-body {
  max-height: calc(min(850px, 92vh) - 76px);
  overflow: auto;
  padding: 16px;
}

.account-identity {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}

.account-identity strong {
  font-size: 18px;
}

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

.account-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--line);
}

.account-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 7px 14px;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
}

.account-tabs button.is-active {
  border-bottom-color: var(--accent);
  color: var(--accent-strong);
}

.account-tabs button span {
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 9px;
  background: var(--surface-2);
  font-size: 10px;
}

.account-tab-panel {
  padding-top: 14px;
}

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

.account-team-grid > section,
.account-team-create,
.account-team-management {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
}

.account-team-grid h3,
.account-team-create h3,
.account-team-management > h3,
.account-team-manage h4 {
  margin: 0 0 10px;
  font-size: 14px;
}

.account-team-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.account-team-card:last-child {
  border-bottom: 0;
}

.account-team-card > div,
.account-team-request span:first-child,
.account-team-member label span {
  display: grid;
  min-width: 0;
}

.account-team-card small,
.account-team-request small,
.account-team-member small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
}

.account-team-search {
  display: grid;
  gap: 5px;
  margin-bottom: 8px;
}

.account-team-search > span {
  color: var(--muted);
  font-size: 11px;
}

.account-team-search input {
  width: 100%;
}

.account-team-search-hint {
  margin: 10px 0 2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.account-team-members {
  position: relative;
}

.account-team-members > summary {
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}

.account-team-members > summary::-webkit-details-marker {
  display: none;
}

.account-team-members > div {
  position: absolute;
  z-index: 30;
  top: calc(100% + 7px);
  right: 0;
  width: min(270px, 76vw);
  max-height: 300px;
  overflow: auto;
  padding: 11px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--surface);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
}

.account-team-members > div > strong {
  display: block;
  margin-bottom: 7px;
  font-size: 12px;
}

.account-team-members ul {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.account-team-members li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid var(--line);
  font-size: 12px;
}

.account-team-members li small {
  flex-shrink: 0;
}

.account-team-members p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.account-team-create,
.account-team-management {
  margin-top: 14px;
}

.account-team-create > p {
  margin: -4px 0 12px;
  color: var(--muted);
  font-size: 12px;
}

.account-team-create form {
  display: grid;
  grid-template-columns: minmax(120px, 0.7fr) minmax(160px, 1fr) minmax(180px, 1.4fr) auto;
  gap: 8px;
  align-items: end;
}

.account-team-create label {
  display: grid;
  gap: 5px;
}

.account-team-create label span {
  color: var(--muted);
  font-size: 11px;
}

.account-team-create-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.account-team-manage {
  border-top: 1px solid var(--line);
}

.account-team-manage summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  cursor: pointer;
}

.account-team-manage summary span {
  color: var(--muted);
  font-size: 12px;
}

.account-team-manage-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 16px;
  padding: 0 0 14px;
}

.account-team-request,
.account-team-member {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
}

.account-team-request span:last-child {
  display: flex;
  gap: 5px;
}

.account-team-member label {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.account-team-member em {
  margin-left: auto;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.admin-signup-policy-card {
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
}

.admin-signup-policy-card form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 14px;
  align-items: center;
}

.admin-signup-policy-card h4,
.admin-signup-policy-card p {
  margin: 0;
}

.admin-signup-policy-card p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

@media (max-width: 760px) {
  .account-team-grid,
  .account-team-manage-body,
  .account-team-create form {
    grid-template-columns: 1fr;
  }

  .admin-signup-policy-card form {
    grid-template-columns: 1fr;
  }

  .team-manage-dialog-body {
    height: min(760px, calc(94vh - 78px));
  }

  .team-manage-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .team-manage-team-list {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 8px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .team-manage-team-list-head {
    display: none;
  }

  .team-manage-team-list > button {
    min-width: 160px;
    margin: 0;
  }

  .team-manage-panel {
    padding: 12px;
  }
}

.account-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
}

.account-summary-grid > div {
  min-width: 0;
  padding: 14px;
  border-right: 1px solid var(--line);
}

.account-summary-grid > div:last-child {
  border-right: 0;
}

.account-summary-grid span,
.account-summary-grid strong,
.account-summary-grid small {
  display: block;
}

.account-summary-grid span,
.account-summary-grid small {
  color: var(--muted);
  font-size: 11px;
}

.account-summary-grid strong {
  margin: 5px 0 3px;
  font-size: 22px;
}

.storage-usage-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 7px 14px;
  min-width: 0;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.storage-usage-summary.is-account {
  margin-top: 14px;
}

.storage-usage-summary.is-team {
  margin: 0 18px 10px;
  padding: 10px 12px;
  background: var(--surface-2);
}

.storage-usage-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.storage-usage-copy span,
.storage-usage-percent {
  color: var(--muted);
  font-size: 11px;
}

.storage-usage-copy strong {
  overflow: hidden;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.storage-usage-percent {
  white-space: nowrap;
}

.storage-usage-meter {
  grid-column: 1 / -1;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-3, #dfe7ea);
}

.storage-usage-meter > i {
  display: block;
  width: var(--storage-usage-percent, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

@media (max-width: 640px) {
  .storage-usage-summary.is-team {
    margin-inline: 12px;
  }
}

.account-profile-list {
  display: grid;
  margin: 16px 0 0;
}

.account-profile-section {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.account-profile-section > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.account-profile-section > header button,
.account-profile-form-actions button {
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

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

.account-profile-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.account-profile-form input {
  width: 100%;
  min-height: 42px;
  padding: 0 11px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

.account-profile-form-actions {
  display: flex;
  grid-column: 1 / -1;
  justify-content: flex-end;
  gap: 8px;
}

.account-profile-form-actions .primary-action {
  border-color: #176b87;
  background: #176b87;
  color: #fff;
}

.account-session-list {
  margin-top: 12px;
}

@media (max-width: 640px) {
  .account-profile-form {
    grid-template-columns: 1fr;
  }
}

.account-notifications-section {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
}

.account-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}

.account-section-heading h3,
.account-section-heading p {
  margin: 0;
}

.account-section-heading h3 {
  font-size: 15px;
}

.account-section-heading p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.account-notification-list {
  display: grid;
}

.account-notification {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  padding: 12px 15px;
  border-bottom: 1px solid var(--line);
}

.account-notification:last-child {
  border-bottom: 0;
}

.account-notification.is-unread {
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

.account-notification-icon {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid color-mix(in srgb, var(--accent-strong) 30%, var(--line));
  border-radius: 50%;
  color: var(--accent-strong);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  font-size: 12px;
  font-weight: 800;
}

.account-notification-copy {
  min-width: 0;
}

.account-notification-title {
  display: flex;
  align-items: center;
  gap: 7px;
}

.account-notification-title strong {
  font-size: 13px;
}

.account-notification-title span {
  padding: 1px 6px;
  border-radius: 999px;
  color: var(--accent-strong);
  background: color-mix(in srgb, var(--accent) 13%, var(--surface));
  font-size: 10px;
  font-weight: 750;
}

.account-notification-copy p {
  margin: 3px 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 12px;
  line-height: 1.45;
}

.account-notification-copy time {
  color: var(--muted);
  font-size: 10px;
}

.account-notification-empty {
  margin: 0;
  padding: 18px 15px;
}

.account-profile-list > div {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

.account-profile-list dt {
  color: var(--muted);
}

.account-profile-list dd {
  margin: 0;
}

.account-ledger-section + .account-ledger-section {
  margin-top: 22px;
}

.account-ledger-section h3 {
  margin: 0 0 8px;
  font-size: 15px;
}

.account-token-overview {
  display: grid;
  gap: 14px;
  margin-bottom: 18px;
}

.account-token-quick-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.account-token-quick-stats > div {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-right: 1px solid var(--line);
}

.account-token-quick-stats > div:last-child {
  border-right: 0;
}

.account-token-quick-stats span,
.account-token-quick-stats small,
.account-token-chart-card small {
  color: var(--muted);
  font-size: 11px;
}

.account-token-quick-stats small {
  line-height: 1.4;
}

.account-token-quick-stats strong {
  font-size: 20px;
}

.account-token-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.account-token-chart-card {
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.account-token-chart-card > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.account-token-chart-card > header div {
  display: grid;
  gap: 2px;
}

.account-token-chart-card > header b {
  color: var(--accent-strong);
  font-size: 14px;
  white-space: nowrap;
}

.account-token-chart {
  display: block;
  width: 100%;
  height: auto;
  min-height: 155px;
  margin-top: 4px;
}

.account-token-chart text {
  fill: var(--muted);
  font-size: 11px;
}

.account-token-chart-grid line {
  stroke: var(--line);
  stroke-width: 1;
}

.account-token-chart.is-usage rect {
  fill: #2f80ed;
  opacity: 0.82;
}

.account-token-chart.is-usage rect:hover {
  opacity: 1;
}

.account-token-chart-area {
  fill: rgba(23, 107, 135, 0.12);
}

.account-token-chart-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.account-token-chart.is-balance circle {
  fill: var(--surface);
  stroke: var(--accent);
  stroke-width: 2;
}

.account-ledger-details {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
}

.account-ledger-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}

.account-ledger-details > summary::-webkit-details-marker {
  display: none;
}

.account-ledger-details > summary span {
  display: grid;
  gap: 2px;
}

.account-ledger-details > summary small {
  color: var(--muted);
  font-size: 11px;
}

.account-ledger-details > summary b {
  color: var(--accent);
  font-size: 12px;
}

.account-ledger-details[open] > summary {
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}

.account-ledger-details .admin-table-wrap {
  border: 0;
  border-radius: 0;
}

@media (max-width: 760px) {
  .account-token-chart-grid {
    grid-template-columns: 1fr;
  }

  .account-token-quick-stats {
    grid-template-columns: 1fr;
  }

  .account-token-quick-stats > div {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .account-token-quick-stats > div:last-child {
    border-bottom: 0;
  }
}

.account-refill-status {
  font-weight: 700;
}

.account-refill-status.is-available {
  color: #087f5b;
}

.account-refill-status.is-consumed {
  color: var(--muted);
}

.account-feedback-list {
  display: grid;
  gap: 10px;
}

.account-feedback-item {
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 5px;
}

.account-feedback-item header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.account-feedback-item header div {
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.account-feedback-item header span,
.account-feedback-item small {
  color: var(--muted);
  font-size: 11px;
}

.account-feedback-item > p {
  margin: 11px 0;
  white-space: pre-wrap;
}

.account-feedback-result {
  display: grid;
  gap: 4px;
  padding: 9px 10px;
  border-left: 3px solid #94a3b8;
  background: var(--surface-2);
}

.account-feedback-result.has-result {
  border-left-color: var(--accent);
}

.account-feedback-result span {
  white-space: pre-wrap;
}

.account-feedback-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.account-feedback-actions > span {
  display: flex;
  gap: 7px;
  flex-shrink: 0;
}

.account-feedback-actions button {
  min-height: 32px;
  padding: 5px 10px;
}

.login-required-backdrop {
  position: fixed;
  inset: 0;
  z-index: 145;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(15, 23, 42, 0.38);
}

.login-required-backdrop[hidden] {
  display: none;
}

.login-required-dialog {
  display: grid;
  gap: 14px;
  width: min(500px, calc(100vw - 36px));
  max-height: calc(100vh - 36px);
  padding: 18px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 20px 52px rgba(15, 23, 42, 0.28);
}

.login-required-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.login-required-head h2 {
  margin: 0;
  font-size: 20px;
}

.login-required-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.login-required-actions {
  display: flex;
  justify-content: flex-end;
}

.feedback-backdrop[hidden] {
  display: none;
}

.feedback-dialog {
  display: grid;
  gap: 14px;
  width: min(640px, calc(100vw - 36px));
  max-height: calc(100vh - 36px);
  padding: 18px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 20px 52px rgba(15, 23, 42, 0.28);
}

.feedback-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.feedback-dialog-head h2 {
  margin: 0;
  font-size: 20px;
}

.feedback-dialog-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.feedback-dialog-head .feedback-topic-hint {
  margin-top: 8px;
  padding-left: 9px;
  border-left: 3px solid #8fb7c5;
  color: var(--text);
  line-height: 1.5;
}

.feedback-form,
.feedback-form label {
  display: grid;
  gap: 7px;
}

.feedback-form {
  gap: 14px;
}

.feedback-form label > span {
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.feedback-form textarea {
  width: 100%;
  min-height: 180px;
  resize: vertical;
  line-height: 1.5;
}

.feedback-form input[type="file"] {
  width: 100%;
  min-width: 0;
}

.feedback-form small {
  color: var(--muted);
  font-size: 11px;
}

.feedback-file-summary {
  display: grid;
  gap: 5px;
  min-height: 0;
  color: var(--muted);
  font-size: 12px;
}

.feedback-file-summary:empty {
  display: none;
}

.feedback-file-summary > span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  border-bottom: 1px solid var(--line);
}

.feedback-file-summary > span:last-child {
  border-bottom: 0;
}

.feedback-file-summary strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feedback-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 4px;
}

.vehicle-model-dialog {
  width: min(1120px, calc(100vw - 36px));
}

.vehicle-model-form,
.vehicle-model-form label {
  display: grid;
  gap: 6px;
}

.vehicle-model-form {
  gap: 14px;
}

.vehicle-model-editor {
  display: grid;
  grid-template-columns: minmax(340px, 0.92fr) minmax(0, 1.18fr);
  align-items: start;
  gap: 16px;
}

.vehicle-model-configuration {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.vehicle-model-preview-panel {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
}

.vehicle-model-preview-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.vehicle-model-preview-panel > header strong {
  font-size: 13px;
}

.vehicle-model-preview-panel > header span {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vehicle-model-preview-stage {
  position: relative;
  width: 100%;
  min-height: 320px;
  overflow: hidden;
  border: 1px solid #34454f;
  border-radius: 5px;
  background: #10191e;
  aspect-ratio: 4 / 3;
}

.vehicle-model-axis-key {
  position: absolute;
  z-index: 3;
  top: 9px;
  left: 9px;
  display: grid;
  grid-template-columns: auto auto;
  gap: 5px;
  padding: 5px 7px;
  border: 1px solid rgba(210, 225, 231, 0.28);
  border-radius: 4px;
  background: rgba(8, 17, 22, 0.78);
  color: #f2f7f9;
  font-size: 10px;
  font-weight: 700;
  pointer-events: none;
}

.vehicle-model-axis-key span::before {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 4px;
  content: "";
}

.vehicle-model-axis-key [data-frame="body"]::before {
  height: 3px;
  background: #f2f7f9;
}

.vehicle-model-axis-key [data-frame="cad"]::before {
  height: 0;
  border-top: 2px dashed #f2f7f9;
}

.vehicle-model-preview-viewport,
.vehicle-model-preview-viewport .cesium-viewer,
.vehicle-model-preview-viewport .cesium-viewer-cesiumWidgetContainer,
.vehicle-model-preview-viewport .cesium-widget,
.vehicle-model-preview-viewport canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.vehicle-model-preview-viewport .cesium-widget-credits {
  max-width: calc(100% - 12px);
  overflow: hidden;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vehicle-model-preview-empty {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  gap: 6px;
  padding: 24px;
  color: #dce8ed;
  text-align: center;
  pointer-events: none;
}

.vehicle-model-preview-empty strong {
  font-size: 13px;
}

.vehicle-model-preview-empty span {
  max-width: 260px;
  color: #91a8b3;
  font-size: 11px;
  line-height: 1.5;
}

.vehicle-model-preview-empty[hidden] {
  display: none;
}

.vehicle-model-preview-status {
  position: absolute;
  z-index: 3;
  right: 10px;
  bottom: 10px;
  left: 10px;
  padding: 7px 9px;
  overflow: hidden;
  border: 1px solid rgba(170, 202, 215, 0.38);
  border-radius: 4px;
  background: rgba(9, 18, 23, 0.86);
  color: #e6f0f3;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

.vehicle-model-preview-status[hidden] {
  display: none;
}

.vehicle-model-preview-status[data-tone="error"] {
  border-color: rgba(255, 139, 127, 0.72);
  color: #ffd8d3;
}

.vehicle-model-preview-toolbar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 5px;
}

.vehicle-model-preview-toolbar button {
  min-width: 0;
  min-height: 30px;
  padding: 5px 7px;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
  color: var(--muted);
  font-size: 11px;
}

.vehicle-model-preview-toolbar button:last-child {
  border-right: 0;
}

.vehicle-model-preview-toolbar button:hover,
.vehicle-model-preview-toolbar button.is-active {
  background: #dff0f5;
  color: #075b76;
}

.vehicle-model-axis-map {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.vehicle-model-axis-map > span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 6px 7px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
}

.vehicle-model-axis-map b,
.vehicle-model-axis-map em {
  overflow: hidden;
  font-size: 10px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vehicle-model-axis-map b {
  color: var(--muted);
}

.vehicle-model-axis-map em {
  color: var(--text);
  font-weight: 700;
}

.vehicle-model-preview-meta {
  min-height: 16px;
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.vehicle-model-form label > span:first-child,
.vehicle-model-advanced summary {
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}

.vehicle-model-form small,
.vehicle-model-advanced p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.vehicle-model-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(140px, 168px);
  gap: 12px;
}

.vehicle-model-file-field {
  grid-column: 1 / -1;
}

.vehicle-model-upload-limit {
  color: #155c70;
  font-weight: 700;
}

.vehicle-model-existing-source {
  min-width: 0;
  padding: 7px 9px;
  overflow: hidden;
  border: 1px solid #bcd8e1;
  border-radius: 4px;
  background: #eef8fa;
  color: #155c70;
  font-size: 11px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vehicle-model-field-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.vehicle-model-help-icon {
  display: inline-grid;
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  padding: 0;
  place-items: center;
  border: 1px solid #aab9bf;
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.vehicle-model-help-icon:hover,
.vehicle-model-help-icon:focus-visible {
  border-color: #2f8ba8;
  color: #075b76;
}

.vehicle-model-size-field {
  align-content: start;
  min-width: 0;
}

.vehicle-model-size-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
}

.vehicle-model-size-input b {
  color: var(--muted);
  font-size: 11px;
}

.vehicle-model-advanced {
  padding: 10px 12px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
}

.vehicle-model-advanced summary {
  cursor: pointer;
}

.vehicle-model-advanced[open] summary {
  margin-bottom: 8px;
}

.vehicle-model-axis-preset {
  margin-top: 10px;
}

.vehicle-model-stl-unit {
  display: grid;
  grid-template-columns: minmax(150px, 190px) minmax(0, 1fr);
  align-items: end;
  gap: 8px 12px;
  margin-top: 8px;
  padding: 8px;
  border: 1px solid #c9dce3;
  border-radius: 5px;
  background: #f2f8fa;
}

.vehicle-model-stl-unit[hidden] {
  display: none;
}

.vehicle-model-stl-unit small {
  align-self: center;
}

.vehicle-model-axis-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.vehicle-model-axis-grid:not([data-custom="true"]) select {
  background: #f3f5f6;
}

.vehicle-model-center-option,
.vehicle-model-admin-active {
  display: flex !important;
  grid-column: 1 / -1;
  align-items: center;
  gap: 7px !important;
  margin-top: 10px;
}

.vehicle-model-center-option input,
.vehicle-model-admin-active input {
  width: auto;
}

.vehicle-model-transform-preview {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px 12px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.vehicle-model-transform-preview[hidden] {
  display: none;
}

.vehicle-model-transform-preview button {
  min-height: 32px;
  border-color: #2f8ba8;
  background: #e7f4f7;
  color: #075b76;
  font-weight: 700;
  white-space: nowrap;
}

.vehicle-model-transform-preview small {
  min-width: 0;
}

.vehicle-model-permission-note {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border-left: 3px solid #2f8ba8;
  background: #eef7fa;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.vehicle-model-permission-note strong {
  color: var(--text);
  font-size: 11px;
}

.vehicle-model-progress {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid #bdd8e1;
  border-radius: 6px;
  background: #f1f9fb;
}

.vehicle-model-progress[hidden] {
  display: none;
}

.vehicle-model-progress[data-tone="error"] {
  border-color: #e5b9b4;
  background: #fff3f1;
}

.vehicle-model-progress > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
}

.vehicle-model-progress span {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vehicle-model-progress progress {
  width: 100%;
  height: 8px;
}

.vehicle-model-result {
  min-height: 18px;
  color: var(--muted);
  font-size: 12px;
}

.vehicle-model-result[data-tone="error"] {
  color: var(--danger);
}

.vehicle-model-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.vehicle-model-admin-section {
  display: grid;
  grid-template-rows: auto minmax(260px, 1fr) auto auto;
  gap: 0;
}

.vehicle-model-admin-section .admin-directory-toolbar {
  grid-template-columns: minmax(260px, 1fr) auto;
  margin-bottom: 8px;
}

.admin-directory-toolbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.vehicle-model-admin-table {
  min-width: 1280px;
}

.vehicle-model-admin-table td {
  white-space: nowrap;
}

.admin-directory-name-button {
  display: grid;
  width: 100%;
  min-width: 150px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.admin-directory-name-button:hover {
  background: transparent;
  color: var(--accent);
}

.admin-directory-name-button small,
.admin-cell-stack small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
}

.admin-cell-stack {
  display: grid;
  gap: 2px;
}

.vehicle-model-duplicate {
  color: var(--danger) !important;
  font-weight: 700 !important;
}

.vehicle-model-admin-detail {
  max-height: 52vh;
  margin-top: 12px;
}

.vehicle-model-admin-detail > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.vehicle-model-admin-detail h4 {
  margin: 2px 0 0;
}

.vehicle-model-admin-detail header small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.vehicle-model-admin-fields {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(150px, 0.5fr);
  gap: 10px;
}

.vehicle-model-admin-detail form,
.vehicle-model-admin-detail form > label {
  display: grid;
  gap: 7px;
}

.vehicle-model-admin-detail form {
  gap: 12px;
}

.vehicle-model-admin-detail label > span:first-child {
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
}

.vehicle-model-admin-metadata {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--line);
}

.vehicle-model-admin-metadata > div {
  min-width: 0;
  padding: 8px;
  background: var(--surface);
}

.vehicle-model-admin-metadata dt {
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 10px;
}

.vehicle-model-admin-metadata dd {
  margin: 0;
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vehicle-model-linked-logs h5 {
  margin: 0 0 6px;
}

.vehicle-model-linked-logs ul {
  display: grid;
  gap: 4px;
  max-height: 120px;
  margin: 0;
  padding: 0;
  overflow: auto;
  list-style: none;
}

.vehicle-model-linked-logs li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 7px;
  background: var(--surface-2);
  font-size: 11px;
}

.vehicle-model-linked-logs li span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-token-dialog {
  display: grid;
  gap: 12px;
  width: min(520px, calc(100vw - 36px));
  max-height: calc(100vh - 36px);
  padding: 16px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.24);
}

.admin-token-dialog-balance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.admin-token-dialog-balance span,
.admin-token-dialog-description {
  color: var(--muted);
  font-size: 12px;
}

.admin-token-dialog-balance strong {
  color: var(--text);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.admin-token-dialog-description {
  margin: 0;
  line-height: 1.5;
}

.admin-token-dialog form,
.admin-token-dialog label {
  display: grid;
  gap: 6px;
}

.admin-token-dialog form {
  gap: 10px;
}

.admin-token-dialog label span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.admin-token-dialog input {
  width: 100%;
  min-width: 0;
}

.admin-token-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  padding-top: 4px;
}

.admin-token-dialog .danger-button {
  border-color: #d6aaa5;
  background: #fff5f3;
  color: #9a3028;
}

.admin-token-history-wrap {
  max-height: 245px;
}

.admin-token-history-table {
  min-width: 760px;
}

.admin-token-history-table td {
  max-width: 230px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-token-balance {
  color: var(--text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.admin-feedback-section {
  min-width: 0;
}

.admin-feedback-counts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}

.admin-feedback-counts strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.admin-feedback-toolbar {
  justify-content: flex-start;
}

.admin-feedback-toolbar input {
  flex: 1 1 320px;
  width: min(480px, 100%);
}

.admin-feedback-toolbar select {
  flex: 0 0 150px;
  width: 150px;
}

.admin-feedback-toolbar > span {
  margin-left: auto;
}

.admin-feedback-table-wrap {
  max-height: 430px;
}

.admin-feedback-table {
  min-width: 1060px;
}

.admin-feedback-table th:first-child,
.admin-feedback-table td:first-child {
  width: 155px;
  white-space: nowrap;
}

.admin-feedback-table th:nth-child(2),
.admin-feedback-table td:nth-child(2) {
  width: 190px;
}

.admin-feedback-table th:nth-child(4),
.admin-feedback-table td:nth-child(4),
.admin-feedback-table th:nth-child(6),
.admin-feedback-table td:nth-child(6) {
  width: 74px;
  text-align: center;
  white-space: nowrap;
}

.admin-feedback-table th:nth-child(5),
.admin-feedback-table td:nth-child(5) {
  width: 105px;
  white-space: nowrap;
}

.admin-feedback-table th:last-child,
.admin-feedback-table td:last-child {
  width: 78px;
  white-space: nowrap;
}

.admin-feedback-content-button {
  display: block;
  width: 100%;
  max-width: 480px;
  min-height: 0;
  padding: 2px 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: var(--text);
  font-weight: 400;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-feedback-content-button:hover {
  background: transparent;
  color: var(--accent-strong);
  text-decoration: underline;
}

.feedback-status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.feedback-status-badge.is-received {
  border-color: #aec8d7;
  background: #eef7fb;
  color: #175d75;
}

.feedback-status-badge.is-planned {
  border-color: #e2c27b;
  background: #fff8e8;
  color: #7c5700;
}

.feedback-status-badge.is-applied {
  border-color: #a8d0b6;
  background: #eff8f2;
  color: #23623b;
}

.feedback-status-badge.is-not_applied {
  border-color: #d6c3c0;
  background: #faf4f3;
  color: #7a4540;
}

.admin-feedback-detail {
  display: grid;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.admin-feedback-content {
  max-height: 240px;
  padding: 10px 0;
  overflow: auto;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.admin-feedback-attachments {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 12px;
}

.admin-feedback-attachments > strong {
  color: var(--muted);
}

.admin-feedback-attachments a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 320px;
  color: var(--accent-strong);
  text-decoration: none;
}

.admin-feedback-attachments a:hover {
  text-decoration: underline;
}

.admin-feedback-attachments a span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-feedback-attachments a small {
  flex: 0 0 auto;
  color: var(--muted);
}

.admin-feedback-review-form {
  display: grid;
  gap: 12px;
}

.admin-feedback-review-form label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.admin-feedback-review-form textarea {
  width: 100%;
  min-height: 88px;
  resize: vertical;
  line-height: 1.45;
}

.admin-feedback-review-fields {
  display: grid;
  grid-template-columns: minmax(160px, 220px) minmax(220px, 320px);
  gap: 12px;
}

.admin-feedback-review-fields input,
.admin-feedback-review-fields select {
  width: 100%;
}

.admin-feedback-field-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.admin-field-help {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  cursor: help;
}

.admin-field-help:hover,
.admin-field-help:focus-visible {
  color: var(--accent-strong);
  outline: none;
}

.admin-feedback-review-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-end;
}

.admin-feedback-review-actions .danger-link-button {
  margin-right: auto;
}

.admin-token-amount {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.admin-token-amount.is-credit {
  color: #17643a;
}

.admin-token-amount.is-debit {
  color: #a23831;
}

.admin-team-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 180px;
}

.admin-team-option {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
}

.admin-team-option input {
  width: auto;
  margin: 0;
}

.admin-team-option.is-disabled {
  opacity: 0.5;
}

.admin-empty-inline {
  color: var(--muted);
  font-size: 12px;
}

.admin-team-picker-large {
  max-height: 210px;
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.admin-default-team-field {
  display: grid;
  grid-template-columns: 64px minmax(180px, 320px) minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
}

.admin-default-team-field select {
  width: 100%;
  min-width: 0;
}

.admin-default-team-field small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
}

.detail-editor {
  color: var(--text);
}

.data-disclosure {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.data-disclosure-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 50px;
  padding: 8px 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  list-style: none;
}

.data-disclosure-toggle::-webkit-details-marker {
  display: none;
}

summary.data-disclosure-toggle {
  cursor: pointer;
}

.data-disclosure-toggle:hover,
.data-disclosure-toggle:focus-visible {
  background: var(--surface-2);
}

.data-disclosure-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.data-disclosure[open] > .data-disclosure-toggle,
.data-disclosure-toggle[aria-expanded="true"] {
  border-bottom: 1px solid var(--line);
  background: #f5f9fa;
}

.data-disclosure-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.data-disclosure-copy strong {
  font-size: 13px;
  font-weight: 700;
}

.detail-editor > .data-disclosure-toggle .data-disclosure-copy strong,
.log-detail-dialog-card .info-dialog-head h2 {
  color: var(--accent-strong);
}

.data-disclosure-copy small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-disclosure-copy small b {
  color: var(--text);
  font-weight: 600;
}

.data-disclosure-trailing {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
}

.data-disclosure-chevron {
  width: 9px;
  height: 9px;
  margin-right: 4px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 160ms ease;
}

.data-disclosure[open] > .data-disclosure-toggle .data-disclosure-chevron,
.data-disclosure-toggle[aria-expanded="true"] .data-disclosure-chevron {
  transform: rotate(225deg) translate(-2px, -2px);
}

.detail-editor-content {
  padding: 12px 10px 14px;
}

.detail-overview-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}

.detail-flight-metric-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 12px;
}

.detail-overview-strip > div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px 10px 8px 0;
  border-bottom: 1px solid var(--line);
}

.detail-overview-strip span {
  color: var(--muted);
  font-size: 10px;
}

.detail-overview-strip strong {
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-secondary-disclosure {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}

.detail-secondary-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
  padding: 8px 11px;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.detail-secondary-disclosure > summary small {
  margin-left: auto;
  color: var(--muted);
  font-size: 10px;
  font-weight: 450;
  text-align: right;
}

.detail-secondary-disclosure > summary::after {
  content: "▾";
  color: var(--muted);
  font-size: 10px;
}

.detail-secondary-disclosure[open] > summary::after {
  content: "▴";
}

.detail-secondary-disclosure > :not(summary) {
  margin: 0 10px 10px;
}

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

.detail-edit-layout {
  display: grid;
  gap: 0;
}

.detail-edit-group {
  display: grid;
  gap: 12px;
  padding: 15px 2px;
  border-bottom: 1px solid var(--line);
}

.detail-edit-group:last-child {
  border-bottom: 0;
}

.attachment-count-badge {
  display: inline-flex;
  min-width: 22px;
  min-height: 20px;
  align-items: center;
  justify-content: center;
  margin-left: 5px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--accent-strong);
  font-size: 11px;
}

.log-attachment-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.log-attachment-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-2);
}

.log-attachment-list a {
  display: grid;
  gap: 2px;
  min-width: 0;
  color: var(--accent-strong);
  text-decoration: none;
}

.log-attachment-list a:hover,
.log-attachment-list a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.log-attachment-name {
  overflow: hidden;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.log-attachment-list small,
.log-attachment-empty,
.log-attachment-upload > small {
  color: var(--muted);
  font-size: 11px;
}

.log-attachment-empty {
  padding: 10px;
  border: 1px dashed var(--line-strong);
  border-radius: 7px;
  text-align: center;
}

.log-attachment-upload {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  gap: 7px 10px;
}

.log-attachment-picker {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.log-attachment-picker input {
  min-width: 0;
  width: 100%;
}

.log-attachment-upload > small {
  grid-column: 1 / -1;
}

.detail-edit-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.detail-edit-section-head strong {
  color: var(--text);
  font-size: 13px;
}

.detail-edit-section-head span {
  color: var(--muted);
  font-size: 11px;
  text-align: right;
}

.detail-edit-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 14px;
}

.detail-tags-field {
  grid-column: span 2;
}

.detail-sharing-fields {
  grid-template-columns: minmax(180px, 0.65fr) minmax(260px, 1.35fr);
}

.detail-edit-fields > :is(.time-warning, .time-source) {
  grid-column: 1 / -1;
}

.detail-edit-fields label,
.detail-edit-group > .detail-note {
  display: grid;
  align-content: start;
  align-self: start;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
}

.detail-flight-primary-fields input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.detail-field-help {
  min-height: 1.35em;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

.detail-field-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.detail-field-label .metadata-external-link {
  font-size: 10px;
}

.detail-overview-strip .metadata-external-link,
.detail-info-card .metadata-external-link {
  color: inherit;
}

.detail-edit-fields input[type="date"],
.detail-edit-fields input[type="time"] {
  width: 100%;
  min-height: 34px;
  padding: 5px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text);
}

.demo-log-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, auto);
  align-items: center;
  gap: 16px;
  margin-top: 0;
  padding: 9px 10px;
  border: 0;
  border-left: 3px solid #d9c48a;
  border-radius: 0;
  background: #fffdf6;
}

.demo-log-card-copy {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 3px 8px;
  min-width: 0;
}

.demo-log-card-copy > strong {
  color: var(--text);
  font-size: 12px;
}

.demo-log-card-copy > small {
  grid-column: 1 / -1;
  color: #725d2b;
  font-size: 10px;
  line-height: 1.4;
}

.demo-log-admin-badge {
  padding: 2px 6px;
  border: 1px solid #d9b75e;
  border-radius: 999px;
  background: #fff3c9;
  color: #76520b;
  font-size: 9px;
  font-weight: 750;
  line-height: 1.35;
  white-space: nowrap;
}

.demo-log-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 6px 9px;
  border: 1px solid #dfd3ad;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--text);
  cursor: pointer;
}

.demo-log-toggle > input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.demo-log-switch {
  position: relative;
  flex: 0 0 auto;
  width: 38px;
  height: 22px;
  border: 1px solid #aeb7bd;
  border-radius: 999px;
  background: #d8dee2;
  transition:
    border-color 140ms ease,
    background 140ms ease;
}

.demo-log-switch::after {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.26);
  content: "";
  transition: transform 140ms ease;
}

.demo-log-toggle > input:checked + .demo-log-switch {
  border-color: #24728b;
  background: #2d819b;
}

.demo-log-toggle > input:checked + .demo-log-switch::after {
  transform: translateX(16px);
}

.demo-log-toggle > input:focus-visible + .demo-log-switch {
  outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: 2px;
}

.demo-log-toggle-copy {
  display: grid;
  gap: 1px;
}

.demo-log-toggle-copy strong {
  color: var(--text);
  font-size: 11px;
}

.demo-log-toggle-copy small {
  color: var(--muted);
  font-size: 10px;
}

.detail-note {
  min-width: 0;
}

.detail-system-grid {
  margin-top: 0;
}

.time-warning,
.time-source {
  display: grid;
  align-content: center;
  min-height: 42px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fbfcfd;
  color: var(--muted);
  font-size: 12px;
}

.time-warning {
  border-color: #e2b9a7;
  background: #fff6f2;
  color: #99411b;
  font-weight: 650;
}

.time-source.is-locked {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.time-unlock-button {
  min-height: 26px;
  padding: 3px 8px;
  border: 1px solid #c7d0d6;
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

.detail-edit-layout input:disabled {
  border-color: #d8dee2;
  background: #f4f6f7;
  color: #7d8a93;
  cursor: not-allowed;
}

.detail-note textarea {
  min-height: 76px;
}

.detail-facts,
.weather-detail {
  display: grid;
  align-content: start;
  gap: 5px;
  min-height: 76px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fbfcfd;
  color: var(--muted);
  font-size: 12px;
}

.detail-facts b {
  color: var(--text);
  font-weight: 550;
}

.detail-record-facts {
  grid-column: span 2;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fbfcfd;
}

.detail-info-card {
  grid-column: span 2;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fbfcfd;
}

.detail-info-card dl,
.detail-readonly-grid {
  margin: 0;
}

.detail-info-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 14px;
}

.detail-info-card dl > div {
  display: grid;
  grid-template-columns: minmax(76px, auto) minmax(0, 1fr);
  gap: 7px;
}

.detail-info-card dt,
.detail-info-card dd {
  min-width: 0;
  margin: 0;
  font-size: 12px;
}

.detail-info-card dt {
  color: var(--muted);
}

.detail-info-card dd {
  overflow: hidden;
  color: var(--text);
  font-weight: 550;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-weather-card {
  grid-column: span 2;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.detail-weather-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.detail-weather-refresh {
  align-self: center;
  min-height: 32px;
  white-space: nowrap;
}

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

.detail-readonly-grid .detail-record-facts {
  grid-column: 1 / -1;
}

.detail-record-title {
  display: block;
  margin-bottom: 7px;
  color: var(--text);
  font-size: 12px;
}

.detail-record-facts dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 14px;
  margin: 0;
}

.detail-record-facts dl > div {
  display: grid;
  grid-template-columns: minmax(72px, auto) minmax(0, 1fr);
  gap: 7px;
}

.detail-record-facts dt,
.detail-record-facts dd {
  min-width: 0;
  margin: 0;
  font-size: 12px;
}

.detail-record-facts dt {
  color: var(--muted);
}

.detail-record-facts dd {
  overflow: hidden;
  color: var(--text);
  font-weight: 550;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.weather-detail .detail-weather-copy > div {
  color: var(--text);
  font-size: 14px;
  font-weight: 650;
}

.weather-detail .detail-weather-copy > span {
  color: var(--muted);
  font-size: 12px;
}

.weather-detail.is-error {
  border-color: #e2b9a7;
  background: #fff6f1;
}

.stats-disclosure {
  margin-top: 10px;
}

.flight-stats-panel {
  display: grid;
  gap: 10px;
  padding: 12px 10px 14px;
}

.flight-stats-panel[hidden] {
  display: none;
}

.feature-showcase {
  position: relative;
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding: 14px;
  overflow: hidden;
  border: 1px solid #cddde2;
  border-radius: 10px;
  background: linear-gradient(145deg, #f8fbfc 0%, #f1f7f8 100%);
}

.feature-showcase-head {
  display: flex;
  max-width: none;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px 12px;
}

.feature-showcase-eyebrow {
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.feature-showcase-head h2,
.feature-showcase-card h3,
.feature-showcase-head p,
.feature-showcase-card p {
  margin: 0;
}

.feature-showcase-head h2 {
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.feature-showcase-head p {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.feature-showcase-controls {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
}

.feature-showcase-controls[hidden] {
  display: none;
}

.feature-showcase-controls button {
  display: inline-grid;
  width: 29px;
  min-width: 29px;
  min-height: 29px;
  place-items: center;
  padding: 0;
  border-color: #b8ccd2;
  background: rgba(255, 255, 255, 0.88);
  color: #15556b;
  font-size: 19px;
  line-height: 1;
}

.feature-showcase-controls span {
  min-width: 38px;
  color: var(--muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.feature-showcase-grid {
  display: grid;
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: clamp(220px, calc((100% - 60px) / 6), 280px);
  gap: 12px;
  overflow: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}

.feature-showcase-card:nth-child(1) { order: 1; }
.feature-showcase-card:nth-child(2) { order: 2; }
.feature-showcase-card:nth-child(3) { order: 4; }
.feature-showcase-card:nth-child(4) { order: 3; }
.feature-showcase-card:nth-child(5) { order: 5; }
.feature-showcase-card:nth-child(6) { order: 6; }

.feature-showcase-card {
  display: flex;
  min-width: 0;
  overflow: hidden;
  flex-direction: column;
  border: 1px solid rgba(126, 158, 168, 0.42);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 4px 12px rgba(24, 58, 68, 0.06);
  scroll-snap-align: start;
}

.feature-showcase-card.is-featured {
  display: flex;
  grid-column: auto;
}

.feature-showcase-media {
  position: relative;
  min-width: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #dce8eb;
}

.feature-showcase-card.is-featured .feature-showcase-media {
  aspect-ratio: 16 / 9;
}

.feature-showcase-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.feature-showcase-still {
  display: none !important;
}

.feature-showcase-copy {
  display: flex;
  flex: 1 1 auto;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
}

.feature-showcase-copy > div {
  display: grid;
  gap: 4px;
}

.feature-showcase-card h3 {
  font-size: 13px;
  line-height: 1.35;
}

.feature-showcase-card p {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.feature-showcase-open {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 32px;
  padding: 5px 9px;
  border-color: #a8c5cd;
  background: #f5fafb;
  color: #145f70;
  font-size: 11px;
  font-weight: 750;
}

.feature-showcase-open:hover {
  border-color: var(--accent);
  background: #eaf5f7;
}

@media (max-width: 1050px) {
  .feature-showcase-grid {
    grid-auto-columns: minmax(220px, calc((100% - 24px) / 3));
  }
}

@media (max-width: 680px) {
  .feature-showcase {
    gap: 11px;
    padding: 12px;
  }

  .feature-showcase-head {
    display: flex;
    gap: 3px;
  }

  .feature-showcase-head h2 {
    width: calc(100% - 94px);
  }

  .feature-showcase-controls {
    align-self: flex-start;
  }

  .feature-showcase-head p {
    display: none;
  }

  .feature-showcase-card,
  .feature-showcase-card.is-featured {
    display: grid;
    grid-template-columns: minmax(112px, 40%) minmax(0, 1fr);
  }

  .feature-showcase-grid {
    grid-auto-columns: min(86vw, 360px);
  }

  .feature-showcase-media,
  .feature-showcase-card.is-featured .feature-showcase-media {
    height: 100%;
    min-height: 118px;
    aspect-ratio: auto;
  }

  .feature-showcase-copy {
    gap: 9px;
    padding: 10px;
  }

  .feature-showcase-card p {
    display: none;
  }

  .feature-showcase-open {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .feature-showcase-animation {
    display: none !important;
  }

  .feature-showcase-still {
    display: block !important;
  }
}

.stats-context {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

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

.stat-card {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fbfcfd;
}

.stat-card span,
.stat-card em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stat-card strong {
  font-size: 17px;
  font-weight: 700;
}

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

.stats-columns.stats-columns-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

.stats-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding-top: 5px;
  border-bottom: 1px solid var(--line);
}

.stats-section-head h4 {
  margin: 0 0 6px;
  font-size: 14px;
}

.stats-section-head p,
.stats-block-note {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 11px;
}

.stats-block {
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
}

.stats-block h4 {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 650;
}

.stats-mini-table,
.nested-param-table {
  width: 100%;
  border-collapse: collapse;
}

.stats-mini-table-wrap {
  max-height: 300px;
  overflow: auto;
}

.stats-mini-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 5px 7px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  text-align: left;
  white-space: nowrap;
}

.stats-mini-table td,
.nested-param-table td {
  padding: 6px 7px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.stats-mini-table tr:last-child td,
.nested-param-table tr:last-child td {
  border-bottom: 0;
}

.stats-mini-table td:last-child {
  color: var(--text);
  font-weight: 650;
  text-align: right;
  white-space: nowrap;
}

.stats-summary-table td:nth-child(2),
.stats-diagnostic-table td:not(:first-child) {
  text-align: right;
  white-space: nowrap;
}

.stats-summary-table td:first-child,
.stats-diagnostic-table td:nth-child(2) {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stats-diagnostic-issues-table td:nth-child(2) {
  text-align: left;
}

.stats-weather-distribution-section {
  min-width: 0;
}

.stats-location-map-section {
  min-width: 0;
}

.stats-location-map-frame {
  position: relative;
  min-height: 390px;
  margin-top: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #11181d;
}

.stats-location-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.stats-location-map .leaflet-container {
  width: 100%;
  height: 100%;
}

.stats-location-marker-shell {
  border: 0;
  background: transparent;
}

.stats-location-marker {
  display: grid;
  width: var(--marker-size);
  height: var(--marker-size);
  box-sizing: border-box;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(34, 199, 169, 0.92);
  box-shadow: 0 1px 5px rgba(4, 30, 27, 0.45);
  color: #fff;
  font-size: 12px;
  font-weight: 750;
  line-height: 1;
}

.stats-location-marker.is-group {
  background: rgba(17, 168, 140, 0.92);
  text-shadow: 0 1px 2px #075b50;
}

.stats-location-map .leaflet-tooltip {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(12, 24, 31, 0.9);
  color: #f8fafc;
  font: 650 11px/1.4 Inter, Arial, sans-serif;
}

.stats-location-map-tooltip,
.stats-location-map-hint {
  position: absolute;
  z-index: 2;
  max-width: min(420px, calc(100% - 24px));
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 6px;
  background: rgba(12, 24, 31, 0.84);
  color: #f8fafc;
  font-size: 11px;
  line-height: 1.4;
  pointer-events: none;
  backdrop-filter: blur(5px);
}

.stats-location-map-tooltip {
  top: 10px;
  left: 10px;
  padding: 7px 9px;
  font-weight: 650;
}

.stats-location-map-hint {
  right: 10px;
  bottom: 10px;
  padding: 5px 8px;
  color: rgba(248, 250, 252, 0.86);
}

.stats-location-map-empty {
  display: grid;
  min-height: 180px;
  margin-top: 10px;
  place-items: center;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 12px;
}

.stats-weather-distributions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.stats-weather-chart {
  min-width: 0;
  padding: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.stats-weather-chart-head,
.stats-weather-chart-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.stats-weather-chart-head > div {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}

.stats-weather-chart-head h5 {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.stats-weather-chart-head > span {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 10px;
}

.stats-weather-chart-summary {
  margin-top: 7px;
  padding: 5px 7px;
  border-radius: 5px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 9px;
  white-space: nowrap;
}

.stats-weather-chart-summary strong {
  margin-left: 2px;
  color: var(--text);
  font-size: 10px;
  font-weight: 700;
}

.stats-weather-scatter {
  display: block;
  width: 100%;
  height: auto;
  min-height: 138px;
  margin-top: 5px;
  overflow: visible;
}

.stats-weather-axis {
  stroke: var(--line-strong);
  stroke-width: 1.4;
}

.stats-weather-grid {
  stroke: var(--line);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}

.stats-weather-tick {
  fill: var(--muted);
  font-size: 10px;
  text-anchor: middle;
}

.stats-weather-dot {
  fill: var(--accent);
  stroke: var(--surface);
  stroke-width: 1.4;
  opacity: 0.82;
  transition: opacity 120ms ease, r 120ms ease;
}

.stats-weather-chart-humidity .stats-weather-dot {
  fill: #0ea5e9;
}

.stats-weather-chart-wind .stats-weather-dot {
  fill: #7c3aed;
}

.stats-weather-dot:hover {
  r: 6px;
  opacity: 1;
}

.stats-weather-distribution-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 2px 0;
}

.stats-weather-size-legend {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 11px;
}

.stats-weather-size-dot {
  display: inline-block;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.82;
}

.stats-weather-size-dot.is-small {
  width: 6px;
  height: 6px;
}

.stats-weather-size-dot.is-large {
  width: 12px;
  height: 12px;
}

.stats-weather-distribution-note {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.stats-weather-chart-empty {
  display: grid;
  min-height: 170px;
  place-items: center;
  color: var(--muted);
  font-size: 12px;
}

.log-save-state {
  min-height: 16px;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.log-save-state:empty {
  display: none;
}

.analysis-tabs {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 42px;
  padding: 0 4px;
  border-bottom: 1px solid var(--line);
  border-radius: 7px 7px 0 0;
  background: var(--surface-soft);
}

.analysis-tabs button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 41px;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}

.analysis-tabs button::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: transparent;
}

.analysis-tabs button:hover,
.analysis-tabs button.is-active {
  border-color: transparent;
  background: transparent;
  color: var(--accent-strong);
}

.analysis-tabs button.is-active::after {
  background: var(--accent);
}

.analysis-beta-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 1px 6px;
  border: 1px solid #d9a441;
  border-radius: 999px;
  background: #fff4d8;
  color: #875b09;
  font-size: 10px;
  font-weight: 750;
  line-height: 1;
  letter-spacing: 0.02em;
}

.toolbar {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-muted);
}

.toolbar label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
}

.toolbar label select {
  color: var(--text);
  font-size: 14px;
}

.toolbar .analysis-preset-control {
  display: grid;
  gap: 4px;
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 700;
}

.toolbar .analysis-quick-control {
  min-width: 100px;
}

.toolbar .analysis-quick-control input,
.toolbar .analysis-quick-control select {
  min-height: 36px;
}

.toolbar .analysis-quick-control input {
  width: 88px;
}

.analysis-preset-picker {
  position: relative;
  width: 210px;
  max-width: calc(100vw - 48px);
}

#presetMenuButton {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 34px;
  padding: 5px 10px;
  border: 2px solid var(--accent);
  border-radius: 7px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 14px;
  font-weight: 700;
  text-align: left;
}

#presetMenuButton:hover,
#presetMenuButton:focus,
#presetMenuButton[aria-expanded="true"] {
  border-color: var(--accent-strong);
  background: #cce6ed;
}

.analysis-preset-menu {
  position: absolute;
  z-index: 120;
  top: calc(100% + 5px);
  left: 0;
  width: max-content;
  min-width: 210px;
  padding: 6px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.analysis-preset-menu[hidden] {
  display: none;
}

.analysis-preset-menu-group + .analysis-preset-menu-group {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--line);
}

.analysis-preset-menu-group-label {
  display: block;
  padding: 2px 8px 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.04em;
}

.analysis-preset-menu-option {
  display: block;
  width: 100%;
  min-height: 27px;
  padding: 4px 9px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  text-align: left;
  white-space: nowrap;
}

.analysis-preset-menu-option:hover,
.analysis-preset-menu-option:focus {
  background: var(--surface-2);
}

.analysis-preset-menu-option[aria-selected="true"] {
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 750;
}

.toolbar-button-group {
  display: flex;
  align-items: end;
  gap: 6px;
}

.analysis-options {
  align-self: end;
}

.analysis-options-panel {
  grid-template-columns: repeat(2, minmax(135px, 1fr));
  width: min(430px, calc(100vw - 32px));
}

.analysis-options-panel > button {
  align-self: end;
  min-height: 36px;
}

.selection-info {
  color: var(--muted);
  font-size: 13px;
}

.summary-strip {
  display: grid;
  grid-template-columns: 190px repeat(var(--sortie-count, 1), minmax(0, 1fr));
  gap: 8px;
  padding-inline: 8px;
}

.summary-metric-cell,
.summary-card {
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.summary-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 650;
}

.summary-card-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.summary-card-text {
  min-width: 0;
}

.summary-meta {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
}

.summary-flight-facts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 7px;
}

.summary-flight-fact {
  display: inline-flex;
  align-items: baseline;
  min-width: 0;
  gap: 5px;
  padding: 0;
  border: 0;
}

.summary-flight-fact small {
  display: inline;
  flex: 0 0 auto;
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}

.summary-flight-fact strong {
  display: inline;
  overflow: hidden;
  color: var(--text);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.summary-flight-weather .weather-pill {
  display: inline;
  width: auto;
  max-width: none;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.4;
}

.control-response-window strong {
  color: var(--text);
  font-size: 11px;
  white-space: nowrap;
}

.control-response-window .window-start-row {
  grid-template-columns: auto auto;
}

.control-response-window .window-start-row small {
  grid-column: 1 / -1;
  justify-self: end;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.25;
  white-space: nowrap;
}

.summary-inline-note {
  margin-left: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.new-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 5px;
  border-radius: 999px;
  background: #176b87;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  vertical-align: 1px;
}

.summary-hint {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
}

.overview-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 10px;
  margin: 8px 0 0;
  padding-top: 7px;
  border-top: 1px solid var(--line);
}

.overview-summary-fact {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 5px;
  min-width: 0;
  font-size: 11px;
  line-height: 1.4;
}

.overview-summary-note {
  grid-column: 1 / -1;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 11.5px;
  font-weight: 750;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-summary-fact.is-wide {
  grid-column: 1 / -1;
}

.overview-summary-fact dt {
  color: var(--muted);
  font-weight: 650;
  white-space: nowrap;
}

.overview-summary-fact dd {
  min-width: 0;
  overflow: hidden;
  margin: 0;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gain-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  grid-auto-flow: row;
  align-items: start;
  gap: 6px 5px;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid var(--line);
}

.gain-group {
  min-width: 0;
}

.gain-group-title {
  overflow: hidden;
  padding: 0 2px 3px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gain-group-list {
  display: grid;
  gap: 1px;
  padding-top: 2px;
}

.gain-chip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  padding: 2px 3px;
  border-bottom: 1px solid var(--line);
  border-radius: 2px;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
}

.gain-chip > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gain-chip strong {
  color: var(--text);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.gain-chip.is-different {
  border-left: 2px solid var(--warn);
  border-bottom-color: #edcfaa;
  background: #fff2df;
  color: var(--warn);
  font-weight: 650;
}

.gain-chip.is-different strong {
  color: var(--warn);
  font-weight: 700;
}

.gain-chip.is-empty {
  opacity: 0.62;
}

.chart-grid {
  display: grid;
  gap: 8px;
}

.custom-graph-builder {
  display: grid;
  grid-template-columns: minmax(180px, 0.7fr) minmax(520px, 1.8fr);
  gap: 18px;
  align-items: center;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid #bdd9df;
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  background: #f2f8f9;
}

.custom-graph-builder > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.custom-graph-builder > div:first-child span {
  color: var(--muted);
  font-size: 12px;
}

.custom-graph-builder-controls {
  display: grid;
  grid-template-columns: minmax(120px, 0.7fr) minmax(220px, 1.5fr) auto auto;
  gap: 7px;
  align-items: center;
  min-width: 0;
}

.custom-graph-builder-controls input,
.custom-graph-builder-controls select,
.custom-graph-builder-controls button {
  min-height: 34px;
}

.preset-graph-appender {
  display: flex;
  justify-content: center;
  min-width: 0;
  padding: 3px 0 8px;
}

.preset-graph-appender.is-open {
  justify-content: stretch;
}

.preset-graph-appender-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  padding: 5px 12px;
  border: 1px dashed #9ab6bc;
  border-radius: 999px;
  background: #f8fbfc;
  color: #315d67;
  font-size: 12px;
  font-weight: 700;
}

.preset-graph-appender-toggle:hover {
  border-color: var(--accent);
  background: #eef7f8;
  color: var(--accent-strong);
}

.preset-graph-appender.is-open .preset-graph-appender-toggle {
  display: none;
}

.preset-graph-appender-controls {
  display: grid;
  grid-template-columns: minmax(140px, 0.7fr) minmax(260px, 1.5fr) auto auto;
  gap: 7px;
  align-items: center;
  width: min(100%, 820px);
  margin: 0 auto;
  padding: 8px;
  border: 1px solid #c8d9dd;
  border-radius: 8px;
  background: #f8fbfc;
}

.preset-graph-appender-controls input,
.preset-graph-appender-controls select,
.preset-graph-appender-controls button {
  min-height: 34px;
}

.chart-order-button.is-danger {
  border-color: #efb7b7;
  color: #b42318;
}

.chart-order-button.is-danger:hover:not(:disabled) {
  border-color: #b42318;
  color: #8f1710;
}

@media (max-width: 1050px) {
  .custom-graph-builder {
    grid-template-columns: 1fr;
  }

  .custom-graph-builder-controls {
    grid-template-columns: minmax(110px, 0.7fr) minmax(180px, 1.4fr) auto;
  }

  .custom-graph-builder-controls .link-button {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

@media (max-width: 560px) {
  .custom-graph-builder-controls {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .custom-graph-builder-controls input {
    grid-column: 1 / -1;
    width: 100%;
  }

  .custom-graph-builder-controls select {
    min-width: 0;
    width: 100%;
  }

  .custom-graph-builder-controls .link-button {
    grid-column: 1 / -1;
  }

  .preset-graph-appender-controls {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .preset-graph-appender-controls input {
    grid-column: 1 / -1;
    width: 100%;
  }

  .preset-graph-appender-controls select {
    min-width: 0;
    width: 100%;
  }
}

.chart-panel {
  min-width: 0;
  padding: 8px;
}

.chart-panel.is-collapsed {
  padding: 7px 8px;
}

.compact-chart-panel {
  box-shadow: 0 4px 16px rgba(15, 23, 30, 0.05);
}

.chart-row-grid {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
}

.path-chart-panel .chart-row-grid {
  grid-template-columns: 190px minmax(0, 1fr);
}

.chart-panel.is-collapsed .chart-row-grid {
  grid-template-columns: 1fr;
}

.chart-label-cell {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
  padding: 4px 8px 4px 2px;
  border-right: 1px solid var(--line);
}

.chart-panel.is-collapsed .chart-label-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0;
  border-right: 0;
}

.chart-label-cell h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0;
}

.chart-title-row {
  display: block;
  min-width: 0;
}

.chart-panel.is-collapsed .chart-title-row {
  flex: 1 1 auto;
}

.chart-title-row h2 {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: normal;
  word-break: normal;
}

.chart-range-zoom-button,
.chart-zoom-out-button,
.chart-download-button,
.chart-debrief-button,
.chart-report-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  min-height: 24px;
  padding: 2px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}

.chart-range-zoom-button:hover,
.chart-zoom-out-button:hover,
.chart-download-button:hover,
.chart-debrief-button:hover,
.chart-report-button:hover,
.chart-zoom-out-button:focus-visible,
.chart-download-button:focus-visible,
.chart-debrief-button:focus-visible,
.chart-report-button:focus-visible,
.chart-range-zoom-button.is-active {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  color: var(--accent-strong);
}

.chart-range-zoom-button.is-active {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}

.chart-range-zoom-icon,
.chart-zoom-out-icon,
.chart-download-icon,
.chart-debrief-icon,
.chart-report-icon {
  display: block;
  width: 15px;
  height: 15px;
}

.chart-title-toggle {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  max-width: none;
  min-width: 0;
  min-height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: inherit;
  font-weight: inherit;
  line-height: 1.2;
  text-align: left;
}

.chart-title-text {
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.chart-title-toggle:hover {
  color: var(--accent-strong);
}

.chart-title-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.chart-toggle-icon {
  width: 14px;
  color: var(--accent-strong);
  font-size: 12px;
  text-align: center;
}

.chart-collapsed-note {
  color: var(--muted);
  font-size: 12px;
}


.chart-label-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 3px;
  margin-top: auto;
  padding-top: 5px;
  border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
}

.chart-view-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 2px;
  min-width: 0;
  margin-left: 0;
}

.chart-unit-controls {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-left: 0;
}

.chart-download-button:disabled,
.chart-download-button.is-busy,
.chart-debrief-button:disabled,
.chart-report-button:disabled,
.chart-zoom-out-button:disabled {
  cursor: progress;
  opacity: 0.55;
}

.chart-download-button.is-complete,
.chart-debrief-button.is-complete,
.chart-report-button.is-complete,
.analysis-chart-download.is-complete,
.analysis-debrief-capture.is-complete,
.analysis-report-capture.is-complete {
  border-color: #15803d;
  background: color-mix(in srgb, #22c55e 14%, var(--surface));
  color: #15803d;
}

.chart-download-button.is-complete::after,
.chart-debrief-button.is-complete::after,
.chart-report-button.is-complete::after,
.analysis-chart-download.is-complete::after,
.analysis-debrief-capture.is-complete::after,
.analysis-report-capture.is-complete::after {
  content: "✓";
  position: absolute;
  top: -5px;
  right: -5px;
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: #15803d;
  color: #fff;
  font: 800 9px/1 Arial, sans-serif;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.24);
  pointer-events: none;
}

.chart-zoom-out-button:disabled {
  cursor: default;
}

.chart-unit-button {
  min-width: 36px;
  min-height: 22px;
  padding: 2px 6px;
  border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: var(--accent-strong);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.chart-unit-button:hover,
.chart-unit-button:focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
}

.chart-panel.is-collapsed .chart-label-actions {
  display: flex;
  margin-top: 0;
  margin-left: auto;
  padding-top: 0;
  border-top: 0;
}

.chart-order-controls {
  display: inline-flex;
  gap: 2px;
}

.chart-order-button {
  width: 23px;
  min-height: 22px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
}

.chart-order-button:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent-strong);
}

.chart-order-button:disabled {
  opacity: 0.35;
  cursor: default;
}

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

.chart-subtitle {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.legend {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  min-height: 18px;
  color: var(--muted);
  font-size: 11px;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  min-height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: inherit;
  line-height: 1.25;
}

.legend-series-entry {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.legend-color-input {
  width: 16px;
  height: 16px;
  min-width: 16px;
  padding: 0;
  border: 1px solid rgba(42, 58, 68, 0.28);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
}

.legend-color-input::-webkit-color-swatch-wrapper {
  padding: 0;
}

.legend-color-input::-webkit-color-swatch {
  border: 0;
  border-radius: 50%;
}

.legend-color-input::-moz-color-swatch {
  border: 0;
  border-radius: 50%;
}

.legend-color-input:focus-visible,
.legend-color-reset:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.legend-color-reset {
  display: inline-grid;
  place-items: center;
  width: 20px;
  min-width: 20px;
  min-height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
}

.legend-color-reset:hover {
  border-color: transparent;
  color: var(--accent-strong);
}

.legend-item:hover {
  border-color: transparent;
  color: var(--accent-strong);
}

.legend-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.legend-item.is-off {
  color: #8a98a1 !important;
  opacity: 0.58;
}

.legend-item.is-off span:last-child {
  text-decoration: line-through;
}

.legend-static {
  cursor: default;
}

.legend-swatch {
  width: 15px;
  height: 0;
  border-top: 3px solid currentColor;
}

.legend-swatch.is-dashed {
  border-top-style: dashed;
}

.legend-swatch.is-dotted {
  border-top-style: dotted;
}

.legend-swatch.is-band {
  height: 8px;
  border: 1px solid currentColor;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.28;
}

.legend-mode-swatch {
  width: 15px;
  height: 0;
  border-top: 4px solid currentColor;
  border-radius: 2px;
}

.legend-quality-swatch {
  width: 18px;
  height: 3px;
  background: repeating-linear-gradient(90deg, #ffffff 0 6px, transparent 6px 10px);
  filter: drop-shadow(0 0 1px #111820);
}

.legend-quality-swatch.is-error {
  background: repeating-linear-gradient(90deg, #ffffff 0 2px, transparent 2px 5px);
}

.legend-waypoint-swatch {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 16px;
  border: 1px solid #ffffff;
  border-radius: 8px 8px 8px 2px;
  background: #ef476f;
  box-shadow: 0 0 0 1px rgba(24, 32, 38, 0.35);
  color: #ffffff;
  font-size: 8px;
  font-weight: 800;
}

.summary-window-start {
  justify-self: end;
  min-width: 150px;
}

.window-start-row {
  display: grid;
  grid-template-columns: auto minmax(56px, 70px) auto auto;
  gap: 5px;
  align-items: center;
  color: var(--muted);
  font-size: 11px;
  width: 100%;
  max-width: 100%;
}

.window-start-label {
  font-weight: 700;
}

.window-start-row input {
  width: 100%;
  min-width: 0;
  height: 23px;
  min-height: 23px;
  padding: 1px 5px;
  font-size: 12px;
}

.window-end-value {
  color: var(--text);
  font-size: 12px;
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .summary-card-main {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .summary-window-start {
    justify-self: start;
  }
}

.map-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.map-toggle input {
  margin: 0;
}

.path-tools {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  margin-top: 5px;
}

.path-tool-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  align-items: stretch;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fbfcfd;
}

.path-tool-caption {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
}

.path-tool-actions {
  border-color: #cdd6dc;
  background: #f6f8f9;
}

.path-tool {
  width: 100%;
  min-height: 22px;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
}

.path-tool.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 700;
}

.path-tool-actions .path-tool {
  color: #4f6678;
}

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

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

.control-effector-panel-help {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.control-effect-meta-pane {
  display: grid;
  align-content: start;
  gap: 6px;
  min-height: 66px;
  padding: 7px 2px 3px;
  border-top: 3px solid var(--control-effect-color, var(--accent));
}

.control-effect-status-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 10px;
}

.control-effect-status-line > strong {
  color: var(--text);
  font-size: 11px;
}

.control-effect-status-line > span,
.control-effect-warning,
.control-effect-line-help {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.4;
}

.control-effect-warning {
  color: #9a3412;
}

.control-effect-parameter-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 12px;
  color: var(--muted);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}

.control-effect-parameter-summary b {
  color: var(--text);
  font-weight: 650;
}

.control-effect-row-legend {
  display: grid;
  gap: 5px;
  margin-top: 2px;
}

.control-effect-graph-pane {
  min-height: 190px;
}

.control-effect-graph-pane .trim-analysis-chart {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.control-effect-parameter-line {
  display: block;
  min-height: 15px;
  margin: 0 4px 2px;
  overflow: hidden;
  color: var(--muted);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.control-effect-pane-message {
  display: grid;
  min-height: 180px;
  margin: 0;
  place-items: center;
  color: var(--muted);
  font-size: 10px;
}

.control-effect-values {
  margin-top: 4px;
  border-top: 1px solid var(--line);
}

.control-effect-values > summary {
  padding: 6px 3px 2px;
  color: var(--muted);
  font-size: 9px;
  cursor: pointer;
}

.control-effect-values .trim-gain-table-wrap {
  margin-top: 5px;
  border-radius: 4px;
}

.sortie-pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 24px;
  margin-bottom: 5px;
}

.sortie-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 13px;
  font-weight: 650;
}

.sortie-title span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sortie-color {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.pane-window,
.pane-readout {
  color: var(--muted);
  font-size: 12px;
}

.pane-window {
  flex: 0 0 auto;
  text-align: right;
}

.pane-readout {
  min-height: 32px;
  margin-top: 4px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.chart-canvas {
  display: block;
  width: 100%;
  height: 188px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  cursor: crosshair;
  touch-action: pan-y;
}

.chart-canvas.is-range-zoom {
  cursor: zoom-in;
}

.path-chart-panel.sortie-count-1 .chart-canvas {
  height: 520px;
}

.path-chart-panel.sortie-count-2 .chart-canvas {
  height: 440px;
}

.path-chart-panel.sortie-count-3 .chart-canvas,
.path-chart-panel.sortie-count-4 .chart-canvas,
.path-chart-panel.sortie-count-5 .chart-canvas {
  height: 380px;
}

.param-panel {
  padding: 12px;
}

.param-panel > .panel-head {
  display: grid;
  grid-template-columns: auto minmax(330px, 1fr) 160px auto;
  align-items: center;
  gap: 8px;
}

.param-options {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  min-width: 0;
  margin-left: 0;
  color: var(--muted);
  font-size: 12px;
}

.param-options label {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 5px;
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
  white-space: nowrap;
}

.param-options input {
  margin: 0;
}

.param-search {
  width: 160px;
  min-height: 32px;
}

.param-table-wrap {
  height: 660px;
  min-height: 330px;
  overflow: auto;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.param-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.param-table th,
.param-table td {
  padding: 7px 9px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.param-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-2);
  font-weight: 650;
}

.param-meta-cell {
  color: var(--muted);
  white-space: nowrap;
}

.param-name-link {
  color: inherit;
  text-decoration: none;
}

.param-name-link:hover {
  color: var(--accent-strong);
  text-decoration: underline;
}

.param-row-highlight code,
.param-value-cell.is-highlight {
  font-weight: 800;
}

.param-value-cell.is-different {
  font-weight: 700;
}

.param-table tr:last-child td {
  border-bottom: 0;
}

.param-calibration-row > td {
  padding: 0;
}

.param-calibration-details {
  background: #fbfcfd;
}

.param-calibration-details summary {
  min-height: 34px;
  padding: 8px 9px;
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.nested-param-table {
  background: var(--surface);
  font-size: 12px;
}

.nested-param-table code {
  color: var(--muted);
}

.empty-state {
  padding: 18px 8px;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

.analysis-diagnostics-panel {
  display: grid;
  gap: 12px;
}

.diagnostic-explainer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
}

.diagnostic-explainer h2 {
  margin: 0 0 5px;
  font-size: 16px;
  letter-spacing: 0;
}

.diagnostic-explainer p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.diagnostic-score-rule {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
  text-align: right;
  white-space: nowrap;
}

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

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

.diagnostic-log-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
}

.diagnostic-events-overview {
  display: grid;
  gap: 10px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
}

.diagnostic-events-head {
  display: grid;
  gap: 3px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
}

.diagnostic-events-head h3,
.diagnostic-events-head p {
  margin: 0;
}

.diagnostic-events-head h3 {
  font-size: 14px;
}

.diagnostic-events-head p {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.diagnostic-event-groups {
  display: grid;
  grid-template-columns: repeat(var(--diagnostic-log-count, 1), minmax(0, 1fr));
  align-items: start;
  gap: 9px;
}

.diagnostic-event-group {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 7px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-2);
}

.diagnostic-event-group > header {
  display: grid;
  align-content: start;
  gap: 3px;
  min-width: 0;
  padding: 3px 4px;
  border-bottom: 1px solid var(--line);
}

.diagnostic-event-group > header strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.diagnostic-event-group > header span {
  color: var(--muted);
  font-size: 10px;
}

.diagnostic-event-group .diagnostic-timeline {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.diagnostic-event-group .diagnostic-timeline ol {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  padding: 0;
  overflow: visible;
}

.diagnostic-event-group .diagnostic-timeline-event {
  grid-template-columns: 68px minmax(0, 1fr);
  align-items: baseline;
  gap: 7px;
  min-width: 0;
  max-width: none;
  padding: 6px 8px;
}

.diagnostic-event-group .diagnostic-timeline-event span {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.diagnostic-events-empty {
  margin: 0;
  padding: 12px 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.diagnostic-log-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 11px 8px;
  border-bottom: 1px solid var(--line);
}

.diagnostic-log-identity {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.diagnostic-log-identity strong,
.diagnostic-log-identity span,
.diagnostic-log-identity small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.diagnostic-log-identity strong {
  font-size: 13px;
}

.diagnostic-log-identity span,
.diagnostic-log-identity small,
.diagnostic-counts {
  color: var(--muted);
  font-size: 11px;
}

.diagnostic-log-status {
  display: grid;
  flex: 0 0 auto;
  justify-items: end;
  gap: 5px;
}

.diagnostic-counts {
  padding: 7px 11px;
  border-bottom: 1px solid var(--line);
}

.diagnostic-item-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.diagnostic-item {
  display: grid;
  gap: 5px;
  padding: 10px 11px;
  border-bottom: 1px solid var(--line);
}

.diagnostic-item:last-child {
  border-bottom: 0;
}

.diagnostic-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.diagnostic-category {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.diagnostic-item strong {
  font-size: 12px;
}

.diagnostic-item p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.diagnostic-evidence {
  appearance: none;
  justify-self: start;
  padding: 4px 7px;
  border: 1px solid #b9d6e2;
  border-radius: 99px;
  background: #edf7fa;
  color: #1f6075;
  font-size: 10px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.diagnostic-evidence:hover,
.diagnostic-evidence:focus-visible {
  border-color: #5da4bc;
  background: #dff1f6;
  transform: translateY(-1px);
}

.diagnostic-item code {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.diagnostic-empty {
  padding: 18px 11px;
  color: var(--muted);
  font-size: 12px;
}

.diagnostic-summary-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
}

.diagnostic-summary-card > div {
  display: grid;
  min-width: 0;
}

.diagnostic-summary-card strong,
.diagnostic-summary-card > div > span,
.diagnostic-summary-card > div > small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.diagnostic-summary-card > div span {
  color: var(--muted);
  font-size: 11px;
}

.diagnostic-summary-card > div small {
  color: var(--muted);
  font-size: 11px;
}

.diagnostic-score {
  display: flex;
  align-items: baseline;
  gap: 1px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.diagnostic-score b {
  color: var(--text);
  font-size: 18px;
}

.diagnostic-score span {
  font-size: 11px;
}

.diagnostic-table-wrap,
.report-table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
}

.diagnostic-table,
.report-document table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.diagnostic-table {
  min-width: 900px;
}

.diagnostic-detail {
  margin-top: 3px;
  color: var(--muted);
  line-height: 1.45;
}

.diagnostic-table code {
  color: var(--text);
  font-size: 11px;
  white-space: nowrap;
}

.diagnostic-table th,
.diagnostic-table td,
.report-document th,
.report-document td {
  padding: 8px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.diagnostic-table th,
.report-document th {
  background: var(--surface-2);
  color: var(--muted);
  font-weight: 650;
}

.report-workspace {
  min-height: calc(100vh - 170px);
}

.planned-workspace {
  min-height: calc(100vh - 170px);
}

.planned-page-head {
  max-width: 760px;
  padding: 12px 4px 30px;
}

.planned-page-head h2 {
  margin: 10px 0 7px;
  font-size: 24px;
  letter-spacing: 0;
}

.planned-page-head p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.planned-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 7px;
  border: 1px solid #e7bd68;
  border-radius: 5px;
  background: #fff7e7;
  color: #8a5700;
  font-size: 11px;
  font-weight: 700;
}

.replay-workspace {
  min-height: 0;
  border: 1px solid var(--line);
  background: var(--surface);
}

.replay-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-muted);
}

.replay-page-head h2 {
  flex: 0 0 auto;
  margin: 0;
  font-size: 20px;
  letter-spacing: 0;
}

.replay-source-strip {
  display: flex;
  flex: 1 1 520px;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  min-width: 400px;
}

.replay-source-control {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr);
  flex: 0 1 390px;
  align-items: center;
  gap: 8px;
  width: min(390px, 100%);
  max-width: 390px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.replay-source-control select {
  width: 100%;
  min-width: 0;
}

.replay-vehicle-size-control {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}

.replay-vehicle-size-control input {
  width: 64px;
  min-width: 0;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.replay-vehicle-size-control b {
  font-size: 10px;
  font-weight: 600;
}

.replay-range-control {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
}

.replay-range-control label {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.replay-range-control input {
  width: 70px;
  min-width: 0;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.replay-range-control b {
  font-size: 10px;
  font-weight: 600;
}

.replay-range-full-button {
  min-height: 30px;
  padding: 4px 9px;
  white-space: nowrap;
  font-size: 11px;
}

.replay-range-separator {
  color: #596970;
  font-weight: 700;
}

.replay-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-left: auto;
}

.replay-page-actions .replay-export-button {
  border-color: #0f7088;
  background: #0f7088;
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
}

.replay-page-actions .replay-export-button:hover:not(:disabled) {
  border-color: #0b5d72;
  background: #0b5d72;
}

.replay-layout {
  --replay-content-height: clamp(430px, calc(100vh - 250px), 740px);
  --replay-content-height: clamp(430px, calc(100dvh - 250px), 740px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 260px);
  min-height: 0;
}

.replay-strip-chart-stack {
  --replay-strip-chart-x: 0px;
  --replay-strip-chart-y: 0px;
  --replay-strip-chart-canvas-height: 112px;
  --replay-strip-chart-title-font: 13px;
  --replay-strip-chart-small-font: 10px;
  --replay-strip-chart-control-font: 11px;
  --replay-strip-chart-stack-head-height: 34px;
  --replay-strip-chart-row-head-height: 32px;
  --replay-strip-chart-control-height: 26px;
  --replay-strip-chart-icon-size: 24px;
  --replay-strip-chart-icon-font: 17px;
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: min(520px, calc(100% - 16px));
  height: min(300px, calc(100% - 76px));
  min-width: 320px;
  min-height: 190px;
  overflow: hidden;
  transform: translate3d(var(--replay-strip-chart-x), var(--replay-strip-chart-y), 0);
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 6px;
  background: rgba(245, 248, 250, 0.95);
  box-shadow: 0 4px 16px rgba(10, 27, 36, 0.28);
  pointer-events: auto;
  backdrop-filter: blur(7px);
}

.replay-strip-chart-stack[hidden] {
  display: none;
}

.replay-strip-chart-stack-head,
.replay-strip-chart-stack-actions,
.replay-strip-chart-head {
  display: flex;
  align-items: center;
}

.replay-strip-chart-stack-head {
  flex: 0 0 auto;
  justify-content: space-between;
  gap: 6px;
  min-height: var(--replay-strip-chart-stack-head-height);
  padding: 3px 4px 3px 8px;
  border-bottom: 1px solid #cfdae0;
  background: rgba(233, 240, 244, 0.98);
}

.replay-strip-chart-drag-handle {
  display: flex;
  flex: 1 1 auto;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.replay-strip-chart-stack.is-dragging .replay-strip-chart-drag-handle {
  cursor: grabbing;
}

.replay-strip-chart-drag-handle strong {
  color: #20313d;
  font-size: var(--replay-strip-chart-title-font);
  white-space: nowrap;
}

.replay-strip-chart-drag-handle span {
  color: var(--muted);
  font-size: var(--replay-strip-chart-small-font);
  white-space: nowrap;
}

.replay-strip-chart-stack-actions {
  justify-content: flex-end;
  gap: 5px;
}

.replay-strip-chart-stack-actions label {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #4b5f6c;
  font-size: var(--replay-strip-chart-small-font);
}

.replay-strip-chart-stack-actions select,
.replay-strip-chart-stack-actions button {
  min-height: var(--replay-strip-chart-control-height);
  padding: 2px 7px;
  font-size: var(--replay-strip-chart-control-font);
}

.replay-strip-chart-collapse {
  flex: 0 0 var(--replay-strip-chart-control-height);
  width: var(--replay-strip-chart-control-height);
  padding: 0 !important;
  border-color: transparent;
  background: transparent;
  color: #344955;
  font-size: var(--replay-strip-chart-icon-font) !important;
  line-height: 1;
}

.replay-strip-chart-theme {
  flex: 0 0 var(--replay-strip-chart-control-height);
  width: var(--replay-strip-chart-control-height);
  height: var(--replay-strip-chart-control-height);
  padding: 4px !important;
  border-color: #aebfc8;
  background: #fff;
}

.replay-strip-chart-theme > span {
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid #64748b;
  border-radius: 50%;
  background: linear-gradient(90deg, #fff 0 50%, #0b1220 50% 100%);
}

.replay-strip-chart-collapse:hover,
.replay-strip-chart-collapse:focus-visible {
  border-color: #b7c8d1;
  background: rgba(255, 255, 255, 0.8);
}

.replay-strip-chart-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.replay-strip-chart-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: max-content;
  align-content: start;
  gap: 5px;
  height: 100%;
  min-width: 0;
  padding: 5px;
  overflow: hidden;
}

.replay-strip-chart {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #cfdbe1;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(20, 42, 54, 0.06);
}

.replay-strip-chart-head {
  gap: 7px;
  min-height: var(--replay-strip-chart-row-head-height);
  padding: 3px 5px;
  border-bottom: 1px solid #e4ebef;
  background: #f9fbfc;
}

.replay-strip-chart-head label {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  color: #50636f;
  font-size: var(--replay-strip-chart-small-font);
}

.replay-strip-chart-head select {
  min-width: 132px;
  min-height: var(--replay-strip-chart-control-height);
  padding: 2px 26px 2px 7px;
  font-size: var(--replay-strip-chart-control-font);
  font-weight: 700;
}

.replay-strip-chart-current {
  min-width: 0;
  overflow: hidden;
  color: #344955;
  font-size: var(--replay-strip-chart-small-font);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.replay-strip-chart-remove {
  flex: 0 0 var(--replay-strip-chart-icon-size);
  width: var(--replay-strip-chart-icon-size);
  height: var(--replay-strip-chart-icon-size);
  margin-left: auto;
  padding: 0;
  border-color: transparent;
  background: transparent;
  color: #687b86;
  font-size: var(--replay-strip-chart-icon-font);
  line-height: 1;
}

.replay-strip-chart-remove:hover:not(:disabled) {
  border-color: #d8a4a4;
  background: #fff1f1;
  color: #a12626;
}

.replay-strip-chart-canvas-wrap {
  height: var(--replay-strip-chart-canvas-height);
  min-width: 0;
}

.replay-strip-chart-canvas {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
  touch-action: none;
}

.replay-strip-chart-canvas:focus-visible {
  box-shadow: inset 0 0 0 2px #0f7088;
}

.replay-strip-chart-resize-handle {
  position: absolute;
  z-index: 2;
  right: 3px;
  bottom: 3px;
  width: 17px;
  height: 17px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background:
    linear-gradient(135deg, transparent 38%, rgba(73, 96, 108, 0.45) 40%, rgba(73, 96, 108, 0.45) 47%, transparent 49%),
    linear-gradient(135deg, transparent 60%, rgba(73, 96, 108, 0.78) 62%, rgba(73, 96, 108, 0.78) 70%, transparent 72%);
  cursor: nwse-resize;
  touch-action: none;
}

.replay-strip-chart-resize-handle:hover,
.replay-strip-chart-resize-handle:focus-visible {
  outline: 1px solid #0f7088;
  background-color: rgba(15, 112, 136, 0.1);
}

.replay-strip-chart-stack.is-collapsed {
  width: max-content !important;
  height: auto !important;
  min-width: 0;
  min-height: 0;
}

.replay-strip-chart-stack.is-collapsed .replay-strip-chart-stack-actions label,
.replay-strip-chart-stack.is-collapsed .replay-strip-chart-theme,
.replay-strip-chart-stack.is-collapsed .replay-strip-chart-add-button,
.replay-strip-chart-stack.is-collapsed .replay-strip-chart-body,
.replay-strip-chart-stack.is-collapsed .replay-strip-chart-resize-handle {
  display: none;
}

.replay-strip-chart-stack.is-collapsed .replay-strip-chart-stack-head {
  border-bottom: 0;
}

.replay-strip-chart-stack[data-theme="dark"] {
  border-color: rgba(148, 163, 184, 0.58);
  background: rgba(11, 18, 32, 0.96);
  box-shadow: 0 4px 18px rgba(2, 6, 23, 0.56);
}

.replay-strip-chart-stack[data-theme="dark"] .replay-strip-chart-stack-head {
  border-bottom-color: #334155;
  background: rgba(15, 23, 42, 0.98);
}

.replay-strip-chart-stack[data-theme="dark"] .replay-strip-chart-drag-handle strong,
.replay-strip-chart-stack[data-theme="dark"] .replay-strip-chart-current,
.replay-strip-chart-stack[data-theme="dark"] .replay-strip-chart-stack-actions label,
.replay-strip-chart-stack[data-theme="dark"] .replay-strip-chart-head label {
  color: #e2e8f0;
}

.replay-strip-chart-stack[data-theme="dark"] .replay-strip-chart-drag-handle span {
  color: #a8b6c8;
}

.replay-strip-chart-stack[data-theme="dark"] .replay-strip-chart,
.replay-strip-chart-stack[data-theme="dark"] .replay-strip-chart-head {
  border-color: #334155;
  background: #0f172a;
}

.replay-strip-chart-stack[data-theme="dark"] select,
.replay-strip-chart-stack[data-theme="dark"] .replay-strip-chart-add-button {
  border-color: #475569;
  background: #172033;
  color: #f1f5f9;
}

.replay-strip-chart-stack[data-theme="dark"] .replay-strip-chart-collapse,
.replay-strip-chart-stack[data-theme="dark"] .replay-strip-chart-remove {
  color: #cbd5e1;
}

.replay-strip-chart-stack[data-theme="dark"] .replay-strip-chart-collapse:hover,
.replay-strip-chart-stack[data-theme="dark"] .replay-strip-chart-collapse:focus-visible {
  border-color: #64748b;
  background: rgba(51, 65, 85, 0.82);
}

.replay-strip-chart-stack[data-theme="dark"] .replay-strip-chart-theme {
  border-color: #64748b;
  background: #172033;
}

.replay-stage-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  height: var(--replay-content-height);
  min-width: 0;
}

.replay-stage-panel.is-video-exporting {
  grid-template-rows: auto auto;
}

.replay-stage-panel.is-video-exporting .replay-scene-placeholder {
  min-height: 0;
  aspect-ratio: 16 / 9;
}

.replay-scene-placeholder {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  overflow: hidden;
  background: #edf1f2;
}

.replay-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.replay-canvas[hidden] {
  display: none;
}

.replay-cesium {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  background: #11181d;
}

.replay-cesium[hidden] {
  display: none;
}

.replay-cesium .cesium-viewer,
.replay-cesium .cesium-viewer-cesiumWidgetContainer,
.replay-cesium .cesium-widget,
.replay-cesium canvas {
  width: 100%;
  height: 100%;
}

.replay-cesium .cesium-widget-credits {
  max-width: calc(100% - 16px);
  overflow: hidden;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.replay-map-toolbar {
  position: absolute;
  z-index: 3;
  top: 10px;
  left: 10px;
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: calc(100% - 20px);
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 5px;
  background: rgba(19, 27, 33, 0.86);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
  color: #fff;
  font-size: 11px;
  backdrop-filter: blur(5px);
  overflow-x: auto;
  scrollbar-width: none;
}

.replay-map-toolbar::-webkit-scrollbar {
  display: none;
}

.replay-map-toolbar button,
.replay-map-toolbar select,
.replay-map-toolbar .replay-vehicle-size-control input {
  min-height: 28px;
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.94);
  color: #243039;
  font-size: 11px;
}

.replay-map-toolbar button {
  padding: 4px 9px;
}

.replay-map-toolbar .replay-icon-button {
  width: 30px;
  padding: 0;
  font-size: 16px;
  line-height: 1;
}

.replay-camera-zoom-group {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 3px;
}

.replay-map-toolbar .replay-camera-zoom-button {
  display: inline-grid;
  place-items: center;
  width: 32px;
  min-width: 32px;
  padding: 0;
}

.replay-map-toolbar .replay-add-strip-chart-button {
  display: inline-grid;
  place-items: center;
  width: 32px;
  min-width: 32px;
  padding: 0;
}

.replay-add-strip-chart-button svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.replay-map-toolbar .replay-add-strip-chart-button.is-active {
  border-color: #67d4e8;
  background: #dff8fc;
  color: #075d73;
}

.replay-camera-zoom-button svg {
  width: 19px;
  height: 19px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.replay-map-toolbar label {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.replay-map-toolbar label:not(.replay-map-toggle) {
  padding-left: 3px;
}

.replay-map-toolbar select {
  width: 94px;
}

.replay-map-toolbar .replay-model-options-button,
.replay-map-toolbar .replay-view-options-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.replay-map-toolbar .replay-model-options-button > span:last-child,
.replay-map-toolbar .replay-view-options-button > span:last-child {
  transition: transform 140ms ease;
}

.replay-map-toolbar .replay-model-options-button[aria-expanded="true"] > span:last-child,
.replay-map-toolbar .replay-view-options-button[aria-expanded="true"] > span:last-child {
  transform: rotate(180deg);
}

.replay-map-toolbar .replay-toolbar-vehicle-size {
  gap: 5px;
  padding-left: 1px;
  color: #fff;
}

.replay-map-toolbar .replay-toolbar-vehicle-size input {
  width: 58px;
  padding-right: 6px;
}

.replay-model-options-panel {
  position: absolute;
  z-index: 5;
  top: 52px;
  right: 10px;
  display: grid;
  width: min(320px, calc(100% - 20px));
  gap: 11px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 6px;
  background: rgba(248, 250, 251, 0.97);
  box-shadow: 0 8px 24px rgba(7, 16, 22, 0.28);
  color: var(--text);
  backdrop-filter: blur(8px);
}

.replay-model-options-panel[hidden] {
  display: none;
}

.replay-model-options-panel > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.replay-model-options-panel > header > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.replay-model-options-panel > header strong {
  font-size: 13px;
}

.replay-model-options-panel > header small {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.replay-model-options-panel > header .replay-icon-button {
  width: 28px;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  font-size: 17px;
  line-height: 1;
}

.replay-view-options-panel {
  position: absolute;
  z-index: 6;
  top: 52px;
  right: 10px;
  display: grid;
  width: min(286px, calc(100% - 20px));
  gap: 10px;
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 6px;
  background: rgba(248, 250, 251, 0.97);
  box-shadow: 0 8px 24px rgba(7, 16, 22, 0.28);
  color: var(--text);
  backdrop-filter: blur(8px);
}

.replay-view-options-panel[hidden] {
  display: none;
}

.replay-view-options-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.replay-view-options-panel > header strong {
  font-size: 13px;
}

.replay-view-options-panel > header .replay-icon-button {
  width: 28px;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  font-size: 17px;
  line-height: 1;
}

.replay-view-options-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.replay-view-options-list .replay-map-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 31px;
  padding: 5px 7px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: #fff;
  color: var(--text);
  font-size: 11px;
  white-space: nowrap;
}

.replay-view-options-list .replay-map-toggle input {
  flex: 0 0 auto;
  margin: 0;
}

.replay-view-trajectory-options {
  display: grid;
  gap: 5px;
  padding-top: 9px;
  border-top: 1px solid var(--border);
}

.replay-view-trajectory-options > strong {
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
}

.replay-view-mode-list {
  display: grid;
  gap: 2px;
}

.replay-view-options-panel .replay-mode-legend-item {
  min-height: 25px;
  padding: 3px 5px;
  border: 1px solid transparent;
  background: rgba(31, 53, 66, 0.06);
}

.replay-view-options-panel .replay-mode-legend-item:hover,
.replay-view-options-panel .replay-mode-legend-item:focus-visible {
  border-color: rgba(31, 53, 66, 0.2);
  background: rgba(31, 53, 66, 0.11);
}

.replay-view-options-panel .replay-mode-legend-item strong {
  overflow: hidden;
  color: var(--text);
  font-size: 10px;
  text-overflow: ellipsis;
}

.replay-model-options-panel .replay-vehicle-model-control {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.replay-model-options-panel .replay-vehicle-model-control select {
  width: 100%;
  min-width: 0;
}

.replay-model-permission-notice {
  margin: 0;
  padding: 8px 9px;
  border: 1px solid #ead4a2;
  border-radius: 5px;
  background: #fff8e8;
  color: #805300;
  font-size: 11px;
  line-height: 1.45;
}

.replay-model-permission-notice[hidden] {
  display: none;
}

.replay-model-options-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.replay-model-options-actions button {
  min-height: 30px;
  font-size: 11px;
}

.replay-model-options-actions .replay-model-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.replay-model-options-actions .replay-model-button > span:first-child {
  font-size: 16px;
  line-height: 1;
}

.replay-model-options-actions .replay-model-unlink {
  color: var(--danger);
}

.replay-model-options-panel .replay-vehicle-size-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px 8px;
  color: var(--muted);
  white-space: normal;
}

.replay-model-options-panel .replay-vehicle-size-input {
  display: flex;
  align-items: center;
  gap: 5px;
}

.replay-model-options-panel .replay-vehicle-size-control input {
  width: 68px;
}

.replay-model-options-panel .replay-vehicle-size-control small {
  grid-column: 1 / -1;
  font-size: 10px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

#replayCameraMode {
  width: 104px;
}

#replayCameraView {
  width: 88px;
}

.replay-camera-lock {
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  padding-left: 9px;
}

.replay-map-toggle {
  min-height: 28px;
  padding: 0 4px;
  cursor: pointer;
}

.replay-map-toggle input {
  width: 14px;
  height: 14px;
  margin: 0;
}

.replay-instrument-stack {
  position: absolute;
  z-index: 2;
  top: 58px;
  left: 0;
  display: grid;
  gap: 7px;
  width: min(620px, 100%);
  max-height: calc(100% - 68px);
  overflow: visible;
  pointer-events: auto;
}

.replay-pfd-panel {
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 5px;
  background: rgba(13, 20, 25, 0.78);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  color: #fff;
  font-variant-numeric: tabular-nums;
  pointer-events: auto;
  backdrop-filter: blur(5px);
}

.replay-pfd-panel,
.replay-pfd-panel:not([open]) {
  width: min(400px, 100%);
}

.replay-pfd-panel:not([open]) {
  width: max-content !important;
  min-width: 0;
  max-width: none;
}

.replay-pfd-panel > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 28px;
  padding: 5px 8px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.replay-pfd-panel > summary::-webkit-details-marker {
  display: none;
}

.replay-pfd-panel > summary::after {
  content: "−";
  margin-left: 10px;
  font-size: 15px;
  line-height: 1;
}

.replay-pfd-panel:not([open]) > summary::after {
  display: none;
  content: "";
}

.replay-pfd-panel:not([open]) > summary {
  width: max-content;
  min-width: 44px;
  min-height: 26px;
  justify-content: center;
  padding: 4px 9px;
}

.replay-pfd-panel > summary {
  display: flex;
  background: linear-gradient(#32383c, #24292c);
  cursor: grab;
  letter-spacing: 0.035em;
  touch-action: none;
  text-transform: uppercase;
}

.replay-pfd-panel[open] > summary {
  position: absolute;
  z-index: 25;
  top: 0;
  right: 0;
  left: 0;
  height: 28px;
  min-height: 28px;
  padding: 0;
  background: transparent;
  color: transparent;
}

.replay-pfd-panel[open] > summary span,
.replay-pfd-panel[open] > summary::after {
  visibility: hidden;
}

.replay-pfd-panel.is-dragging > summary {
  cursor: grabbing;
}

.replay-pfd-panel {
  --pfd-panel-x: 0px;
  --pfd-panel-y: 0px;
  position: relative;
  z-index: 4;
  min-width: min(320px, 100%);
  max-width: min(620px, 100%);
  container-type: inline-size;
  transform: translate(var(--pfd-panel-x), var(--pfd-panel-y));
  will-change: transform;
}

.replay-pfd-shared-canvas {
  position: absolute;
  z-index: 20;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
}

.replay-pfd-panel:not([open]) > .replay-pfd-canvas-stage {
  display: none;
}

.replay-pfd-resize-handle {
  position: absolute;
  z-index: 30;
  right: 3px;
  bottom: 3px;
  width: 17px;
  height: 17px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background:
    linear-gradient(135deg, transparent 38%, rgba(255, 255, 255, 0.45) 40%, rgba(255, 255, 255, 0.45) 47%, transparent 49%),
    linear-gradient(135deg, transparent 60%, rgba(255, 255, 255, 0.72) 62%, rgba(255, 255, 255, 0.72) 70%, transparent 72%);
  cursor: nwse-resize;
  touch-action: none;
}

.replay-pfd-resize-handle:hover,
.replay-pfd-resize-handle:focus-visible {
  outline: 1px solid #57e7f2;
  background-color: rgba(87, 231, 242, 0.12);
}

.replay-pfd-canvas-stage {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 400 / 279;
  overflow: hidden;
  border-radius: inherit;
  background: #20272b;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.replay-pfd-canvas-unit {
  position: absolute;
  z-index: 26;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: transparent;
  cursor: pointer;
}

.replay-pfd-canvas-unit:hover,
.replay-pfd-canvas-unit:focus-visible {
  outline: 1px solid #6de7ef;
  outline-offset: -1px;
  background: rgba(109, 231, 239, 0.12);
}

.replay-pfd-canvas-unit.is-speed {
  top: 51%;
  left: 4%;
  width: 15%;
  height: 14%;
}

.replay-pfd-canvas-unit.is-altitude {
  top: 51%;
  left: 69%;
  width: 15%;
  height: 14%;
}

.replay-pfd-canvas-unit.is-vsi {
  right: 4%;
  bottom: 4%;
  width: 11%;
  height: 13%;
}

.replay-mode-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  min-height: 17px;
  width: 100%;
  padding: 0 2px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  white-space: nowrap;
  cursor: pointer;
}

.replay-mode-legend-item:hover,
.replay-mode-legend-item:focus-visible {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.12);
}

.replay-mode-legend-item.is-off {
  opacity: 0.48;
}

.replay-mode-legend-item.is-off strong {
  text-decoration: line-through;
}

.replay-mode-legend-item strong {
  color: #fff;
  font-size: 9px;
  font-weight: 650;
}

.replay-mode-legend-item i {
  display: inline-block;
  flex: 0 0 auto;
  width: 10px;
  height: 2px;
  border-radius: 2px;
  background: var(--mode-color, #94a3ab);
}

.replay-mode-events-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  min-height: 0;
  overflow: hidden;
}

.replay-mode-events-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.replay-mode-events-panel > header h3 {
  margin: 0;
}

.replay-mode-events-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.replay-mode-events-actions button {
  min-height: 24px;
  padding: 2px 8px;
  font-size: 11px;
}

.replay-mode-events-list {
  display: grid;
  gap: 2px;
  min-height: 22px;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
}

.replay-mode-events-list > span {
  color: var(--muted);
  font-size: 10px;
}

.replay-mode-event {
  display: grid;
  grid-template-columns: 54px 9px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 3px 5px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  color: var(--text);
  text-align: left;
}

.replay-mode-event:hover,
.replay-mode-event:focus-visible,
.replay-mode-event.is-selected {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, #fff);
}

.replay-mode-event-time,
.replay-mode-event-range {
  width: auto;
  min-height: 0;
  padding: 1px 2px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}

.replay-mode-event-time:hover,
.replay-mode-event-range:hover {
  color: var(--accent-strong);
  text-decoration: underline;
}

.replay-mode-event i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--mode-color, #94a3ab);
}

.replay-mode-event-label {
  display: block;
  width: 100%;
  min-height: 0;
  padding: 1px 2px;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 10px;
  font-weight: 700;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.replay-mode-event-label:hover,
.replay-mode-event-label:focus-visible {
  color: var(--accent-strong);
  text-decoration: underline;
}

.replay-map-help {
  position: absolute;
  z-index: 2;
  right: 10px;
  bottom: 8px;
  color: rgba(255, 255, 255, 0.94);
  font-size: 10px;
  line-height: 1.35;
}

.replay-map-help > summary {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-left: auto;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 50%;
  background: rgba(13, 20, 25, 0.72);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

.replay-map-help > summary::-webkit-details-marker {
  display: none;
}

.replay-map-help-panel {
  display: grid;
  width: min(680px, calc(100vw - 40px));
  gap: 3px;
  margin-top: 5px;
  padding: 7px 9px;
  border-radius: 5px;
  background: rgba(13, 20, 25, 0.82);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24);
}

.replay-map-help-panel > div {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 6px;
}

.replay-map-help strong {
  color: #8ddcf7;
  font-size: 9px;
  font-weight: 700;
}

.replay-map-help span {
  min-width: 0;
}

.replay-map-help kbd {
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-weight: 650;
}

.replay-scene-empty {
  position: relative;
  z-index: 4;
  display: grid;
  gap: 4px;
  padding: 13px 16px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 5px;
  background: rgba(245, 248, 249, 0.92);
  text-align: center;
  color: var(--muted);
  pointer-events: none;
}

.replay-scene-empty[hidden] {
  display: none;
}

.replay-scene-empty strong {
  color: var(--text);
  font-size: 16px;
}

.replay-scene-empty span {
  font-size: 12px;
}

.replay-transport {
  position: sticky;
  bottom: 0;
  z-index: 12;
  display: grid;
  grid-template-columns: auto max-content minmax(100px, 1fr) 76px;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 -4px 12px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(6px);
}

.replay-transport-buttons {
  display: flex;
  gap: 4px;
}

.replay-transport-buttons button {
  width: 32px;
  min-height: 30px;
  padding: 0;
}

.replay-transport-buttons .replay-skip-button {
  width: 44px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

#replayPlayButton {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

#replayPlayButton:hover:not(:disabled) {
  border-color: var(--accent-strong);
  background: var(--accent-strong);
}

.replay-time-readout {
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.replay-timeline {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.replay-mode-timeline {
  position: relative;
  height: 18px;
  overflow: hidden;
  border: 1px solid #d5dde1;
  border-radius: 4px;
  background: #eef2f4;
}

.replay-mode-timeline-segment {
  position: absolute;
  top: 0;
  bottom: 0;
  min-width: 2px;
  min-height: 0;
  padding: 0 4px;
  overflow: hidden;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 0;
  background: var(--mode-color, #6b7280);
  color: var(--mode-text-color, #fff);
  font-size: 8px;
  font-weight: 750;
  line-height: 16px;
  text-align: left;
  text-overflow: ellipsis;
  text-shadow: none;
  white-space: nowrap;
}

.replay-mode-timeline-segment:hover,
.replay-mode-timeline-segment:focus-visible {
  z-index: 1;
  filter: brightness(1.16);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.9);
}

.replay-mode-timeline-segment.is-active {
  z-index: 1;
  border-color: transparent;
  background: var(--mode-color, #6b7280);
  color: var(--mode-text-color, #fff);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.9);
}

.replay-mode-timeline-segment.is-compact span {
  display: none;
}

.replay-transport input {
  width: 100%;
}

.replay-transport select {
  width: 76px;
  min-width: 76px;
  font-variant-numeric: tabular-nums;
}

.replay-inspector {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  height: var(--replay-content-height);
  min-height: 0;
  overflow: hidden;
  border-left: 1px solid var(--line);
  background: var(--surface-soft);
}

.replay-inspector section {
  padding: 8px 9px;
  border-bottom: 1px solid var(--line);
}

.replay-sortie-summary {
  display: grid;
  gap: 4px;
}

.replay-sortie-summary strong {
  overflow: hidden;
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.replay-sortie-summary span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.replay-sortie-summary .replay-sortie-weather {
  color: #176276;
  font-weight: 650;
}

.replay-sortie-summary .replay-sortie-performance {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  padding-top: 4px;
  border-top: 1px solid #e7ecee;
}

.replay-inspector .replay-sortie-performance div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  min-width: 0;
}

.replay-sortie-performance dt {
  font-size: 10px;
  text-align: center;
}

.replay-inspector .replay-sortie-performance dd {
  color: var(--text);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
  text-align: center;
}

.replay-sortie-note {
  display: grid;
  padding-top: 4px;
  border-top: 1px solid #e7ecee;
}

.replay-sortie-summary .replay-sortie-note-text {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.4;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.replay-inspector h3 {
  margin: 0 0 6px;
  font-size: 12px;
}

.replay-inspector dl {
  display: grid;
  gap: 5px;
  margin: 0;
}

.replay-inspector dl div {
  display: grid;
  grid-template-columns: minmax(70px, 0.75fr) minmax(0, 1.25fr);
  gap: 8px;
}

.replay-inspector dt {
  color: var(--muted);
  font-size: 11px;
}

.replay-inspector dd {
  overflow: hidden;
  margin: 0;
  font-size: 11px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.replay-inspector .replay-telemetry-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
}

.replay-inspector .replay-telemetry-grid > div {
  grid-template-columns: minmax(78px, 0.9fr) minmax(0, 1.1fr);
  gap: 5px;
  padding: 1px 0;
}

.replay-inspector .replay-attitude-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid #e7ecee;
}

.replay-inspector .replay-attitude-grid > div {
  grid-template-columns: 1fr;
  gap: 1px;
  text-align: center;
}

.replay-inspector .replay-attitude-grid dd {
  text-align: center;
}

.replay-export-backdrop {
  position: fixed;
  z-index: 120;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 22px;
  overflow: auto;
  background: rgba(8, 14, 18, 0.72);
}

.replay-export-backdrop[hidden] {
  display: none;
}

.replay-export-dialog {
  display: grid;
  gap: 14px;
  width: min(820px, 100%);
  padding: 18px;
  border: 1px solid #cbd5d9;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.28);
}

#replayExportDialog .replay-export-dialog {
  grid-template-columns: minmax(330px, 0.78fr) minmax(430px, 1.22fr);
  grid-template-areas:
    "head head"
    "options preview"
    "progress progress"
    "actions actions";
  align-items: start;
  width: min(1040px, 100%);
}

#replayExportDialog .replay-export-head {
  grid-area: head;
}

#replayExportDialog .replay-export-options {
  grid-area: options;
}

#replayExportDialog .replay-export-preview {
  grid-area: preview;
}

#replayExportDialog .replay-export-progress {
  grid-area: progress;
}

#replayExportDialog .replay-export-actions {
  grid-area: actions;
}

.replay-events-dialog {
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 10px;
  width: min(800px, 100%);
  height: min(650px, calc(100vh - 44px));
  height: min(650px, calc(100dvh - 44px));
  max-height: calc(100vh - 44px);
  max-height: calc(100dvh - 44px);
  padding: 14px;
  overflow: hidden;
}

.replay-events-backdrop {
  overflow: hidden;
}

.replay-events-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.replay-events-toolbar strong {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}

.replay-events-list {
  display: grid;
  align-content: start;
  gap: 4px;
  min-height: 0;
  overflow: auto;
  padding-right: 3px;
  overscroll-behavior: contain;
}

.replay-event-row {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 5px 8px;
  border: 1px solid #d9e1e5;
  border-left: 4px solid #94a3b8;
  border-radius: 5px;
  background: #fff;
}

.replay-event-row.is-warning {
  border-left-color: #d97706;
  background: #fffbeb;
}

.replay-event-row.is-error {
  border-left-color: #dc2626;
  background: #fef2f2;
}

.replay-event-row.is-mode {
  border-left-color: var(--mode-color, #64748b);
  background: color-mix(in srgb, var(--mode-color, #64748b) 8%, #fff);
}

.replay-event-row.is-mode .replay-event-time {
  border-color: color-mix(in srgb, var(--mode-color, #64748b) 45%, #cbd5d9);
  background: color-mix(in srgb, var(--mode-color, #64748b) 11%, #fff);
  color: color-mix(in srgb, var(--mode-color, #64748b) 82%, #101820);
  font-weight: 750;
}

.replay-event-time {
  min-width: 0;
  min-height: 26px;
  padding: 3px 5px;
  border-color: #cbd5d9;
  background: #f8fafb;
  color: var(--muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.replay-event-time:hover {
  border-color: var(--accent);
  color: var(--accent-strong);
}

.replay-event-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.replay-event-copy span,
.replay-event-copy small {
  color: var(--muted);
  font-size: 9px;
}

.replay-event-type {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.replay-event-type i {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--mode-color, #64748b);
}

.replay-event-copy strong {
  overflow-wrap: anywhere;
  font-size: 11px;
  line-height: 1.35;
}

.replay-event-row > .primary-button,
.replay-event-row > .secondary-button {
  min-width: 74px;
}

.replay-events-empty {
  margin: auto;
  color: var(--muted);
  text-align: center;
}

.replay-export-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.replay-export-head h2 {
  margin: 0;
  font-size: 19px;
  letter-spacing: 0;
}

.replay-export-head span {
  display: block;
  max-width: 680px;
  margin-top: 4px;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.replay-export-close {
  flex: 0 0 auto;
  width: 32px;
  min-height: 32px;
  padding: 0;
  font-size: 21px;
  line-height: 1;
}

.replay-export-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 10px 12px;
}

.replay-export-options > label {
  display: grid;
  gap: 5px;
}

.replay-export-options > label > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}

.replay-export-title-option {
  grid-column: 1 / -1;
}

.replay-export-title-option input {
  min-width: 0;
  width: 100%;
}

.replay-export-options select {
  min-width: 0;
  width: 100%;
}

.replay-export-overlay-options {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.replay-export-pfd-option {
  display: flex !important;
  min-height: 36px;
  flex-direction: row !important;
  align-items: center;
  gap: 7px !important;
  padding: 7px 10px;
  border: 1px solid #cbd5d9;
  border-radius: 5px;
  background: #f8fafb;
}

.replay-export-pfd-option input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.replay-export-pfd-option span {
  color: var(--ink) !important;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.15;
}

.replay-export-summary {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 12px;
  margin: 0;
  padding: 9px 10px;
  border: 1px solid #dbe3e7;
  border-radius: 5px;
  background: #f8fafb;
}

.replay-export-summary div {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
}

.replay-export-summary div:last-child {
  grid-column: 1 / -1;
}

.replay-export-summary dt,
.replay-export-summary dd {
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
}

.replay-export-summary dt {
  color: var(--muted);
}

.replay-export-summary dd {
  overflow: hidden;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 900px) {
  #replayExportDialog .replay-export-dialog {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "options"
      "preview"
      "progress"
      "actions";
    width: min(820px, 100%);
  }
}

.replay-export-preview {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  overflow: hidden;
  border: 1px solid #cbd5d9;
  border-radius: 5px;
  aspect-ratio: 16 / 9;
  background: #11181d;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
}

.replay-export-preview-canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.replay-export-layout-control {
  position: absolute;
  z-index: 3;
  min-width: 42px;
  min-height: 32px;
  border: 1px solid rgba(87, 231, 242, 0.88);
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(5, 20, 28, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.16);
  cursor: move;
  touch-action: none;
}

.replay-export-layout-control:hover,
.replay-export-layout-control:focus-visible,
.replay-export-layout-control.is-dragging,
.replay-export-layout-control.is-resizing {
  border-color: #fff;
  outline: 2px solid rgba(87, 231, 242, 0.9);
  outline-offset: 1px;
}

.replay-export-layout-control > span {
  position: absolute;
  top: 3px;
  left: 3px;
  padding: 2px 5px;
  border-radius: 3px;
  background: rgba(5, 20, 28, 0.8);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.2;
  pointer-events: none;
}

.replay-export-layout-resize {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 17px;
  height: 17px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background:
    linear-gradient(135deg, transparent 38%, rgba(255, 255, 255, 0.5) 40%, rgba(255, 255, 255, 0.5) 47%, transparent 49%),
    linear-gradient(135deg, transparent 60%, rgba(255, 255, 255, 0.9) 62%, rgba(255, 255, 255, 0.9) 70%, transparent 72%);
  cursor: nwse-resize;
  touch-action: none;
}

.replay-export-dialog[data-active="true"] .replay-export-layout-control {
  display: none;
}

.replay-export-progress {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) max-content;
  align-items: center;
  gap: 12px;
}

.replay-export-progress progress {
  width: 100%;
  height: 9px;
  accent-color: #0f7088;
}

.replay-export-progress span {
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.replay-export-progress span[data-tone="error"] {
  color: #b4232f;
  font-weight: 650;
}

.replay-export-progress span[data-tone="success"] {
  color: #25733c;
  font-weight: 650;
}

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

.replay-export-actions .primary-button {
  border-color: #0f7088;
  background: #0f7088;
  color: #fff;
  font-weight: 700;
}

.replay-export-actions .primary-button:hover:not(:disabled) {
  border-color: #0b5d72;
  background: #0b5d72;
}

.replay-export-dialog[data-active="true"] .replay-export-options select,
.replay-export-dialog[data-active="true"] .replay-export-options input,
.replay-export-dialog[data-active="true"] .replay-export-close {
  pointer-events: none;
  opacity: 0.58;
}

.replay-stage-panel:fullscreen {
  width: 100vw;
  height: 100vh;
  grid-template-rows: minmax(0, 1fr) auto;
  background: var(--surface);
}

.replay-stage-panel:fullscreen .replay-scene-placeholder {
  min-height: 0;
}

.replay-stage-panel.is-mobile-fullscreen {
  position: fixed;
  z-index: 180;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  margin: 0;
  grid-template-rows: minmax(0, 1fr) auto;
  border-radius: 0;
  background: var(--surface);
}

.replay-stage-panel.is-mobile-fullscreen .replay-scene-placeholder {
  min-height: 0;
}

body.replay-mobile-fullscreen-active {
  overflow: hidden;
}

.replay-stage-panel::backdrop {
  background: #11181d;
}

.planned-scope {
  border-top: 1px solid var(--line);
}

.planned-scope > div {
  display: grid;
  grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
  gap: 18px;
  padding: 18px 4px;
  border-bottom: 1px solid var(--line);
}

.planned-scope strong {
  font-size: 14px;
}

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

.debrief-page-head {
  align-items: flex-start;
}

.debrief-page-head h2 {
  margin-bottom: 3px;
}

.debrief-page-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.debrief-page-actions {
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.debrief-generate-context {
  display: flex;
  flex: 1 1 360px;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.debrief-selected-logs-summary {
  min-width: 72px;
  max-width: min(34vw, 480px);
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.debrief-selected-logs-summary.is-empty {
  color: var(--danger, #b42318);
}

.debrief-page-actions button {
  min-height: 34px;
  padding: 6px 11px;
  white-space: nowrap;
}

.debrief-page-actions .primary-button {
  min-height: 34px;
  padding: 6px 13px;
  border-color: var(--accent, #176b87);
  background: var(--accent, #176b87);
  color: #fff;
  font-weight: 750;
}

.debrief-page-actions .primary-button:disabled {
  cursor: default;
  opacity: 0.55;
}

.debrief-builder {
  display: grid;
  grid-template-columns: minmax(300px, 370px) minmax(0, 1fr);
  min-height: 560px;
  border-top: 1px solid var(--line);
}

.debrief-editor {
  min-width: 0;
  padding: 16px 18px 18px 0;
  border-right: 1px solid var(--line);
}

.debrief-context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 12px;
}

.debrief-context strong {
  color: var(--text);
  font-size: 13px;
}

.debrief-context span + span::before {
  content: "·";
  margin-right: 10px;
  color: var(--line-strong);
}

.debrief-field {
  display: grid;
  gap: 5px;
  margin-bottom: 11px;
}

.debrief-field > span,
.debrief-section-title {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.debrief-field input,
.debrief-field textarea {
  min-width: 0;
}

.debrief-field textarea {
  line-height: 1.45;
}

.debrief-meta-fields,
.debrief-notes-editor {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 10px;
}

.debrief-meta-fields .is-title,
.debrief-notes-editor .is-objective {
  grid-column: 1 / -1;
}

.debrief-includes,
.debrief-chart-picker {
  margin: 14px 0 0;
  padding: 13px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.debrief-includes legend,
.debrief-chart-picker legend {
  padding: 0 8px 0 0;
}

.debrief-chart-picker-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin: -3px 0 8px;
}

.debrief-chart-picker-actions button {
  min-height: 29px;
  padding: 4px 10px;
  border: 1px solid rgba(23, 107, 135, 0.3);
  border-radius: 7px;
  background: rgba(23, 107, 135, 0.07);
  color: var(--accent, #176b87);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.debrief-chart-picker-actions button:disabled {
  cursor: default;
  opacity: 0.45;
}

.debrief-includes > div {
  display: grid;
  gap: 7px;
  margin-top: 8px;
}

.debrief-includes label,
.debrief-chart-option {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  color: var(--text);
  font-size: 12px;
}

.debrief-includes input,
.debrief-chart-option input {
  flex: 0 0 auto;
  margin: 2px 0 0;
}

.debrief-chart-options {
  display: grid;
  gap: 9px;
  margin-top: 8px;
  padding-right: 0;
  overflow: visible;
}

.debrief-chart-source-group {
  min-width: 0;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-raised, var(--surface)) 72%, transparent);
}

.debrief-chart-source-group > h4 {
  margin: 0 0 6px;
  color: var(--text);
  font-size: 12px;
  font-weight: 750;
}

.debrief-chart-source-group > div {
  display: grid;
  gap: 6px;
}

.debrief-chart-source-empty {
  color: var(--muted);
  font-size: 11px;
  font-style: italic;
}

.debrief-chart-option-name {
  display: grid;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}

.debrief-chart-option-name strong,
.debrief-chart-option-name em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.debrief-chart-option-name strong {
  font-size: 12px;
  font-style: normal;
  font-weight: 650;
}

.debrief-chart-option-name em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
}

.debrief-chart-option small {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--muted);
}

.debrief-chart-option {
  position: relative;
}

.debrief-chart-option.is-captured {
  padding-right: 28px;
}

.debrief-capture-remove {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 22px;
  height: 22px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--danger) 12%, var(--surface));
  color: var(--danger);
  font-size: 15px;
  line-height: 1;
}

.debrief-chart-empty {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.debrief-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 8px;
  margin-top: 16px;
}

.debrief-export-button {
  grid-column: 1 / -1;
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  font-weight: 700;
}

.debrief-export-button:hover {
  border-color: var(--accent-strong);
  background: var(--accent-strong);
}

.debrief-export-note {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.debrief-preview-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-self: stretch;
  min-width: 0;
  min-height: 0;
  padding: 15px 0 18px 18px;
  overflow: hidden;
  contain: size;
}

.debrief-preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 12px;
}

.debrief-preview-toolbar strong {
  color: var(--text);
  font-size: 13px;
}

.debrief-present-exit {
  display: none;
  width: 30px;
  min-height: 30px;
  margin-left: auto;
  padding: 0;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
}

.debrief-present-navigation {
  display: none;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  color: #e5edf1;
  font-variant-numeric: tabular-nums;
}

.debrief-present-navigation button {
  width: 38px;
  min-height: 32px;
  padding: 0;
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 18px;
}

.debrief-slide-list {
  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
  gap: 14px;
  height: auto;
  min-height: 0;
  max-height: none;
  padding: 14px;
  overflow: auto;
  border: 1px solid var(--line);
  background: #e8edf0;
}

.debrief-preview-limited {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: min(100%, 940px);
  margin: 0 auto;
  padding: 12px 16px;
  border: 1px solid #c7d0d5;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.debrief-preview-limited button {
  flex: 0 0 auto;
}

.debrief-slide {
  position: relative;
  container-type: inline-size;
  width: min(100%, 940px);
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #c7d0d5;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 7px 18px rgba(29, 44, 54, 0.08);
  font-family: var(--debrief-font-family, Aptos), "Noto Sans KR", "Segoe UI", sans-serif;
}

.debrief-slide-content {
  position: absolute;
  inset: 0;
  display: flex;
  min-height: 0;
  flex-direction: column;
  padding:
    var(--debrief-content-y, 14.4%)
    var(--debrief-content-right, 5.35%)
    var(--debrief-content-bottom, 9.87%)
    var(--debrief-content-x, 5.4%);
}

.debrief-slide-accent {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--debrief-accent-width, 1.2%);
  background: var(--accent);
}

.debrief-slide-number {
  position: absolute;
  left: var(--debrief-footer-number-x, 87.38%);
  top: var(--debrief-footer-y, 94.4%);
  width: var(--debrief-footer-number-w, 7.5%);
  height: var(--debrief-footer-h, 2.4%);
  color: #566871;
  font-size: var(--debrief-font-footer, 1.0417cqw);
  line-height: 1;
  text-align: right;
}

.debrief-slide-footer {
  position: absolute;
  left: var(--debrief-footer-brand-x, 4.95%);
  top: var(--debrief-footer-y, 94.4%);
  width: var(--debrief-footer-brand-w, 16.5%);
  height: var(--debrief-footer-h, 2.4%);
  color: #566871;
  font-size: var(--debrief-font-footer, 1.0417cqw);
  font-weight: 650;
  line-height: 1;
}

.debrief-slide-team {
  position: absolute;
  top: var(--debrief-footer-y, 94.4%);
  left: var(--debrief-footer-team-x, 27.9%);
  width: var(--debrief-footer-team-w, 44.25%);
  height: var(--debrief-footer-h, 2.4%);
  overflow: hidden;
  color: #566871;
  font-size: var(--debrief-font-footer, 1.0417cqw);
  line-height: 1;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.debrief-slide h3 {
  position: absolute;
  top: var(--debrief-title-y, 4%);
  left: var(--debrief-title-x, 4.95%);
  width: var(--debrief-title-w, 88.88%);
  height: var(--debrief-title-h, 8.53%);
  margin: 0;
  overflow: hidden;
  font-family: var(--debrief-font-head, "Aptos Display"), var(--debrief-font-family, Aptos), sans-serif;
  font-size: var(--debrief-font-title, 3.6459cqw);
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.debrief-slide-sortie {
  position: absolute;
  top: var(--debrief-subtitle-y, 11.733%);
  left: var(--debrief-subtitle-x, 5.1%);
  width: var(--debrief-subtitle-w, 88.5%);
  height: var(--debrief-subtitle-h, 3.733%);
  margin: 0;
  overflow: hidden;
  color: #60707a;
  font-size: var(--debrief-font-subtitle, 1.5625cqw);
  font-weight: 700;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.debrief-multi-chart-slide .debrief-slide-content {
  padding:
    var(--debrief-multi-chart-y, 13.6%)
    calc(100% - var(--debrief-multi-chart-x, 2.1%) - var(--debrief-multi-chart-w, 95.6%))
    calc(100% - var(--debrief-multi-chart-y, 13.6%) - var(--debrief-multi-chart-h, 77.9%))
    var(--debrief-multi-chart-x, 2.1%);
}

.debrief-cover .debrief-slide-content {
  display: block;
  padding: 0;
}

.debrief-cover h3 {
  top: var(--debrief-cover-title-y, 15.733%);
  left: var(--debrief-cover-title-x, 6.6%);
  width: var(--debrief-cover-title-w, 86.63%);
  height: var(--debrief-cover-title-h, 15.333%);
  font-size: var(--debrief-cover-title-size, 3.75cqw);
  line-height: 1.08;
  white-space: normal;
}

.debrief-cover-subtitle {
  position: absolute;
  top: var(--debrief-cover-label-y, 10.933%);
  left: var(--debrief-cover-label-x, 6.6%);
  width: var(--debrief-cover-label-w, 81.75%);
  height: var(--debrief-cover-label-h, 4.267%);
  color: var(--accent-strong);
  font-family: var(--debrief-font-head, "Aptos Display"), var(--debrief-font-family, Aptos), sans-serif;
  font-size: var(--debrief-font-cover-label, 2.5cqw);
  font-weight: 700;
  line-height: 1;
}

.debrief-cover-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 13px;
  margin-top: 4.5%;
  color: var(--muted);
  font-size: var(--debrief-font-subtitle, 1.5625cqw);
}

.debrief-cover-objective {
  max-width: 84%;
  margin: 2.3% 0 0;
  color: #35434b;
  font-size: var(--debrief-font-subtitle, 1.5625cqw);
  line-height: 1.45;
}

.debrief-cover-log-list {
  position: absolute;
  top: var(--debrief-cover-logs-y, 33.067%);
  left: 7.05%;
  width: 81.38%;
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.debrief-cover-log-list li {
  min-height: 3.15cqw;
  padding: 0.7% 0;
  overflow: hidden;
  border-bottom: 1px solid #d7dee3;
  color: #35434b;
  font-size: var(--debrief-font-body, 1.6667cqw);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.debrief-cover-details {
  position: absolute;
  top: var(--debrief-cover-metadata-y, 56.267%);
  left: 7.05%;
  width: 75%;
  display: grid;
  gap: 0.92cqw;
  margin: 0;
  font-size: var(--debrief-font-body, 1.6667cqw);
}

.debrief-cover-details div {
  display: grid;
  grid-template-columns: minmax(6.915cqw, 17%) minmax(0, 1fr);
  gap: 2%;
}

.debrief-cover-details dt {
  color: var(--muted);
  font-weight: 700;
}

.debrief-cover-details dd {
  margin: 0;
  color: #35434b;
}

.debrief-cover .debrief-slide-footer,
.debrief-cover .debrief-slide-team,
.debrief-cover .debrief-slide-number {
  top: var(--debrief-cover-footer-y, 89.6%);
}

.debrief-cover .debrief-slide-footer {
  left: 6.75017%;
  width: 18.00045%;
}

.debrief-preview-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: var(--debrief-font-body, 1.6667cqw);
}

.debrief-preview-table th,
.debrief-preview-table td {
  padding: 1.1% 0.8%;
  overflow: hidden;
  border-bottom: 1px solid #dce2e5;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.debrief-preview-table th {
  background: #eef3f5;
  color: #46555d;
  font-weight: 700;
}

.debrief-preview-table td:first-child {
  font-weight: 700;
}

.debrief-quality-slide .debrief-preview-table th,
.debrief-quality-slide .debrief-preview-table td,
.debrief-overview-slide .debrief-preview-table th,
.debrief-overview-slide .debrief-preview-table td {
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
  line-height: 1.3;
  vertical-align: top;
}

.debrief-quality-slide .debrief-preview-table th:nth-child(1) { width: 18%; }
.debrief-quality-slide .debrief-preview-table th:nth-child(2) { width: 24%; }
.debrief-quality-slide .debrief-preview-table th:nth-child(3) { width: 58%; }

.debrief-flight-info-table th:nth-child(1) { width: 14%; }
.debrief-flight-info-table th:nth-child(2) { width: 15%; }
.debrief-flight-info-table th:nth-child(3) { width: 39%; }
.debrief-flight-info-table th:nth-child(4),
.debrief-flight-info-table th:nth-child(5),
.debrief-flight-info-table th:nth-child(6) { width: 10.67%; }

.debrief-flight-summary-list {
  display: grid;
  flex: 1 1 auto;
  min-height: 0;
  grid-template-rows: repeat(var(--debrief-summary-count, 1), minmax(0, 1fr));
  gap: 1.4%;
}

.debrief-flight-summary-list.debrief-data-count-1 { --debrief-summary-count: 1; }
.debrief-flight-summary-list.debrief-data-count-2 { --debrief-summary-count: 2; }
.debrief-flight-summary-list.debrief-data-count-3 { --debrief-summary-count: 3; }

.debrief-flight-summary-item {
  display: grid;
  min-height: 0;
  padding: 1.1% 1.4%;
  border-top: 1px solid #a9bcc4;
  grid-template-columns: minmax(0, 1fr) minmax(23.404cqw, 34%);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 3% 2.5%;
}

.debrief-flight-summary-item header {
  display: grid;
  min-width: 0;
  grid-column: 1 / -1;
  grid-template-columns: minmax(12.234cqw, 20%) minmax(0, 1fr);
  gap: 2%;
  align-items: baseline;
  color: #35434b;
  font-size: var(--debrief-font-body, 1.6667cqw);
}

.debrief-flight-summary-item header strong { color: var(--accent-strong); }

.debrief-flight-summary-item header span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.debrief-flight-summary-item dl {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 3px 12px;
  margin: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  font-size: var(--debrief-font-subtitle, 1.5625cqw);
}

.debrief-flight-summary-item dl > div {
  display: grid;
  min-width: 0;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 7px;
}

.debrief-flight-summary-item dl .is-weather { grid-column: 1 / -1; }
.debrief-flight-summary-item dt { color: var(--muted); font-weight: 700; }
.debrief-flight-summary-item dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }

.debrief-flight-summary-metrics {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.debrief-flight-summary-metrics span {
  display: grid;
  align-content: center;
  padding: 3px 5px;
  background: #eef6f8;
  text-align: center;
}

.debrief-flight-summary-metrics small { color: var(--muted); font-size: var(--debrief-font-small, 1.3021cqw); }
.debrief-flight-summary-metrics strong { color: var(--accent-strong); font-size: var(--debrief-font-body, 1.6667cqw); }

.debrief-briefing-summary {
  position: absolute;
  top: var(--debrief-briefing-heading-y, 13.6%);
  left: var(--debrief-briefing-heading-x, 5.4%);
  width: var(--debrief-briefing-heading-w, 89.1%);
  height: 69.07%;
  display: grid;
  min-height: 0;
  align-content: start;
  gap: 2.1%;
}

.debrief-briefing-summary > header {
  padding-bottom: 1.1%;
  border-bottom: 1px solid #a9bcc4;
  color: var(--accent-strong);
  font-size: var(--debrief-font-section, 2.0833cqw);
}

.debrief-briefing-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2% 2.4%;
}

.debrief-briefing-facts span {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 2px;
  min-width: 0;
  font-size: var(--debrief-font-body, 1.6667cqw);
}

.debrief-briefing-facts strong { color: var(--muted); }
.debrief-briefing-facts em {
  min-width: 0;
  color: #35434b;
  font-style: normal;
  font-weight: 750;
  line-height: 1.16;
  overflow-wrap: anywhere;
}

.debrief-briefing-summary section {
  display: grid;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 4px;
  padding: 1.2% 0;
  border-bottom: 1px solid #d7dee3;
}

.debrief-briefing-summary h4,
.debrief-performance-sections h4,
.debrief-control-sections h4,
.debrief-findings-page h4 {
  margin: 0;
  color: var(--accent-strong);
  font-size: var(--debrief-font-section, 2.0833cqw);
}

.debrief-briefing-summary p {
  margin: 0;
  color: #35434b;
  font-size: var(--debrief-font-body, 1.6667cqw);
  line-height: 1.38;
  overflow-wrap: anywhere;
}

.debrief-overview-metrics {
  width: 100%;
  margin-bottom: 1.2%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: var(--debrief-font-body, 1.6667cqw);
}

.debrief-overview-metrics th,
.debrief-overview-metrics td {
  padding: 0.5% 0.8%;
  border-bottom: 1px solid #d7dee3;
  text-align: center;
}

.debrief-overview-metrics thead th { background: #eaf1f3; color: #40515a; }
.debrief-overview-metrics tbody th { color: var(--accent-strong); }

.debrief-overview-chart-stack {
  display: grid;
  flex: 1 1 auto;
  min-height: 0;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 1%;
}

.debrief-overview-chart-stack.debrief-data-count-1 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
  gap: 1.6%;
}

.debrief-overview-chart-stack figure {
  display: grid;
  min-width: 0;
  min-height: 0;
  margin: 0;
  grid-template-columns: minmax(11.702cqw, 18%) minmax(0, 1fr);
  align-items: center;
}

.debrief-overview-chart-stack figure.is-uncaptioned {
  grid-template-columns: minmax(0, 1fr);
}

.debrief-overview-chart-stack figcaption {
  color: var(--accent-strong);
  font-size: var(--debrief-font-body, 1.6667cqw);
  font-weight: 750;
}

.debrief-overview-chart-stack img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
}

.debrief-slide-chart-stack figure.is-title-embedded {
  grid-template-rows: minmax(0, 1fr);
}

.debrief-embedded-title .debrief-slide-content { padding-top: var(--debrief-content-y, 14.4%); }

.debrief-slide-charts {
  display: grid;
  flex: 1 1 auto;
  min-height: 0;
  grid-template-columns: repeat(var(--debrief-chart-count, 1), minmax(0, 1fr));
  gap: 1.2%;
}

.debrief-slide-charts figure {
  display: grid;
  min-width: 0;
  min-height: 0;
  margin: 0;
  grid-template-rows: minmax(0, 1fr) auto;
}

.debrief-slide-charts figure.is-uncaptioned {
  grid-template-rows: minmax(0, 1fr);
}

.debrief-slide-charts img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  border: 0;
  background: transparent;
}

.debrief-slide-charts figcaption {
  padding-top: 1.5%;
  overflow: hidden;
  color: #51616a;
  font-size: var(--debrief-font-caption, 1.5625cqw);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.debrief-slide-chart-stack {
  display: grid;
  flex: 1 1 auto;
  min-height: 0;
  grid-template-rows: repeat(var(--debrief-chart-stack-count, 1), minmax(0, 1fr));
  column-gap: var(--debrief-chart-gap-x, 1.3445%);
  row-gap: var(--debrief-chart-gap-y, 2.8169%);
}

.debrief-slide-chart-stack.is-time-chart-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  column-gap: var(--debrief-chart-gap-x, 1.3445%);
  row-gap: var(--debrief-chart-gap-y, 2.8169%);
}

.debrief-slide-chart-stack.is-time-chart-grid[style*="--debrief-chart-stack-count:1"] {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}

.debrief-slide-chart-stack.is-time-chart-grid[style*="--debrief-chart-stack-count:2"] {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.debrief-slide-chart-stack.is-time-chart-grid[style*="--debrief-chart-stack-count:3"] figure:last-child {
  grid-column: 1 / -1;
  width: calc(50% - 0.8%);
  justify-self: center;
}

.debrief-slide-chart-stack.is-vertical-stack {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(var(--debrief-chart-stack-count, 1), minmax(0, 1fr));
  row-gap: var(--debrief-chart-gap-y, 2.8169%);
}

.debrief-altitude-speed-grid,
.debrief-control-response-grid,
.debrief-transition-grid {
  display: grid;
  flex: 1 1 auto;
  min-height: 0;
  column-gap: var(--debrief-grid-gap-x, 1.1765%);
  row-gap: var(--debrief-grid-gap-y, 2.4648%);
}

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

.debrief-altitude-speed-grid > div {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-auto-rows: minmax(0, 1fr);
  gap: 1.2%;
}

.debrief-control-response-grid,
.debrief-transition-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.debrief-altitude-speed-grid figure,
.debrief-control-response-grid figure,
.debrief-transition-grid figure {
  min-width: 0;
  min-height: 0;
  margin: 0;
}

.debrief-altitude-speed-grid img,
.debrief-control-response-grid img,
.debrief-transition-grid img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
}

.debrief-slide-chart-stack figure {
  display: grid;
  min-width: 0;
  min-height: 0;
  margin: 0;
  grid-template-rows: auto minmax(0, 1fr);
}

.debrief-automatic-chart-stack figure {
  grid-template-rows: minmax(0, 1fr);
}

.debrief-slide-chart-stack figcaption {
  padding: 0 0 0.6%;
  overflow: hidden;
  color: #0c5067;
  font-size: var(--debrief-font-caption, 1.5625cqw);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.debrief-slide-chart-stack img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
}

.debrief-slide-missing {
  display: grid;
  flex: 1 1 auto;
  place-items: center;
  border: 1px dashed #aebac2;
  color: var(--muted);
  font-size: var(--debrief-font-subtitle, 1.5625cqw);
  text-align: center;
}

.debrief-notes-grid {
  display: grid;
  flex: 1 1 auto;
  min-height: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4%;
}

.debrief-notes-grid.is-single-column {
  grid-template-columns: minmax(0, 1fr);
}

.debrief-notes-only .debrief-notes-grid {
  margin-top: 0.5%;
}

.debrief-objective-summary {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 2%;
  align-items: start;
  margin-bottom: 2.2%;
  padding: 1.2% 1.6%;
  border: 1px solid #d7dee3;
  border-radius: 5px;
  background: #f8fafb;
  color: #35434b;
  font-size: var(--debrief-font-subtitle, 1.5625cqw);
  line-height: 1.35;
}

.debrief-notes-slide .debrief-objective-summary {
  position: absolute;
  top: 14.667%;
  left: var(--debrief-notes-x, 5.4%);
  width: var(--debrief-notes-w, 89.33%);
  height: 10.133%;
  margin: 0;
}

.debrief-objective-summary strong {
  color: var(--accent-strong);
}

.debrief-findings-grid {
  display: grid;
  flex: 1 1 auto;
  min-height: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  overflow: hidden;
}

.debrief-performance-sections {
  position: absolute;
  top: var(--debrief-performance-y, 17.6%);
  left: var(--debrief-performance-x, 5.7%);
  width: var(--debrief-performance-w, 87.45%);
  height: var(--debrief-performance-h, 65.47%);
  display: grid;
  min-height: 0;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 1.4%;
}

.debrief-axis-statistics-grid {
  position: absolute;
  top: var(--debrief-two-by-two-y, 16.667%);
  left: var(--debrief-two-by-two-x, 5.4%);
  width: var(--debrief-two-by-two-w, 89.25%);
  height: var(--debrief-two-by-two-h, 68.267%);
  display: grid;
  min-height: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  column-gap: var(--debrief-two-by-two-gap-x, 4.2%);
  row-gap: var(--debrief-two-by-two-gap-y, 3.87%);
}

.debrief-axis-statistics-grid > section {
  min-width: 0;
  min-height: 0;
  padding: 1.6% 2%;
  border: 1px solid #c7d4d9;
  border-radius: 8px;
  background: #fbfcfd;
}

.debrief-axis-statistics-grid h4 {
  margin: 0 0 1.4%;
  color: var(--accent-strong);
  font-size: var(--debrief-font-section, 2.0833cqw);
}

.debrief-axis-statistics-grid .debrief-result-list {
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
}

.debrief-axis-statistics-grid .debrief-result-list > div {
  grid-template-columns: minmax(8.723cqw, 18%) minmax(0, 1fr);
  font-size: min(var(--debrief-font-body, 1.6667cqw), 1.5cqw);
}

.debrief-control-performance-grid .debrief-result-list > div {
  grid-template-columns: minmax(10.2cqw, 24%) minmax(0, 1fr);
  gap: 4px;
  font-size: min(var(--debrief-font-body, 1.6667cqw), 1.42cqw);
}

.debrief-control-performance-grid .is-rate-controller-section .debrief-result-list > div {
  grid-template-columns: minmax(5.4cqw, 13%) minmax(0, 1fr);
}

.debrief-performance-sections > section {
  display: grid;
  min-height: 0;
  grid-template-columns: minmax(15.957cqw, 19%) minmax(0, 1fr);
  gap: 2%;
  align-items: start;
  padding: 1.1% 0;
  border-bottom: 1px solid #b7c7ce;
}

.debrief-performance-sections .debrief-result-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 2.5%;
}

.debrief-control-sections {
  display: grid;
  flex: 1 1 auto;
  min-height: 0;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 2%;
}

.debrief-control-sections > section {
  display: grid;
  min-height: 0;
  grid-template-columns: minmax(17.021cqw, 20%) minmax(0, 1fr);
  gap: 2%;
  align-items: start;
  padding: 1.4% 0;
  border-bottom: 1px solid #b7c7ce;
}

.debrief-control-sections .debrief-result-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 2.5%;
}

.debrief-findings-page {
  position: absolute;
  top: var(--debrief-findings-y, 16.267%);
  left: var(--debrief-findings-x, 5.7%);
  width: var(--debrief-findings-w, 87%);
  height: var(--debrief-findings-h, 72%);
  display: grid;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 2%;
}

.debrief-finding-list-full {
  align-content: start;
  gap: 1.6%;
}

.debrief-finding-list-full li {
  min-height: 0;
  grid-template-columns: minmax(15.957cqw, 28%) minmax(0, 1fr);
  padding: 1.1% 1.2%;
  background: #f8fafb;
  font-size: var(--debrief-font-body, 1.6667cqw);
  line-height: 1.35;
}

.debrief-analysis-evidence {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  padding-top: 1%;
  border-top: 1px solid #d7dee3;
}

.debrief-findings-grid > section {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 94%, #fff);
  overflow: hidden;
}

.debrief-findings-grid h4 {
  margin: 0 0 7px;
  color: var(--accent-strong);
  font-size: var(--debrief-font-section, 2.0833cqw);
}

.debrief-finding-list {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.debrief-finding-list li {
  display: grid;
  grid-template-columns: minmax(8.511cqw, 0.42fr) minmax(0, 1fr);
  gap: 7px;
  padding-left: 7px;
  border-left: 3px solid var(--line);
  font-size: var(--debrief-font-subtitle, 1.5625cqw);
}

.debrief-finding-list li.is-error { border-left-color: var(--danger); }
.debrief-finding-list li.is-warning { border-left-color: #d97706; }
.debrief-finding-list li.is-info { border-left-color: var(--accent); }

.debrief-finding-list strong,
.debrief-finding-list span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}

.debrief-flight-info-table th,
.debrief-flight-info-table td,
.debrief-quality-slide th,
.debrief-quality-slide td {
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.debrief-finding-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.debrief-finding-metrics > div {
  display: grid;
  gap: 2px;
  padding: 7px;
  border-radius: 6px;
  background: #fff;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 80%, transparent);
}

.debrief-finding-metrics span,
.debrief-finding-metrics small,
.debrief-stable-summary,
.debrief-analysis-evidence,
.debrief-finding-empty {
  margin: 0;
  color: var(--muted);
  font-size: var(--debrief-font-subtitle, 1.5625cqw);
}

.debrief-finding-metrics strong {
  font-size: var(--debrief-font-body, 1.6667cqw);
}

.debrief-analysis-evidence {
  margin-top: 7px;
}

.debrief-result-list {
  display: grid;
  gap: 4px;
  margin: 0;
}

.debrief-result-list > div {
  display: grid;
  grid-template-columns: minmax(7.66cqw, 0.42fr) minmax(0, 1fr);
  gap: 7px;
  align-items: baseline;
  padding-bottom: 3px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 68%, transparent);
  font-size: var(--debrief-font-subtitle, 1.5625cqw);
}

.debrief-result-list > div.is-warning {
  padding: 3px 5px;
  border-left: 3px solid #d97706;
  background: #fff7ed;
}

.debrief-result-list > div.is-danger {
  padding: 3px 5px;
  border-left: 3px solid #be123c;
  background: #fff1f2;
}

.debrief-event-table th:nth-child(1) { width: 12%; }
.debrief-event-table th:nth-child(2) { width: 12%; }
.debrief-event-table th:nth-child(3) { width: 30%; }
.debrief-event-table th:nth-child(4) { width: 46%; }

.debrief-event-table th:nth-child(3),
.debrief-event-table td:nth-child(3) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.debrief-event-table th,
.debrief-event-table td {
  padding: 0.35% 0.5%;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
  line-height: 1.18;
  vertical-align: top;
}

.debrief-events-slide .debrief-event-table {
  position: absolute;
  top: var(--debrief-events-y, 16.533%);
  left: var(--debrief-events-x, 4.95%);
  width: var(--debrief-events-w, 90%);
  max-height: var(--debrief-events-h, 72.667%);
}

.debrief-parameters-slide .debrief-param-table {
  position: absolute;
  top: var(--debrief-parameters-y, 14%);
  left: var(--debrief-parameters-x, 4.95%);
  width: var(--debrief-parameters-w, 90%);
  max-height: var(--debrief-parameters-h, 74.4%);
  font-size: var(--debrief-font-subtitle, 1.5625cqw);
  line-height: 1.12;
}

.debrief-parameters-slide .debrief-param-table th,
.debrief-parameters-slide .debrief-param-table td {
  padding: 0.12% 0.4%;
}

.debrief-notes-slide .debrief-notes-grid {
  position: absolute;
  top: var(--debrief-notes-y, 28.667%);
  left: var(--debrief-notes-x, 5.4%);
  width: var(--debrief-notes-w, 89.33%);
  height: var(--debrief-notes-h, 55.87%);
}

.debrief-result-list dt {
  min-width: 0;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.debrief-result-list dd {
  min-width: 0;
  margin: 0;
  color: var(--text);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.debrief-event-list {
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.debrief-event-list li {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 7px;
  align-items: baseline;
  font-size: var(--debrief-font-subtitle, 1.5625cqw);
}

.debrief-event-list time {
  color: var(--accent-strong);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.debrief-event-list span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.debrief-preview-shell:fullscreen {
  height: 100%;
  padding: 12px 18px 18px;
  background: #111827;
  overflow: hidden;
}

.debrief-preview-shell.is-presenting {
  position: fixed;
  inset: 0;
  z-index: 1200;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100vh;
  height: 100dvh;
  padding: 12px 18px 18px;
  overflow: hidden;
  background: #111827;
}

body.debrief-presenting {
  overflow: hidden;
}

.debrief-preview-shell:fullscreen .debrief-present-exit,
.debrief-preview-shell.is-presenting .debrief-present-exit {
  display: inline-grid;
  place-items: center;
}

.debrief-preview-shell:fullscreen .debrief-present-navigation,
.debrief-preview-shell.is-presenting .debrief-present-navigation {
  display: flex;
}

.debrief-preview-shell.is-presenting .debrief-preview-toolbar,
.debrief-preview-shell:fullscreen .debrief-preview-toolbar {
  margin-bottom: 8px;
  color: #cbd5e1;
}

.debrief-preview-shell.is-presenting .debrief-preview-toolbar > strong,
.debrief-preview-shell.is-presenting .debrief-preview-toolbar > span,
.debrief-preview-shell:fullscreen .debrief-preview-toolbar > strong,
.debrief-preview-shell:fullscreen .debrief-preview-toolbar > span {
  display: none;
}

.debrief-preview-shell:fullscreen .debrief-slide-list {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 0;
  max-width: none;
  padding: 0;
  overflow: hidden;
  border: 0;
  margin: 0 auto;
  background: transparent;
}

.debrief-preview-shell.is-presenting .debrief-slide-list {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 0;
  max-width: none;
  padding: 0;
  overflow: hidden;
  border: 0;
  margin: 0 auto;
  background: transparent;
}

.debrief-preview-shell.is-presenting .debrief-slide,
.debrief-preview-shell:fullscreen .debrief-slide {
  display: none;
}

.debrief-preview-shell.is-presenting .debrief-slide.is-presentation-active,
.debrief-preview-shell:fullscreen .debrief-slide.is-presentation-active {
  display: block;
  width: min(100%, calc((100vh - 82px) * 16 / 9));
  max-height: calc(100vh - 82px);
  margin: auto;
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.42);
}

@media (max-width: 980px) {
  .debrief-builder {
    grid-template-columns: minmax(0, 1fr);
  }

  .debrief-editor {
    padding: 16px 0 18px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .debrief-preview-shell {
    grid-template-rows: auto minmax(0, 1fr);
    height: clamp(420px, 72vh, 680px);
    height: clamp(420px, 72dvh, 680px);
    min-height: 0;
    padding: 15px 0 18px;
    overflow: hidden;
    contain: size;
  }

  .debrief-slide-list {
    height: auto;
    max-height: none;
    padding: 8px;
    overflow: auto;
  }
}

.debrief-note-column {
  min-width: 0;
  padding-top: 2%;
  border-top: 3px solid #8eb9c8;
}

.debrief-note-column h4 {
  margin: 0 0 5%;
  font-size: var(--debrief-font-section, 2.0833cqw);
}

.debrief-note-column.is-writing-space {
  display: flex;
  min-height: 0;
  flex-direction: column;
}

.debrief-note-column.is-writing-space > div {
  flex: 1 1 auto;
  min-height: 0;
  border: 1px solid #d7dee3;
  border-radius: 4px;
  background:
    repeating-linear-gradient(
      to bottom,
      #fcfdfd 0,
      #fcfdfd calc(20% - 1px),
      #e3e8ec calc(20% - 1px),
      #e3e8ec 20%
    );
}

.debrief-note-column ul {
  display: grid;
  gap: 7%;
  margin: 0;
  padding-left: 8%;
  color: #35434b;
  font-size: var(--debrief-font-body, 1.6667cqw);
  line-height: 1.35;
}

.debrief-param-table td,
.debrief-param-table th {
  padding: 0.1064cqw 0.3191cqw;
  font-size: var(--debrief-font-subtitle, 1.5625cqw);
  line-height: 1.1;
}

.debrief-param-table td:first-child,
.debrief-param-table th:first-child {
  font-size: var(--debrief-font-small, 1.3021cqw);
  letter-spacing: -0.015em;
}

.debrief-param-table td.is-different-value {
  background: #fff2e5;
  color: #9a3412;
  font-weight: 750;
}

.debrief-empty-state {
  display: grid;
  min-height: 420px;
  place-items: center;
  padding: 28px;
  color: var(--muted);
  text-align: center;
}

.report-editor {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto;
  gap: 12px 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.report-field {
  display: grid;
  gap: 5px;
}

.report-field label,
.report-chart-options legend {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.report-context {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.report-selected-logs {
  display: flex;
  grid-column: 1 / -1;
  flex-wrap: wrap;
  gap: 6px 12px;
  color: var(--muted);
  font-size: 12px;
}

.report-chart-options {
  min-width: 0;
  margin: 0;
  padding: 9px 10px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.report-chart-options > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px 12px;
}

.report-chart-options label {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 12px;
}

.report-chart-options label span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-actions {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: 7px;
}

.report-preview {
  margin-top: 14px;
}

.report-document {
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px;
  border: 1px solid var(--line);
  background: #fff;
}

.report-document header {
  padding-bottom: 16px;
  border-bottom: 2px solid var(--text);
}

.report-document h1 {
  margin: 0;
  font-size: 26px;
  letter-spacing: 0;
}

.report-document header p,
.report-chart-missing {
  color: var(--muted);
}

.report-document h2 {
  margin: 24px 0 9px;
  font-size: 17px;
}

.report-document h3 {
  margin: 18px 0 8px;
  font-size: 14px;
}

.report-note {
  line-height: 1.55;
}

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

.report-chart-images figure {
  min-width: 0;
  margin: 0;
}

.report-chart-images img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
}

.report-chart-images figcaption {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
  text-align: center;
}

@media (max-width: 1280px) and (min-width: 1121px) {
  .replay-transport {
    grid-template-columns: auto minmax(100px, 1fr) 76px;
  }

  .replay-time-readout {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .replay-transport-buttons {
    grid-column: 1;
    grid-row: 2;
  }

  .replay-timeline {
    grid-column: 2;
    grid-row: 2;
  }

  .replay-transport select {
    grid-column: 3;
    grid-row: 2;
  }
}

@media (max-width: 1120px) {
  .app-nav {
    gap: 14px;
    padding-inline: 16px;
  }

  .app-nav button {
    font-size: 13px;
  }

  .data-controls,
  .detail-grid {
    grid-template-columns: 1fr;
  }

  .detail-edit-fields {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .detail-info-card,
  .detail-weather-card {
    grid-column: auto;
  }

  .detail-record-facts {
    grid-column: auto;
  }

  .log-filters {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  #logSearchInput {
    max-width: none;
  }

  .log-filters > * {
    grid-column: auto !important;
  }

  .log-filter-more {
    justify-self: stretch;
  }

  .compact-options-disclosure > summary {
    width: 100%;
  }

  .data-list-toolbar {
    align-items: flex-start;
  }

  .data-list-options {
    flex: 1 1 auto;
  }

  .upload-form {
    grid-template-columns:
      minmax(105px, 0.45fr)
      minmax(150px, 1fr)
      minmax(170px, 1fr)
      minmax(104px, max-content);
  }

  .upload-form.is-guest {
    grid-template-columns:
      minmax(105px, 0.45fr)
      minmax(170px, 1fr)
      minmax(104px, max-content);
  }

  .upload-form > input[type="file"] {
    grid-column: 1 / -1;
  }

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

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

  .stats-location-map-frame {
    min-height: 340px;
  }

  .stats-columns,
  .stats-columns.stats-columns-three,
  .stats-columns.stats-columns-two {
    grid-template-columns: 1fr;
  }

  .diagnostic-summary-grid,
  .diagnostic-log-grid,
  .report-chart-images {
    grid-template-columns: 1fr;
  }

  .diagnostic-explainer {
    grid-template-columns: 1fr;
  }

  .diagnostic-score-rule {
    text-align: left;
    white-space: normal;
  }

  .debrief-builder {
    grid-template-columns: minmax(270px, 320px) minmax(0, 1fr);
  }

  .report-chart-options > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .replay-layout {
    grid-template-columns: 1fr;
  }

  .replay-stage-panel {
    height: auto;
  }

  /*
   * The Cesium surface is absolutely positioned. On tablet layouts the stage
   * switches to auto height, so it needs an intrinsic scene height or Safari
   * can collapse the entire WebGL container to 0px.
   */
  .replay-scene-placeholder {
    min-height: clamp(430px, 62vh, 700px);
    min-height: clamp(430px, 62dvh, 700px);
  }

  .replay-inspector {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    height: auto;
    overflow: visible;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .replay-mode-events-panel {
    grid-column: 1 / -1;
    overflow: visible;
  }

  .replay-mode-events-list {
    max-height: 285px;
  }

  .replay-inspector section {
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }

  .replay-inspector section:last-child {
    border-right: 0;
  }

  .replay-inspector section:nth-child(2n) {
    border-right: 0;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .topbar-status {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    text-align: left;
  }

  .topbar-account-row {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .auth-box {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .sortie-grid {
    grid-template-columns: 1fr;
  }

  .summary-strip,
  .chart-row-grid {
    grid-template-columns: 1fr;
  }

  .param-panel > .panel-head {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .param-options {
    flex-wrap: wrap;
  }

  .param-search {
    width: 100%;
  }

  .chart-label-cell {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding-bottom: 8px;
  }

  .chart-label-actions {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .chart-label-actions::-webkit-scrollbar {
    display: none;
  }

  .chart-view-actions {
    flex-wrap: nowrap;
    margin-left: 0;
  }

  .chart-panel.is-collapsed .chart-label-cell {
    border-bottom: 0;
    padding-bottom: 0;
  }
}

@media (max-width: 700px) {
  .debrief-meta-fields,
  .debrief-notes-editor {
    grid-template-columns: minmax(0, 1fr);
  }

  .debrief-meta-fields .is-title,
  .debrief-notes-editor .is-objective {
    grid-column: auto;
  }

  .stats-weather-distributions {
    grid-template-columns: 1fr;
  }

  .stats-weather-chart-summary {
    white-space: normal;
  }

  .stats-weather-distribution-footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .diagnostic-event-groups {
    grid-template-columns: 1fr;
  }

  .diagnostic-event-group {
    grid-template-rows: auto minmax(0, 1fr);
  }

  .diagnostic-event-group .diagnostic-timeline ol {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 880px) {
  .debrief-builder {
    grid-template-columns: 1fr;
  }

  .debrief-editor {
    padding-right: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .debrief-preview-shell {
    padding-left: 0;
  }

  .debrief-slide-list {
    max-height: none;
  }

  .replay-page-head {
    flex-wrap: wrap;
  }

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

  .replay-export-summary {
    grid-column: 1 / -1;
  }

  .replay-map-toolbar {
    right: 10px;
    flex-wrap: nowrap;
    width: auto;
    padding-bottom: 8px;
    scrollbar-color: rgba(255, 255, 255, 0.7) transparent;
    scrollbar-width: thin;
  }

  .replay-map-toolbar::-webkit-scrollbar {
    display: block;
    height: 3px;
  }

  .replay-map-toolbar::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
  }

  .replay-source-strip {
    order: 3;
    width: 100%;
    min-width: 0;
  }

  .replay-source-control {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .data-list-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .data-list-actions {
    justify-content: flex-end;
  }

  .upload-form {
    grid-template-columns:
      minmax(105px, 0.45fr)
      minmax(150px, 1fr)
      minmax(170px, 1fr)
      minmax(104px, max-content);
  }

  .upload-form.is-guest {
    grid-template-columns:
      minmax(105px, 0.45fr)
      minmax(170px, 1fr)
      minmax(104px, max-content);
  }

  .upload-form > input[type="file"] {
    grid-column: 1 / -1;
  }
}

@media (max-width: 880px) {
  .replay-strip-chart-stack {
    max-width: calc(100% - 12px);
    max-height: calc(100% - 70px);
  }

  .replay-strip-chart-stack-head {
    flex-wrap: nowrap;
  }

  .replay-strip-chart-stack-actions {
    flex: 0 0 auto;
    gap: 5px;
  }

  .replay-strip-chart-stack-actions label > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .replay-strip-chart-head {
    gap: 7px;
  }

  .replay-strip-chart-head label > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .replay-strip-chart-head select {
    min-width: 126px;
  }

  .replay-map-toolbar {
    right: 10px;
    flex-wrap: nowrap;
    width: auto;
  }

  .replay-map-toolbar #replayFullscreenButton {
    order: -1;
    position: sticky;
    z-index: 2;
    left: 0;
    min-width: 34px;
    width: 34px;
    flex: 0 0 34px;
    border-color: rgba(255, 255, 255, 0.78);
    background: #fff;
    box-shadow: 5px 0 8px rgba(19, 27, 33, 0.34);
  }

  .replay-model-options-panel {
    left: 10px;
    width: auto;
  }

  .vehicle-model-form-grid,
  .vehicle-model-admin-fields,
  .vehicle-model-admin-metadata {
    grid-template-columns: minmax(0, 1fr);
  }

  .vehicle-model-editor {
    grid-template-columns: minmax(0, 1fr);
  }

  .vehicle-model-preview-stage {
    min-height: 300px;
  }

  .vehicle-model-file-field {
    grid-column: auto;
  }

  .vehicle-model-admin-section .admin-directory-toolbar {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .mobile-upload-toggle {
    display: flex;
    width: 100%;
    min-height: 38px;
    align-items: center;
    justify-content: space-between;
    padding: 7px 10px;
    border-color: var(--line);
    background: var(--surface-2);
    color: var(--text);
    font-weight: 700;
  }

  .mobile-upload-toggle[aria-expanded="false"] + .data-control-row {
    display: none;
  }

  .data-upload-controls {
    gap: 5px;
  }

  .log-pagination {
    align-items: stretch;
    flex-direction: column;
    gap: 5px;
  }

  .log-pagination-controls {
    justify-content: space-between;
  }

  .log-attachment-upload,
  .log-attachment-list li {
    grid-template-columns: minmax(0, 1fr);
  }

  .log-attachment-list .danger-link-button,
  .log-attachment-upload button {
    justify-self: stretch;
  }

  .log-table-wrap {
    max-height: none;
    overflow: visible;
    border: 0;
    border-radius: 0;
    scrollbar-gutter: auto;
  }

  .log-table,
  .log-table[data-view="basic"],
  .log-table[data-view="full"] {
    display: block;
    width: 100%;
    min-width: 0;
    table-layout: auto;
  }

  .log-table thead {
    display: none;
  }

  .log-table tbody {
    display: grid;
    gap: 8px;
  }

  .log-table tbody tr {
    display: grid;
    position: relative;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 8px;
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface);
    content-visibility: auto;
    contain-intrinsic-size: auto 260px;
  }

  .log-table tbody tr.is-selected {
    border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
    box-shadow: inset 3px 0 0 var(--accent);
  }

  .log-table tbody td {
    display: grid;
    min-width: 0;
    width: auto;
    max-width: none;
    align-content: start;
    gap: 2px;
    padding: 4px 5px;
    border: 0;
    overflow: visible;
    white-space: normal;
  }

  .log-table tbody td::before {
    content: attr(data-mobile-label);
    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
    line-height: 1.25;
  }

  .log-table tbody td[data-log-column="compare"] {
    display: block;
    position: absolute;
    z-index: 2;
    top: 8px;
    right: 8px;
    min-width: 32px;
    padding: 0;
  }

  .log-table tbody td[data-log-column="compare"]::before,
  .log-table tbody td[data-log-column="label"]::before {
    display: none;
  }

  .log-table tbody td[data-log-column="label"] {
    grid-column: 1 / -1;
    padding-top: 1px;
    padding-right: 44px;
    font-size: 13px;
    font-weight: 700;
  }

  .log-table tbody td:is(
    [data-log-column="place"],
    [data-log-column="weather"],
    [data-log-column="note"],
    [data-log-column="diagnostics"],
    [data-log-column="filename"],
    [data-log-column="manage"]
  ) {
    grid-column: 1 / -1;
  }

  .log-table tbody td.empty-state {
    grid-column: 1 / -1;
    padding: 18px 8px;
  }

  .log-table tbody .weather-pill,
  .log-table tbody .metadata-external-link,
  .log-table tbody .place-compact,
  .log-table[data-view="basic"] td:is(
    [data-log-column="label"],
    [data-log-column="airframe"],
    [data-log-column="place"],
    [data-log-column="note"]
  ) {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .chart-row-grid,
  .path-chart-panel .chart-row-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .chart-label-cell {
    min-width: 0;
    padding: 8px 9px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .chart-label-actions {
    width: 100%;
    max-width: 100%;
    padding-bottom: 2px;
  }

  .chart-legend,
  .legend {
    grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
    min-width: 0;
  }

  .chart-canvas,
  .path-chart-panel .chart-canvas {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .replay-map-toolbar,
  .replay-stage-panel.is-mobile-fullscreen .replay-map-toolbar {
    top: 6px;
    right: 6px;
    left: 6px;
    width: calc(100% - 12px);
    max-width: none;
    gap: 3px;
    padding: 4px;
    overflow: hidden;
  }

  .replay-map-toolbar button,
  .replay-map-toolbar .replay-icon-button,
  .replay-map-toolbar .replay-camera-zoom-button,
  .replay-map-toolbar .replay-add-strip-chart-button {
    width: 28px;
    min-width: 28px;
    min-height: 28px;
    padding: 0;
  }

  .replay-map-toolbar #replayFullscreenButton {
    position: static;
    width: 30px;
    min-width: 30px;
    flex-basis: 30px;
    box-shadow: none;
  }

  .replay-map-toolbar label:not(.replay-map-toggle) {
    gap: 2px;
    padding-left: 0;
    font-size: 0;
  }

  .replay-map-toolbar label:not(.replay-map-toggle) select,
  .replay-map-toolbar label:not(.replay-map-toggle) input {
    font-size: 10px;
  }

  .replay-map-toolbar select {
    width: 60px;
    min-width: 0;
    padding: 3px 17px 3px 4px;
  }

  .replay-map-toolbar .replay-toolbar-vehicle-size > span,
  .replay-map-toolbar .replay-map-toggle > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .replay-map-toolbar .replay-toolbar-vehicle-size input {
    width: 44px;
  }

  .replay-map-toolbar .replay-model-options-button,
  .replay-map-toolbar .replay-view-options-button {
    width: 30px;
    min-width: 30px;
    gap: 0;
    padding: 0;
    font-size: 0;
  }

  .replay-map-toolbar .replay-model-options-button > span,
  .replay-map-toolbar .replay-view-options-button > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .replay-map-toolbar .replay-model-options-button::before,
  .replay-map-toolbar .replay-view-options-button::before {
    font-size: 13px;
    font-weight: 800;
  }

  .replay-map-toolbar .replay-model-options-button::before {
    content: "M";
  }

  .replay-map-toolbar .replay-view-options-button::before {
    content: "\25A3";
  }

  .page-help-disclosure > p,
  .inline-help-disclosure > p,
  .summary-help-disclosure > p {
    position: fixed;
    top: 76px;
    right: 12px;
    left: 12px;
    width: auto;
  }

  .vehicle-model-axis-grid,
  .vehicle-model-axis-map,
  .vehicle-model-stl-unit {
    grid-template-columns: minmax(0, 1fr);
  }

  .vehicle-model-form label,
  .vehicle-model-form input,
  .vehicle-model-form select,
  .vehicle-model-form textarea {
    min-width: 0;
    max-width: 100%;
  }

  .vehicle-model-preview-stage {
    min-height: 0;
  }

  .vehicle-model-progress > div,
  .vehicle-model-dialog-actions,
  .admin-directory-toolbar-actions {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 1180px) and (min-width: 881px) {
  .replay-source-strip {
    order: 3;
    flex-basis: 100%;
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 1180px) and (min-width: 960px) and (orientation: landscape) {
  .replay-page-head {
    flex-wrap: nowrap;
    gap: 8px;
    padding-inline: 10px;
  }

  .replay-page-head h2 {
    font-size: 18px;
    white-space: nowrap;
  }

  .replay-source-strip {
    order: 0;
    flex: 1 1 auto;
    flex-basis: auto;
    flex-wrap: nowrap;
    width: auto;
    min-width: 0;
    gap: 7px;
  }

  .replay-source-control {
    grid-template-columns: auto minmax(130px, 1fr);
    flex: 0 1 390px;
    width: min(390px, 40vw);
    max-width: 390px;
  }

  .replay-range-control {
    gap: 4px;
  }

  .replay-range-control label {
    gap: 3px;
  }

  .replay-range-control input {
    width: 56px;
  }

  .replay-page-actions {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: 5px;
  }
}

@media (max-width: 520px) {
  .stats-location-map-frame {
    min-height: 285px;
  }

  .stats-location-map-hint {
    right: 7px;
    bottom: 7px;
    max-width: calc(100% - 14px);
  }

  .topbar {
    gap: 10px;
    padding: 12px 14px;
  }

  .topbar h1 {
    font-size: 21px;
  }

  .topbar p,
  .topbar-status {
    font-size: 12px;
    line-height: 1.35;
  }

  .topbar-account-row,
  .auth-box {
    gap: 6px;
  }

  .topbar-account-row {
    margin-bottom: 0;
  }

  .app-shell {
    padding: 10px;
  }

  .replay-export-backdrop {
    align-items: start;
    padding: 8px;
  }

  .replay-export-dialog {
    gap: 10px;
    padding: 12px;
  }

  .replay-events-backdrop {
    align-items: center;
    overflow: hidden;
  }

  .replay-events-dialog {
    height: calc(100vh - 16px);
    height: calc(100dvh - 16px);
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
    padding: 10px;
  }

  .replay-event-row {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 7px;
  }

  .replay-event-row > .primary-button,
  .replay-event-row > .secondary-button {
    grid-column: 2;
    justify-self: start;
  }

  .replay-export-options {
    grid-template-columns: 1fr;
  }

  .replay-export-overlay-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .replay-export-summary {
    grid-column: auto;
  }

  .replay-export-progress {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .replay-export-actions {
    flex-wrap: wrap;
  }

  .data-head {
    display: grid;
  }

  .app-nav {
    gap: 18px;
    padding: 0 12px 3px;
    scroll-snap-type: x proximity;
    scrollbar-color: var(--line-strong) transparent;
    scrollbar-width: thin;
  }

  .app-nav::-webkit-scrollbar {
    display: block;
    height: 3px;
  }

  .app-nav::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--line-strong);
  }

  .compare-tray {
    grid-template-columns: 1fr auto;
  }

  .compare-tray-items {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    max-width: 100%;
    padding-bottom: 2px;
    scroll-padding-inline: 2px;
    scroll-snap-type: x proximity;
  }

  .compare-chip {
    flex: 0 0 min(250px, calc(100vw - 64px));
    min-width: min(220px, calc(100vw - 64px));
    max-width: min(250px, calc(100vw - 64px));
    scroll-snap-align: start;
  }

  .compare-open-button {
    grid-column: 2;
    grid-row: 1;
  }

  .upload-form,
  .log-filters {
    grid-template-columns: 1fr;
  }

  .compact-options-panel {
    position: static;
    width: 100%;
    margin-top: 6px;
    box-shadow: none;
  }

  .log-filter-more-panel,
  .analysis-options-panel {
    grid-template-columns: 1fr;
  }

  .upload-progress-panel {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .upload-progress-copy {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .upload-progress-copy span {
    overflow: visible;
    white-space: normal;
  }

  .data-control-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .data-control-label {
    min-height: auto;
  }

  .data-list-options,
  .data-list-actions {
    align-items: stretch;
    display: grid;
    grid-template-columns: 1fr;
  }

  .upload-form > input[type="file"],
  .upload-form > select,
  .upload-form > .upload-team-picker,
  .upload-form > .upload-note-input,
  .upload-form > button {
    grid-column: 1;
  }

  .admin-panel-head,
  .admin-section-head {
    display: grid;
  }

  .admin-tabs {
    gap: 14px;
  }

  .admin-token-summary {
    grid-template-columns: 1fr;
  }

  .admin-token-summary > div {
    border-right: 0 !important;
    border-bottom: 1px solid var(--line);
  }

  .admin-token-dialog-backdrop {
    padding: 10px;
  }

  .admin-token-dialog {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    padding: 12px;
  }

  .admin-token-dialog .admin-section-head {
    display: flex;
  }

  .feedback-backdrop {
    align-items: start;
    padding: 10px;
  }

  .info-dialog-backdrop {
    align-items: start;
    padding: 10px;
  }

  .info-dialog {
    width: calc(100% - 10px);
    max-height: calc(100vh - 20px);
    padding: 13px;
  }

  .version-release,
  .diagnostic-dialog-overview {
    grid-template-columns: 1fr;
  }

  .diagnostic-dialog-status {
    justify-content: space-between;
  }

  .diagnostic-dialog-score {
    border-left: 0;
  }

  .login-required-backdrop {
    align-items: start;
    padding: 10px;
  }

  .login-required-dialog {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    padding: 13px;
  }

  .guest-demo-banner {
    align-items: stretch;
    flex-direction: column;
  }

  .feedback-dialog {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    padding: 13px;
  }

  .admin-feedback-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-feedback-toolbar input,
  .admin-feedback-toolbar select {
    flex: 0 0 auto;
    width: 100%;
  }

  .admin-feedback-toolbar > span {
    margin-left: 0;
  }

  .admin-feedback-review-fields {
    grid-template-columns: 1fr;
  }

  .user-admin-panel {
    top: 10px;
    left: 10px;
    right: 10px;
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
  }

  .admin-default-team-field {
    grid-template-columns: 1fr;
  }

  .panel-actions {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .toolbar {
    align-items: stretch;
  }

  .toolbar label,
  .toolbar button,
  .toolbar-button-group {
    width: 100%;
  }

  .toolbar-button-group {
    align-items: stretch;
  }

  .report-editor {
    grid-template-columns: 1fr;
  }

  .debrief-actions {
    grid-template-columns: 1fr;
  }

  .debrief-page-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .debrief-page-actions {
    justify-content: flex-end;
    width: 100%;
  }

  .debrief-generate-context {
    flex-basis: 100%;
  }

  .debrief-selected-logs-summary {
    max-width: none;
    flex: 1 1 auto;
  }

  .planned-page-head {
    padding-bottom: 20px;
  }

  .replay-page-head {
    display: grid;
  }

  .replay-page-actions {
    width: 100%;
  }

  .replay-page-actions button {
    flex: 1 1 0;
  }

  .replay-source-control {
    grid-template-columns: 1fr;
  }

  .replay-source-strip {
    display: grid;
    grid-template-columns: 1fr;
  }

  .replay-range-control {
    justify-content: flex-start;
  }

  .replay-map-toolbar {
    right: 10px;
    flex-wrap: nowrap;
    width: auto;
  }

  .replay-map-help-panel {
    width: min(360px, calc(100vw - 40px));
  }

  .replay-stage-panel {
    grid-template-rows: minmax(56vh, 1fr) auto;
  }

  .replay-scene-placeholder {
    min-height: 56vh;
  }

  .replay-inspector {
    grid-template-columns: 1fr;
  }

  .replay-inspector section {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .replay-transport {
    grid-template-columns: minmax(0, 1fr) 76px;
  }

  .replay-time-readout {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .replay-transport-buttons {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .replay-timeline {
    grid-column: 1;
    grid-row: 3;
  }

  .replay-transport input {
    grid-column: auto;
    grid-row: auto;
  }

  .replay-transport select {
    grid-column: 2;
    grid-row: 3;
    width: 76px;
  }

  .planned-scope > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .report-selected-logs {
    grid-column: auto;
  }

  .report-chart-options > div {
    grid-template-columns: 1fr;
  }

  .report-actions {
    justify-content: stretch;
  }

  .report-actions button {
    flex: 1 1 0;
  }

  .report-document {
    padding: 16px;
  }

  input[type="number"] {
    width: 100%;
  }

  .chart-canvas {
    height: 288px;
  }

  .chart-label-actions {
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .chart-label-actions::-webkit-scrollbar {
    display: none;
  }

  .chart-order-controls,
  .chart-unit-controls {
    flex: 0 0 auto;
    flex-wrap: nowrap;
  }

  .chart-view-actions {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 2px;
    margin-left: 0;
  }

  .chart-range-zoom-button,
  .chart-zoom-out-button,
  .chart-download-button,
  .chart-debrief-button,
  .chart-report-button,
  .chart-order-button {
    width: 32px;
    min-height: 34px;
  }

  .chart-unit-button {
    min-width: 32px;
    min-height: 32px;
    padding-inline: 7px;
  }

  .path-chart-panel .chart-canvas {
    height: 340px;
  }
}

.debrief-nav-badge {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.debrief-offscreen-chart {
  position: fixed;
  left: -12000px;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
}

.analysis-chart-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin: 8px 10px 8px auto;
}

.analysis-chart-download,
.analysis-debrief-capture,
.analysis-report-capture {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 5px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: 7px;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  color: var(--accent-strong);
}

.analysis-chart-download:hover,
.analysis-chart-download:focus-visible,
.analysis-debrief-capture:hover,
.analysis-debrief-capture:focus-visible,
.analysis-report-capture:hover,
.analysis-report-capture:focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
}

.analysis-chart-download:disabled,
.analysis-chart-download.is-busy,
.analysis-debrief-capture:disabled,
.analysis-report-capture:disabled {
  cursor: progress;
  opacity: 0.55;
}

.analysis-chart-action-icon {
  width: 18px;
  height: 18px;
}

.chart-panel:not(.path-chart-panel)[data-chart-height="low"] .chart-canvas {
  height: 150px;
}

.chart-panel:not(.path-chart-panel)[data-chart-height="normal"] .chart-canvas {
  height: 188px;
}

.chart-panel:not(.path-chart-panel)[data-chart-height="high"] .chart-canvas {
  height: 260px;
}

.chart-panel:not(.path-chart-panel)[data-chart-height="xhigh"] .chart-canvas {
  height: 340px;
}

.path-chart-panel[data-chart-height="low"] .chart-canvas {
  height: 320px;
}

.path-chart-panel[data-chart-height="normal"] .chart-canvas {
  height: 420px;
}

.path-chart-panel[data-chart-height="high"] .chart-canvas {
  height: 560px;
}

.path-chart-panel[data-chart-height="xhigh"] .chart-canvas {
  height: 720px;
}

@media (max-width: 1100px) {
  .admin-dashboard-visit-metrics {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .admin-dashboard-token-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-dashboard-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-dashboard-metric {
    border-bottom: 1px solid var(--line);
  }

  .admin-dashboard-metric:nth-child(3n) {
    border-right: 0;
  }

  .admin-dashboard-metric:nth-last-child(-n + 3) {
    border-bottom: 0;
  }

  .admin-dashboard-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-dashboard-system-priority {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-dashboard-system-priority > header {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .admin-directory-layout.has-editor {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    overflow: visible;
  }

  .admin-directory-layout.has-editor > .admin-user-detail-panel,
  .admin-directory-layout.has-editor > .admin-team-detail-panel {
    position: absolute;
    inset: 0 0 0 auto;
    z-index: 4;
    width: min(430px, 100%);
    height: 100%;
    max-height: none;
    box-shadow: -8px 0 24px rgb(24 43 52 / 16%);
  }

  .admin-directory-section {
    min-height: auto;
  }

  .admin-directory-main {
    min-height: 360px;
  }

  .admin-detail-panel {
    max-height: none;
  }

  .admin-user-toolbar {
    grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(120px, auto)) repeat(2, minmax(140px, auto));
  }

  .admin-user-toolbar .admin-filter-count {
    grid-column: 1 / -1;
  }

  .admin-storage-form fieldset {
    grid-template-columns: repeat(3, minmax(140px, 1fr));
  }
}

@media (max-width: 700px) {
  .support-qr-grid {
    grid-template-columns: 1fr;
  }

  .support-overseas-grid {
    grid-template-columns: 1fr;
  }

  .detail-edit-fields,
  .detail-overview-strip,
  .detail-readonly-grid,
  .detail-info-card dl {
    grid-template-columns: 1fr;
  }

  .detail-tags-field {
    grid-column: auto;
  }

  .detail-overview-strip > div {
    border-bottom: 1px solid var(--line);
  }

  .detail-overview-strip > div:last-child {
    border-bottom: 0;
  }

  .detail-edit-section-head,
  .demo-log-card {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .detail-edit-section-head {
    flex-direction: column;
    gap: 2px;
  }

  .detail-edit-section-head span {
    text-align: left;
  }

  .user-admin-panel {
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 8px;
    padding: 10px;
  }

  .admin-panel-head {
    display: flex;
  }

  .admin-panel-head p {
    display: none;
  }

  .admin-tabs {
    column-gap: 13px;
  }

  .admin-tabs button {
    flex: 0 0 auto;
  }

  .admin-dashboard-toolbar {
    align-items: flex-start;
  }

  .admin-dashboard-live > span:last-child {
    display: none;
  }

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

  .admin-dashboard-token-metrics {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-dashboard-visit-metrics,
  .admin-dashboard-visit-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-dashboard-visit-metrics .admin-dashboard-metric {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .admin-dashboard-visit-metrics .admin-dashboard-metric:last-child {
    border-bottom: 0;
  }

  .admin-dashboard-token-metrics .admin-dashboard-metric {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .admin-dashboard-token-metrics .admin-dashboard-metric:last-child {
    border-bottom: 0;
  }

  .admin-dashboard-metric,
  .admin-dashboard-metric:nth-child(3n) {
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  .admin-dashboard-metric:nth-child(2n) {
    border-right: 0;
  }

  .admin-dashboard-metric:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .admin-dashboard-context-strip {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .admin-dashboard-context-strip span + span::before {
    display: none;
  }

  .admin-online-row {
    grid-template-columns: 10px minmax(0, 1fr) minmax(74px, auto);
  }

  .admin-online-view {
    grid-column: 2 / -1;
    grid-row: 2;
  }

  .admin-online-seen {
    grid-column: 3;
    grid-row: 1;
  }

  .admin-activity-row,
  .admin-dashboard-activity-log .admin-activity-row {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .admin-activity-row > div:last-child {
    grid-column: 2;
  }

  .admin-dashboard-system dl {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-dashboard-system-priority dl > div {
    min-height: 45px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .admin-dashboard-system-priority dl > div:last-child {
    border-bottom: 0;
  }

  .admin-section-head {
    display: flex;
  }

  .admin-section-head p {
    display: none;
  }

  .admin-team-review-head {
    align-items: flex-start;
  }

  .admin-team-review-item {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .admin-team-review-context {
    grid-column: 2;
  }

  .admin-team-review-actions,
  .admin-team-review-item > button {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

  .admin-user-approval-item {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .admin-user-approval-profile,
  .admin-user-approval-date {
    grid-column: 1;
  }

  .admin-user-approval-actions {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-items: stretch;
    flex-direction: column;
  }

  .admin-section-actions {
    align-items: flex-end;
    flex-direction: column-reverse;
    gap: 4px;
  }

  .admin-directory-toolbar,
  .admin-user-toolbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .admin-directory-search,
  .admin-filter-count {
    grid-column: 1 / -1 !important;
  }

  .admin-filter-count {
    text-align: left;
  }

  .admin-directory-main {
    min-height: 320px;
  }

  .admin-directory-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-page-controls {
    width: 100%;
    justify-content: flex-end;
  }

  .admin-page-controls label span {
    display: none;
  }

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

  .admin-user-editor-modal,
  .admin-team-editor-modal {
    padding: 10px;
  }

  .admin-user-editor-modal > .admin-user-detail-panel {
    width: calc(100vw - 20px);
    height: calc(100vh - 20px);
    max-height: calc(100vh - 20px);
  }

  .admin-team-editor-modal > .admin-team-detail-panel {
    width: calc(100vw - 20px);
    height: calc(100vh - 20px);
    max-height: calc(100vh - 20px);
  }

  .admin-storage-override-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-team-member-toolbar {
    grid-template-columns: 1fr 1fr;
  }

  .admin-team-member-toolbar input {
    grid-column: 1 / -1;
  }

  .admin-team-member-columns,
  .admin-team-member-option {
    grid-template-columns: minmax(0, 1fr) 54px 54px;
  }

  .admin-team-role-toggle span {
    display: none;
  }

  .admin-storage-summary,
  .admin-storage-breakdown-grid,
  .admin-storage-grid,
  .admin-email-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-statistics-chart-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-dashboard-overview-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-feature-usage-summary .admin-feature-usage-bars {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-feature-usage-overview {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-feature-usage-chart {
    grid-template-columns: 112px minmax(0, 1fr);
  }

  .admin-feature-usage-donut {
    width: 112px;
  }

  .admin-feature-usage-row {
    grid-template-columns: minmax(105px, 1fr) minmax(70px, 1fr) 42px;
    gap: 7px;
  }

  .admin-dashboard-detail-layer {
    padding: 8px;
  }

  .admin-dashboard-detail-dialog {
    width: 100%;
    max-height: calc(100vh - 16px);
    padding: 12px;
    border-radius: 7px;
  }

  .admin-dashboard-detail-dialog > header {
    top: -12px;
    margin: -12px -12px 0;
    padding: 12px;
  }

  .log-duplicate-notice li {
    align-items: flex-start;
    flex-direction: column;
  }

  .log-duplicate-match-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .admin-dashboard-statistics > header,
  .admin-statistics-detail-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-storage-maintenance {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-storage-form fieldset {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-email-form .admin-email-users,
  .admin-email-form label:has(textarea),
  .admin-email-form .admin-form-actions {
    grid-column: auto;
  }

  .admin-email-config {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-email-config small {
    grid-column: auto;
  }
}

.control-response-panel {
  display: grid;
  gap: 14px;
}

.control-response-panel[hidden] {
  display: none;
}

.control-response-head,
.control-response-chart-card > header,
.control-response-model-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.control-response-head h2,
.control-response-chart-card h3,
.control-response-model-card h3,
.control-response-advice h3 {
  margin: 0;
}

.control-response-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.control-response-head p,
.control-response-chart-card header p,
.control-response-advice > p,
.control-response-model-note {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.control-response-head .control-response-beta-notice {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  max-width: 880px;
  margin-top: 7px;
  color: #76531d;
  font-size: 11px;
  line-height: 1.4;
}

.control-response-head .control-response-beta-notice > span:first-child {
  flex: 0 0 auto;
  font-weight: 800;
}

.control-response-controls {
  display: grid;
  grid-template-columns: minmax(180px, 1.45fr) minmax(180px, 1.45fr) minmax(105px, 0.65fr) auto auto;
  align-items: end;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-muted);
}

.control-response-controls > label:not(.control-response-delay-toggle) {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
}

.control-response-controls select {
  min-width: 0;
  color: var(--text);
  font-size: 14px;
}

.control-response-delay-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 4px;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 650;
}

.control-response-range-controls {
  display: flex;
  grid-column: 1 / 5;
  grid-row: 2;
  align-items: end;
  gap: 10px;
  min-width: 0;
}

.control-response-range-controls > label:not(.control-response-range-toggle) {
  display: grid;
  gap: 5px;
  min-width: 130px;
  color: var(--muted);
  font-size: 12px;
}

.control-response-range-controls input[type="number"] {
  width: 130px;
}

.control-response-full-range-button {
  align-self: end;
  min-height: 36px;
  white-space: nowrap;
}

.control-response-range-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 4px;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 650;
}

.control-response-range-controls small {
  align-self: center;
  color: var(--muted);
  font-size: 11px;
}

.control-response-status {
  min-height: 20px;
  color: var(--muted);
  font-size: 13px;
}

.control-response-run-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  flex: 0 0 auto;
  grid-column: 5;
  grid-row: 2;
}

.control-response-run-actions button {
  white-space: nowrap;
}

.control-response-comparison-summary {
  display: flex;
  grid-column: 1 / -1;
  grid-row: 3;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
}

.control-response-comparison-summary > div:first-child {
  display: grid;
  gap: 2px;
  min-width: 180px;
}

.control-response-comparison-summary strong {
  font-size: 12px;
}

.control-response-comparison-summary small {
  color: var(--muted);
  font-size: 11px;
}

.control-response-comparison-chips,
.control-response-comparison-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.control-response-comparison-chips span,
.control-response-comparison-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 11px;
}

.control-response-comparison-chips i,
.control-response-comparison-legend i {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--comparison-color);
}

.control-response-comparison-chips span.is-focus {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.control-response-comparison-chips span.is-unavailable {
  opacity: 0.48;
}

.control-response-comparison-chips b {
  color: var(--accent-strong);
  font-size: 9px;
}

.control-response-run-actions .primary-button,
.trim-analysis-run-actions .primary-button {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 3px 10px rgb(23 107 135 / 18%);
}

.control-response-run-actions .primary-button:hover:not(:disabled),
.control-response-run-actions .primary-button:focus-visible,
.trim-analysis-run-actions .primary-button:hover:not(:disabled),
.trim-analysis-run-actions .primary-button:focus-visible {
  border-color: var(--accent-strong);
  background: var(--accent-strong);
  color: #fff;
}

.control-response-run-actions .primary-button:disabled,
.trim-analysis-run-actions .primary-button:disabled {
  border-color: var(--line-strong);
  background: var(--surface-2);
  color: var(--muted);
  box-shadow: none;
}

.control-response-toolbar {
  display: grid;
  grid-template-columns: minmax(230px, 1.5fr) minmax(220px, 1.1fr) minmax(155px, 0.7fr) auto auto;
  align-items: end;
  gap: 10px;
  padding: 12px;
}

.control-response-toolbar .analysis-preset-control {
  min-width: 0;
}

#controlResponseChannelSelect {
  width: 100%;
  min-width: 0;
  border: 2px solid var(--accent);
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 700;
}

.control-response-toolbar-field {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.control-response-toolbar-field > span,
.control-response-toolbar-label {
  min-height: 15px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
}

.control-response-toolbar-field :is(select, button),
.control-response-settings-menu > summary,
.control-response-run-actions .primary-button {
  min-height: 38px;
}

.control-response-range-inline {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
}

.control-response-range-inline .control-response-full-range-button {
  flex: 0 0 auto;
}

.control-response-range-inline .control-response-range-availability {
  min-width: 0;
  overflow: hidden;
  padding-left: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.control-response-toolbar .control-response-order-control {
  display: grid;
  gap: 5px;
}

.control-response-toolbar .control-response-order-control select {
  width: 100%;
}

.control-response-settings-control {
  display: flex;
  align-items: flex-end;
  min-height: 38px;
}

.control-response-settings-control .control-response-settings-menu {
  margin-left: 0;
}

.control-response-toolbar .control-response-run-actions {
  align-self: end;
  grid-column: auto;
  grid-row: auto;
  min-height: 38px;
}

.control-response-toolbar .control-response-run-actions .primary-button {
  padding-right: 16px;
  padding-left: 16px;
}

@media (max-width: 1080px) {
  .control-response-toolbar {
    grid-template-columns: minmax(220px, 1.35fr) minmax(210px, 1fr) minmax(150px, 0.7fr) auto;
  }

  .control-response-toolbar .control-response-run-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

.control-response-options {
  align-self: center;
}

.control-response-visible-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  flex: 1 1 520px;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-2);
}

.control-response-order-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.control-response-order-control > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.control-response-order-control select {
  width: 145px;
}

.control-response-settings-panel > label.control-response-delay-toggle,
.control-response-settings-panel > label.control-response-range-toggle {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  width: auto;
  min-height: 34px;
  gap: 7px;
  padding: 0 4px;
  white-space: nowrap;
}

.control-response-settings-panel > label.control-response-delay-toggle input,
.control-response-settings-panel > label.control-response-range-toggle input {
  flex: 0 0 auto;
  margin: 0;
}

.control-response-settings-panel > label.control-response-delay-toggle span,
.control-response-settings-panel > label.control-response-range-toggle span {
  display: inline;
}

.control-response-settings-menu {
  flex: 0 0 auto;
  margin-left: auto;
}

.control-response-settings-menu > summary {
  min-height: 34px;
  padding: 5px 10px;
  background: var(--surface);
  font-weight: 700;
}

.control-response-settings-panel {
  right: 0;
  z-index: 45;
  grid-template-columns: minmax(0, 1fr);
  width: max-content;
  min-width: 280px;
}

.control-response-settings-panel > label {
  width: 100%;
  margin: 0;
  padding: 5px 7px;
  border-radius: 6px;
}

.control-response-settings-panel > label:hover {
  background: var(--surface-2);
}

.control-response-visible-options > small {
  align-self: center;
  color: var(--muted);
  font-size: 11px;
}

.control-response-range-availability {
  padding-left: 8px;
  border-left: 1px solid var(--line);
  white-space: nowrap;
}

.control-response-summary-strip {
  margin-top: 2px;
  grid-template-columns: repeat(var(--sortie-count, 1), minmax(0, 1fr));
}

.control-response-summary-strip[hidden] {
  display: none;
}

.control-response-row-section {
  min-width: 0;
}

.control-response-summary-section {
  margin-top: 2px;
}

.control-response-row-header {
  min-height: 38px;
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}

.control-response-row-header > button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
  padding: 5px 4px;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.control-response-summary-section .control-response-row-header > button {
  width: 100%;
}

.control-response-row-header > button:hover,
.control-response-row-header > button:focus-visible {
  color: var(--accent-strong);
  background: var(--accent-soft);
}

.control-response-row-header > button > span:last-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.control-response-row-header .control-response-row-title,
.control-response-row-header small {
  margin: 0;
}

.control-response-row-title {
  color: var(--text);
  font-size: 16px;
}

.control-response-row-toggle-icon {
  width: 14px;
  color: var(--accent-strong);
  font-size: 11px;
  text-align: center;
}

.control-response-row-section.is-collapsed {
  padding-bottom: 2px;
}

.control-response-summary-section.is-collapsed {
  border-bottom: 1px solid var(--line);
}

.control-response-summary-card.is-unavailable {
  opacity: 0.55;
}

.control-response-unavailable-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 7px;
  border: 1px solid #efc4c4;
  border-radius: 999px;
  background: #fff3f3;
  color: #a63737;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.control-response-unavailable-card {
  display: flex;
  min-height: 280px;
  flex-direction: column;
  border-style: dashed;
  background: var(--surface-2);
}

.control-response-unavailable-card > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.control-response-unavailable-body {
  display: grid;
  place-content: center;
  flex: 1;
  gap: 7px;
  padding: 24px;
  color: var(--muted);
  text-align: center;
}

.control-response-unavailable-body strong {
  color: var(--text);
  font-size: 14px;
}

.control-response-unavailable-body p {
  max-width: 32ch;
  margin: 0 auto;
  font-size: 12px;
  line-height: 1.5;
}

.control-response-summary-card .gain-row {
  margin-top: 8px;
}

.control-response-gains-pending.is-error {
  color: var(--danger);
}

.control-response-gains-pending {
  color: var(--muted);
  font-size: 10px;
}

.control-response-status.is-error {
  color: #a12a2a;
}

.control-response-status {
  min-height: 0;
  padding: 7px 10px;
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
}

.control-response-status:empty {
  display: none;
}

.control-response-status.is-error {
  border-left-color: var(--danger);
  background: #fff2f1;
}

.control-response-result {
  display: grid;
  gap: 12px;
}

.control-response-comparison-section {
  display: grid;
  gap: 10px;
}

.control-response-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.control-response-section-head h3,
.control-response-data-chart-card h4 {
  margin: 0;
}

.control-response-section-head p,
.control-response-data-chart-card header p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.control-response-section-head small {
  color: var(--muted);
  font-size: 11px;
}

.control-response-comparison-grid {
  display: grid;
  grid-template-columns: repeat(var(--comparison-count, 3), minmax(0, 1fr));
  gap: 12px;
}

.control-response-step-comparison-section,
.control-response-system-id-section {
  display: grid;
  gap: 10px;
}

.control-response-step-comparison-grid,
.control-response-system-id-grid {
  display: grid;
  grid-template-columns: repeat(var(--comparison-count, 3), minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.control-response-step-comparison-card,
.control-response-system-id-card {
  min-width: 0;
}

.control-response-result-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.control-response-result-card-head > div {
  min-width: 0;
}

.control-response-result-card-head .control-response-confidence {
  flex: 0 0 auto;
  white-space: nowrap;
}

.control-response-step-comparison-card h4,
.control-response-system-id-card h4 {
  overflow: hidden;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.control-response-step-comparison-canvas {
  display: block;
  width: 100%;
  height: 280px;
  margin-top: 10px;
}

.control-response-step-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
}

.control-response-step-metric-grid article {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 7px;
}

.control-response-step-metric-grid strong {
  font-size: 14px;
}

.control-response-system-id-card .control-response-metrics.is-compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 10px 0 12px;
}

.control-response-metrics article.has-metric-help {
  cursor: help;
}

.control-response-metrics article.has-metric-help:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.control-response-metrics article.has-metric-help > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

.control-response-metrics article.has-metric-help i {
  color: var(--muted);
  font-size: 9px;
  font-style: normal;
}

.control-response-system-id-card .transfer-equation {
  min-height: 88px;
  font-size: 15px;
}

.control-response-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
  margin: 8px 0 10px;
}

.control-response-card-actions .secondary-button {
  min-height: 30px;
  padding: 4px 9px;
  white-space: nowrap;
  font-size: 11px;
}

.control-response-card-actions .control-response-tune-button.primary-button,
.control-response-card-actions .control-response-precision-button.primary-button {
  min-height: 32px;
  padding: 5px 11px;
  border-color: #2563eb;
  background: #2563eb;
  color: #fff;
  white-space: nowrap;
  font-size: 11px;
  box-shadow: 0 2px 7px rgb(37 99 235 / 24%);
}

.control-response-card-actions .control-response-tune-button.primary-button:hover,
.control-response-card-actions .control-response-precision-button.primary-button:hover {
  border-color: #1d4ed8;
  background: #1d4ed8;
}

.control-response-precision-summary {
  display: grid;
  gap: 7px;
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #eff6ff;
}

.control-response-precision-summary > span {
  color: var(--muted);
  font-size: 11px;
}

.control-response-precision-summary dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
  margin: 0;
}

.control-response-precision-summary dl > div {
  display: flex;
  justify-content: space-between;
  gap: 7px;
  font-size: 11px;
}

.control-response-precision-summary dt { color: var(--muted); }
.control-response-precision-summary dd { margin: 0; font-weight: 700; }

.control-response-precision-error {
  margin: 0 0 8px;
  color: var(--danger);
  font-size: 11px;
}

.control-response-system-id-card > h3 {
  margin: 2px 0 7px;
  font-size: 14px;
}

.control-response-tuning-dialog {
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  width: min(820px, calc(100vw - 36px));
  height: min(920px, calc(100vh - 36px));
  height: min(920px, calc(100dvh - 36px));
  max-height: calc(100vh - 36px);
  max-height: calc(100dvh - 36px);
  padding: 12px;
  overflow: hidden;
}

.control-response-tuning-dialog.is-cascade {
  width: min(1480px, calc(100vw - 36px));
}

.control-response-tuning-dialog-body {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 8px;
  min-height: 0;
  overflow: hidden;
  padding: 0;
}

.control-response-tuning-axis {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 12px;
  padding: 7px 12px;
  border: 1px solid rgba(37, 99, 235, 0.20);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.10), rgba(19, 124, 139, 0.06));
}

.control-response-tuning-axis > strong {
  color: var(--accent-strong);
  font-size: clamp(16px, 1.6vw, 21px);
  line-height: 1.2;
}

.control-response-tuning-axis > small {
  max-width: 360px;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.control-response-tuning-axis-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

.control-response-tuning-axis-actions > small {
  max-width: 220px;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.control-response-cascade-expander {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 5px 9px;
  border-color: rgba(37, 99, 235, 0.35);
  background: var(--surface);
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.control-response-cascade-expander.is-active {
  border-color: var(--accent);
  background: rgba(37, 99, 235, 0.10);
}

.control-response-cascade-switch {
  position: relative;
  width: 26px;
  height: 15px;
  border-radius: 999px;
  background: #cbd5e1;
}

.control-response-cascade-switch i {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.28);
}

.control-response-cascade-expander.is-active .control-response-cascade-switch {
  background: var(--accent);
}

.control-response-cascade-expander.is-active .control-response-cascade-switch i {
  left: 13px;
}

.control-response-data-chart-card {
  min-width: 0;
}

.control-response-data-chart-card h4 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}

.control-response-comparison-canvas {
  height: 280px;
}

.control-response-result-tabs {
  display: flex;
  gap: 4px;
  margin-top: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-2);
}

.control-response-result-tabs button {
  flex: 1 1 0;
  min-height: 38px;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
}

.control-response-result-tabs button.is-active {
  border-color: var(--accent);
  background: var(--surface);
  color: var(--accent-strong);
  box-shadow: 0 2px 7px rgb(15 23 30 / 8%);
}

[data-control-response-result-panel] {
  display: grid;
  gap: 12px;
}

[data-control-response-result-panel][hidden] {
  display: none;
}

.control-response-summary-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr);
  gap: 12px;
}

.control-response-analysis-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 0.95fr);
  gap: 12px;
  align-items: stretch;
}

.control-response-analysis-row > section {
  min-width: 0;
}

.control-response-id-card .control-response-step-canvas,
.control-response-analysis-row .control-response-detail-canvas {
  height: 300px;
}

.control-response-model-summary-card .control-response-metrics.is-compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 12px;
}

.control-response-model-summary-card .control-response-metrics article {
  padding: 7px;
}

.control-response-model-summary-card .control-response-metrics strong {
  font-size: 14px;
}

.control-response-model-summary-card .transfer-equation {
  min-height: 90px;
  font-size: 15px;
}

.control-response-model-summary-card .control-response-model-meta {
  gap: 6px;
}

.control-response-model-summary-card .control-response-model-meta > div {
  padding: 6px;
}

.control-response-tuning-body {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(420px, 0.7fr);
  gap: 12px;
  align-items: start;
}

.control-response-tuning-body.is-cascade {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.control-response-tuning-dialog-body:not(.is-cascade) .control-response-tuning-body {
  grid-template-columns: minmax(0, 1fr);
}

.control-response-response-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
}

.control-response-response-grid.is-cascade {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.control-response-cascade-angle-chart,
.control-response-cascade-angle-rate-chart,
.control-response-cascade-rate-chart {
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
}

.control-response-cascade-linked-column,
.control-response-cascade-side-column {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.control-response-cascade-linked-column.is-angle-only {
  gap: 0;
}

.control-response-linked-plot-stack {
  display: grid;
  gap: 0;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.55);
  border-radius: 9px;
  background: var(--surface);
}

.control-response-linked-plot-stack > .control-response-cascade-angle-chart,
.control-response-linked-plot-stack > .control-response-cascade-angle-rate-chart {
  border: 0;
  border-radius: 0;
}

.control-response-linked-plot-stack > .control-response-cascade-angle-rate-chart {
  border-top: 1px solid rgba(148, 163, 184, 0.45);
}

.control-response-cascade-linked-column > .control-response-tuning-performance,
.control-response-cascade-side-column > .control-response-tuning-performance {
  margin-top: 0;
}

.control-response-tuning-controls-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 0.34fr);
  align-items: start;
  gap: 8px;
  min-width: 0;
}

.control-response-tuning-dialog .control-response-tuning-controls-row .control-response-tuning-performance {
  display: block;
  margin-top: 0;
}

.control-response-tuning-dialog .control-response-tuning-controls-row .control-response-tuning-performance-head,
.control-response-tuning-dialog .control-response-tuning-controls-row .control-response-tuning-performance > div:not(.control-response-tuning-performance-head) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 5px;
  padding: 5px 7px;
  border-left: 0;
  text-align: right;
}

.control-response-tuning-dialog .control-response-tuning-controls-row .control-response-tuning-performance > div > span:first-child {
  grid-column: auto;
  text-align: left;
  white-space: normal;
}

.control-response-cascade-linked-column .control-response-controller-panel,
.control-response-cascade-side-column .control-response-controller-panel {
  width: 100%;
}

.control-response-cascade-side-column .control-response-controller-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.control-response-tuning-chart {
  min-width: 0;
}

.control-response-tuning-performance {
  margin-top: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
}

.control-response-tuning-performance-head,
.control-response-tuning-performance > div:not(.control-response-tuning-performance-head) {
  display: grid;
  grid-template-columns: minmax(105px, 1.2fr) minmax(82px, 0.8fr) auto minmax(82px, 0.8fr);
  gap: 8px;
  align-items: center;
  padding: 6px 9px;
}

.control-response-tuning-performance-head {
  background: var(--surface-2);
  font-size: 10px;
}

.control-response-tuning-performance-head strong {
  color: var(--text);
  font-size: 11px;
}

.control-response-tuning-performance-head .is-current { color: #b45309; }
.control-response-tuning-performance-head .is-changed { color: #6d28d9; }

.control-response-performance-arrow {
  color: var(--muted);
  font-weight: 800;
  text-align: center;
}

.control-response-tuning-performance > div:not(.control-response-tuning-performance-head) {
  border-top: 1px solid var(--line);
  font-size: 11px;
}

.control-response-tuning-performance > div > span:first-child {
  color: var(--muted);
}

.control-response-tuning-performance b {
  color: #b45309;
  font-size: 11px;
}

.control-response-tuning-performance b.is-changed {
  color: #6d28d9;
}

.control-response-tuning-card .control-response-tuning-parameter-comparison {
  margin-top: 0;
}

.control-response-tuning-dialog .control-response-tuning-card {
  min-height: 0;
  padding: 8px;
  border: 0;
  background: transparent;
  overflow: hidden;
}

.control-response-tuning-dialog .control-response-tuning-parameter-comparison > section {
  padding: 1px 0 0;
  border: 0;
  background: transparent;
}

.control-response-tuning-dialog .control-response-controller-panel {
  padding: 0;
  border: 0;
  background: transparent;
}

.control-response-tuning-dialog .control-response-step-canvas,
.control-response-tuning-dialog .control-response-cascade-angle-rate-canvas,
.control-response-tuning-dialog .control-response-cascade-rate-canvas {
  height: clamp(175px, 21vh, 210px);
  margin-top: 4px;
}

.control-response-tuning-dialog .legend-color-input,
.control-response-tuning-dialog .legend-color-reset {
  display: none;
}

.control-response-tuning-dialog .control-response-legend {
  align-items: center;
  justify-content: flex-start;
  gap: 2px 9px;
  min-height: 24px;
  font-size: 10px;
}

.control-response-tuning-dialog .legend-series-entry {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  width: auto;
}

.control-response-tuning-dialog .legend-item {
  flex: 0 0 auto;
  width: auto;
  min-height: 24px;
  padding: 2px 0;
  border-color: transparent;
  background: transparent;
  white-space: nowrap;
}

.control-response-tuning-dialog .control-response-tuning-performance {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 5px;
}

.control-response-tuning-dialog .control-response-tuning-performance-head {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  padding: 3px 6px;
}

.control-response-tuning-dialog .control-response-tuning-performance > div:not(.control-response-tuning-performance-head) {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 2px;
  padding: 3px 5px;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  text-align: center;
}

.control-response-tuning-dialog .control-response-tuning-performance > div:nth-child(2) {
  border-left: 0;
}

.control-response-tuning-dialog .control-response-tuning-performance > div > span:first-child {
  grid-column: 1 / -1;
  overflow: hidden;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.control-response-tuning-dialog .control-response-tuning-performance b {
  font-size: 10px;
}

.control-response-tuning-dialog .control-response-performance-delta {
  display: block;
  margin-top: 1px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
}

.control-response-tuning-dialog .control-response-tuning-controls-row .control-response-tuner-subtitle,
.control-response-tuning-dialog .control-response-tuning-controls-row .control-response-tuning-performance-head {
  box-sizing: border-box;
  min-height: 32px;
  align-items: center;
}

.control-response-tuning-dialog .control-response-tuning-controls-row .control-response-tuner-subtitle {
  display: flex;
  margin: 0;
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--surface-2);
  font-size: 11px;
  line-height: 1.25;
}

.control-response-chart-card,
.control-response-step-card,
.control-response-model-card,
.control-response-advice {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  box-shadow: 0 3px 12px rgba(15, 23, 30, 0.035);
}

.control-response-step-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  box-shadow: 0 3px 12px rgba(15, 23, 30, 0.035);
}

.control-response-step-card > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 8px;
}

.control-response-step-card h3 {
  margin: 0;
}

.control-response-step-card header p,
.control-response-step-summary {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.control-response-step-card header .control-response-applied-range {
  color: var(--accent-strong);
  font-weight: 700;
}

.control-response-chart-card header p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.control-response-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px 8px;
  color: var(--muted);
  font-size: 11px;
}

.control-response-legend .legend-item {
  cursor: pointer;
}

.control-response-comparison-legend {
  max-width: 65%;
}

.control-response-comparison-legend small {
  width: 100%;
  color: var(--muted);
  text-align: right;
}

.control-response-canvas {
  display: block;
  width: 100%;
  height: 340px;
  margin-top: 12px;
  background: #ffffff;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.control-response-overview-canvas {
  height: 170px;
}

.control-response-detail-canvas {
  display: block;
  width: 100%;
  height: 300px;
  margin-top: 12px;
  background: #ffffff;
}

.control-response-detail-canvas,
.control-response-step-canvas,
.control-response-cascade-angle-rate-canvas,
.control-response-cascade-rate-canvas {
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.control-response-step-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.control-response-step-pane {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-2);
}

.control-response-step-pane.is-tuned {
  border-color: rgba(124, 58, 237, 0.25);
  background: rgba(124, 58, 237, 0.025);
}

.control-response-step-pane h4 {
  margin: 0 0 7px;
  font-size: 13px;
}

.control-response-step-pane .control-response-legend {
  min-height: 28px;
  justify-content: flex-start;
  gap: 7px;
}

.control-response-parameter-title {
  display: block;
  margin: 9px 0 6px;
  font-size: 12px;
}

.control-response-tuning-parameter-comparison {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.control-response-tuning-parameter-comparison > section {
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
}

.control-response-tuning-parameter-comparison > section > strong,
.control-response-tuning-parameter-comparison > section > small {
  display: block;
}

.control-response-tuning-parameter-comparison > section > strong {
  margin-bottom: 3px;
  font-size: 12px;
}

.control-response-tuning-parameter-comparison > section > small {
  min-height: 17px;
  margin-bottom: 6px;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.control-response-tuning-parameter-comparison .control-response-tuner {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.control-response-tuning-parameter-comparison .control-response-tuner-head > div {
  display: none;
}

.control-response-tuning-parameter-comparison .control-response-tuner-head {
  justify-content: flex-end;
}

.control-response-tuning-editor > strong {
  margin-bottom: 8px;
}

.control-response-tuning-editor {
  position: relative;
}

.control-response-tuning-editor .control-response-tuner-head {
  position: absolute;
  top: 7px;
  right: 9px;
}

.control-response-tuning-editor .control-response-tuner-head select,
.control-response-tuning-editor .control-response-tuner-head code {
  width: auto;
  max-width: 160px;
}

.control-response-tuning-parameter-comparison .control-response-tuner-actions {
  align-items: stretch;
  flex-direction: column;
}

.control-response-tuning-dialog .control-response-controller-panel .control-response-tuner-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 5px;
}

.control-response-tuning-dialog .control-response-controller-panel .control-response-tuner-actions > span {
  display: block;
  width: 100%;
  text-align: left;
}

.control-response-tuning-parameter-comparison .control-response-tuner-actions span {
  text-align: left;
}

.control-response-tuning-parameter-comparison .control-response-tuner-head select,
.control-response-tuning-parameter-comparison .control-response-tuner-head code {
  width: 100%;
  max-width: none;
}

.control-response-tuning-parameter-comparison .control-response-tuning-editor .control-response-tuner-head select,
.control-response-tuning-parameter-comparison .control-response-tuning-editor .control-response-tuner-head code {
  width: auto;
  max-width: 160px;
}

.control-response-detail-canvas.is-dragging,
.control-response-step-canvas.is-dragging,
.control-response-cascade-angle-rate-canvas.is-dragging,
.control-response-cascade-rate-canvas.is-dragging {
  cursor: grabbing;
}

.control-response-canvas.is-dragging {
  cursor: grabbing;
}

.control-response-chart-help {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  text-align: right;
}

.control-response-current-params {
  display: grid;
  gap: 7px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.control-response-current-params > strong {
  font-size: 12px;
}

.control-response-current-params > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.control-response-current-params span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
}

.control-response-current-params code {
  color: var(--muted);
  font-size: 11px;
}

.control-response-current-params b {
  color: var(--text);
  font-size: 12px;
}

.control-response-current-params small {
  color: var(--muted);
  font-size: 11px;
}

.control-response-tuner {
  display: grid;
  gap: 7px;
  margin-top: 8px;
  padding: 9px;
  border: 1px solid rgba(124, 58, 237, 0.24);
  border-radius: 8px;
  background: rgba(124, 58, 237, 0.045);
}

.control-response-tuner-head,
.control-response-tuner-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.control-response-tuner-head > div {
  display: grid;
  gap: 3px;
}

.control-response-tuner-head strong { font-size: 13px; }

.control-response-tuner-head small,
.control-response-tuner > p {
  color: var(--muted);
  font-size: 11px;
}

.control-response-tuner-head select,
.control-response-tuner-head code { max-width: 180px; }

.control-response-cascade-toggle {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px;
  border: 1px solid rgba(124, 58, 237, 0.22);
  border-radius: 7px;
  background: rgba(124, 58, 237, 0.04);
  color: var(--text);
  cursor: pointer;
}

.control-response-cascade-toggle.is-unavailable {
  opacity: 0.66;
  cursor: not-allowed;
}

.control-response-cascade-toggle input {
  margin-top: 2px;
}

.control-response-cascade-toggle > span {
  display: grid;
  gap: 2px;
}

.control-response-cascade-toggle strong {
  font-size: 12px;
}

.control-response-cascade-toggle small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}

.control-response-tuner-subtitle {
  display: block;
  margin-top: 2px;
  color: var(--text);
  font-size: 11px;
}

.control-response-controller-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: 8px;
}

.control-response-controller-panel {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
}

.control-response-controller-panel.is-attitude {
  border-color: rgba(37, 99, 235, 0.28);
}

.control-response-controller-panel.is-rate {
  border-color: rgba(124, 58, 237, 0.28);
}

.control-response-cascade-model-note {
  margin: -2px 0 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}

.control-response-cascade-model-note.is-warning {
  color: #a12a2a;
  font-weight: 700;
}

.control-response-tuner-inputs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.control-response-tuner-columns,
.control-response-tuner-inputs label {
  display: grid;
  grid-template-columns: minmax(105px, 1.4fr) 60px minmax(74px, 1fr) 58px;
  align-items: center;
  gap: 8px;
}

.control-response-tuning-dialog .control-response-tuner-inputs label {
  padding: 4px 6px;
}

.control-response-tuning-dialog .control-response-tuner-columns {
  padding: 3px 6px;
}

.control-response-tuning-dialog .control-response-cascade-toggle {
  padding: 6px 8px;
}

.control-response-tuning-dialog .control-response-tuning-parameter-comparison > section {
  padding: 1px 0 0;
}

.control-response-tuning-dialog .control-response-tuning-editor > strong {
  margin-bottom: 4px;
}

.control-response-tuning-dialog .control-response-tuner-head {
  min-height: 26px;
}

.control-response-tuner-columns {
  padding: 5px 8px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  text-align: center;
}

.control-response-tuner-columns > span:first-child {
  text-align: left;
}

.control-response-tuner-inputs label {
  min-width: 0;
  padding: 6px 8px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
}

.control-response-tuner-inputs label:first-child {
  border-top: 0;
}

.control-response-tuner-inputs label.is-out-of-range {
  background: #fff7ed;
  box-shadow: inset 3px 0 0 #ea580c;
}

.control-response-tuner-parameter {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.control-response-tuner-parameter code {
  overflow-wrap: anywhere;
  color: #5b21b6;
  font-size: 11px;
  font-weight: 800;
}

.control-response-tuner-parameter small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 500;
  line-height: 1.25;
}

.control-response-tuner-logged {
  color: var(--text);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.control-response-tuner-value {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.control-response-tuner-value input {
  width: 100%;
  min-width: 0;
}

.control-response-tuner-value input[aria-invalid="true"] {
  border-color: #ea580c;
  background: #fffaf5;
  box-shadow: 0 0 0 1px rgba(234, 88, 12, 0.12);
}

.control-response-tuner-value small {
  color: #6d28d9;
  font-size: 9px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.control-response-tuner-value .control-response-tuner-range-warning {
  color: #b33a0b;
  font-weight: 800;
  line-height: 1.25;
}

.control-response-tuning-change {
  justify-self: end;
  min-width: 52px;
  padding: 3px 6px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.control-response-tuning-change.is-increase {
  background: #ede9fe;
  color: #6d28d9;
}

.control-response-tuning-change.is-decrease {
  background: #e8f3ef;
  color: #167052;
}

.control-response-tuning-change.is-new {
  background: #fff0ce;
  color: #815511;
}

.control-response-tuner-actions span {
  color: var(--muted);
  font-size: 11px;
  text-align: right;
}

.control-response-controller-panel .control-response-tuner-actions {
  align-items: center;
  margin-top: 1px;
}

.control-response-controller-panel .control-response-tuner-actions span {
  min-width: 0;
  text-align: right;
}

.control-response-tuner-actions span.is-ready { color: #5b21b6; }

.control-response-tuner-actions span.is-warning {
  color: #a12a2a;
  font-weight: 700;
}

.control-response-tuner-action-buttons {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.control-response-tuner-action-buttons button {
  min-height: 34px;
}

.control-response-tuning-dialog .control-response-tuner-action-buttons button {
  min-height: 29px;
  padding: 5px 8px;
  font-size: 10px;
}

.control-response-tuning-dialog [data-control-tuning-auto="attitude"].is-angle-recommended {
  border-color: #0f7088;
  background: #0f7088;
  color: #fff;
  box-shadow: 0 2px 6px rgba(15, 112, 136, 0.22);
  font-weight: 800;
}

.control-response-tuning-dialog [data-control-tuning-auto="attitude"].is-angle-recommended:hover:not(:disabled) {
  border-color: #0b5d72;
  background: #0b5d72;
}

.control-response-tuning-dialog [data-control-tuning-auto="rate"]:not(:disabled) {
  border-color: #6d28d9;
  background: #6d28d9;
  color: #fff;
  box-shadow: 0 2px 6px rgba(109, 40, 217, 0.18);
  font-weight: 800;
}

.control-response-tuning-dialog [data-control-tuning-auto="rate"]:hover:not(:disabled) {
  border-color: #5b21b6;
  background: #5b21b6;
}

.control-response-tuner > p {
  margin: 0;
  line-height: 1.45;
}

.control-response-tuner-notes {
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 10px;
}

.control-response-tuner-notes > summary {
  padding-top: 7px;
  cursor: pointer;
  font-weight: 700;
}

.control-response-tuner-notes p {
  margin: 6px 0 0;
  line-height: 1.4;
}

.control-response-tuner-notes ol {
  display: grid;
  gap: 5px;
  margin: 6px 0 0;
  padding-left: 18px;
  line-height: 1.45;
}

.control-response-cascade-rate-chart {
  display: grid;
  gap: 7px;
}

.control-response-cascade-rate-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.control-response-cascade-rate-head strong {
  font-size: 12px;
}

.control-response-cascade-rate-head small {
  color: var(--muted);
  font-size: 10px;
}

.control-response-chart-reset {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 26px;
  padding: 2px 6px;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.control-response-chart-reset:hover:not(:disabled) {
  border-color: var(--line);
  background: var(--surface-2);
  color: var(--accent-strong);
}

.control-response-cascade-rate-canvas,
.control-response-cascade-angle-rate-canvas {
  display: block;
  width: 100%;
  height: 280px;
  background: #fff;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.control-response-cascade-rate-canvas.is-dragging,
.control-response-cascade-angle-rate-canvas.is-dragging {
  cursor: grabbing;
}

.control-response-tuning-dialog canvas:focus-visible {
  outline: 2px solid rgba(15, 112, 136, 0.72);
  outline-offset: 2px;
}

@media (max-width: 1250px) and (min-width: 681px) {
  .control-response-tuning-dialog.is-cascade .control-response-tuning-controls-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

.control-response-advice-collapsible > summary {
  cursor: pointer;
  font-size: 15px;
  font-weight: 800;
}

.control-response-advice-collapsible > div {
  margin-top: 10px;
}

.control-response-step-canvas {
  display: block;
  width: 100%;
  height: 320px;
  margin-top: 8px;
}

.control-response-confidence {
  padding: 4px 8px;
  border-radius: 99px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.control-response-confidence.is-high {
  background: #dff2e7;
  color: #23663c;
}

.control-response-confidence.is-medium {
  background: #fff0ce;
  color: #815511;
}

.control-response-confidence.is-low {
  background: #f7dfdf;
  color: #8b3030;
}

.control-response-confidence.is-not_recommended {
  background: #7f1d1d;
  color: #fff;
}

.control-response-credibility {
  display: grid;
  gap: 7px;
  margin-bottom: 10px;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-left: 4px solid #64748b;
  border-radius: 8px;
  background: var(--surface-2);
}

.control-response-credibility.is-high {
  border-left-color: #2f855a;
}

.control-response-credibility.is-medium {
  border-left-color: #b7791f;
}

.control-response-credibility.is-low,
.control-response-credibility.is-not_recommended {
  border-left-color: #b83232;
}

.control-response-credibility > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.control-response-credibility span,
.control-response-credibility p,
.control-response-credibility li {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.control-response-credibility strong {
  font-size: 12px;
}

.control-response-credibility ul,
.control-response-credibility p {
  margin: 0;
}

.control-response-credibility ul {
  display: grid;
  gap: 3px;
  padding-left: 17px;
}

.control-response-credibility .control-response-credibility-blocked {
  padding: 7px 8px;
  border-radius: 6px;
  background: #f7dfdf;
  color: #8b3030;
  font-weight: 700;
}

.transfer-equation {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
  min-height: 110px;
  margin: 12px 0;
  padding: 14px 8px;
  overflow-x: auto;
  border-radius: 7px;
  background: var(--surface-2);
  font-family: Cambria, "Times New Roman", serif;
  font-size: 17px;
}

.transfer-function-head,
.transfer-function-title,
.transfer-view-toggle {
  display: flex;
  align-items: center;
}

.transfer-function-head {
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}

.transfer-function-title {
  min-width: 0;
  flex-wrap: wrap;
  gap: 7px;
}

.transfer-view-toggle {
  flex: 0 0 auto;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-2);
}

.transfer-view-toggle button {
  min-height: 27px;
  padding: 3px 8px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.transfer-view-toggle button.is-active {
  background: var(--surface);
  color: var(--accent);
  font-weight: 700;
  box-shadow: 0 1px 3px rgb(15 23 42 / 12%);
}

.transfer-view-toggle button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.transfer-equation-zpk {
  min-height: 88px;
}

.transfer-conjugate-factor {
  cursor: help;
}

.transfer-function-head + .transfer-equation {
  margin-bottom: 0;
  border-radius: 7px 7px 0 0;
}

.transfer-dynamics-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 12px;
  padding: 9px 10px;
  border-top: 1px solid var(--border);
  border-radius: 0 0 7px 7px;
  background: var(--surface-2);
}

.transfer-dynamics-summary > div {
  min-width: 0;
}

.transfer-dynamics-summary dt {
  color: var(--muted);
  font-size: 11px;
}

.transfer-dynamics-summary dd {
  min-width: 0;
  margin: 3px 0 0;
  overflow-wrap: anywhere;
  font-weight: 700;
  font-size: 12px;
}

.transfer-dynamics-summary code {
  color: inherit;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 11px;
}

.transfer-dynamics-summary code.is-unstable {
  color: #a61e1e;
  font-weight: 700;
}

.transfer-delay {
  white-space: nowrap;
}

.transfer-fraction {
  display: inline-grid;
  min-width: 170px;
  text-align: center;
  white-space: nowrap;
}

.transfer-fraction > span {
  padding: 4px 8px;
}

.transfer-fraction > span:first-child {
  border-bottom: 1px solid currentColor;
}

@media (max-width: 620px) {
  .transfer-function-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .transfer-view-toggle {
    align-self: stretch;
  }

  .transfer-view-toggle button {
    flex: 1 1 0;
  }

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

.control-response-model-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.control-response-model-meta > div {
  min-width: 0;
  padding: 8px;
  border-radius: 6px;
  background: var(--surface-2);
}

.control-response-model-meta dt {
  color: var(--muted);
  font-size: 11px;
}

.control-response-model-meta dd {
  margin: 3px 0 0;
  overflow-wrap: anywhere;
  font-size: 13px;
  font-weight: 650;
}

.control-response-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.control-response-metrics article {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
}

.control-response-metrics span {
  color: var(--muted);
  font-size: 11px;
}

.control-response-metrics strong {
  overflow-wrap: anywhere;
  color: var(--accent-strong);
  font-size: 16px;
}

.control-response-advice ul {
  display: grid;
  gap: 7px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.control-response-advice li {
  display: grid;
  gap: 7px;
  padding: 9px 11px;
  border-left: 3px solid var(--line-strong);
  background: var(--surface-2);
}

.control-response-advice li.is-success { border-left-color: #3b8956; }
.control-response-advice li.is-action { border-left-color: var(--accent); }
.control-response-advice li.is-warning { border-left-color: var(--warn); }
.control-response-advice li.is-danger { border-left-color: #a12a2a; }
.control-response-advice li.is-info { border-left-color: var(--accent); }

.control-response-advice li p {
  margin: 0;
  font-size: 13px;
}

.control-response-suggestions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 8px;
  font-size: 0.82rem;
}

.control-response-suggestions strong {
  color: var(--text-secondary);
  font-size: 0.76rem;
}

.control-response-suggestions span {
  padding: 5px 8px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 7px;
  background: rgba(37, 99, 235, 0.06);
}

.control-response-suggestions small {
  color: var(--text-secondary);
}

.control-response-safety {
  margin: 0;
  padding: 10px 12px;
  border-left: 3px solid var(--warn);
  background: #fff8e8;
  color: #76531d;
  font-size: 12px;
}

@media (max-width: 980px) {
  .control-response-comparison-grid,
  .control-response-step-comparison-grid,
  .control-response-system-id-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .control-response-analysis-row,
  .control-response-summary-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .control-response-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .control-response-step-comparison {
    grid-template-columns: minmax(0, 1fr);
  }

  .control-response-tuning-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .control-response-tuning-body .control-response-tuning-parameter-comparison {
    order: 0;
  }

  .control-response-tuning-body .control-response-tuning-chart {
    order: 1;
  }

  .control-response-tuning-body.is-cascade .control-response-tuning-chart {
    order: 0;
  }

  .control-response-tuning-body.is-cascade .control-response-tuning-parameter-comparison {
    order: 1;
  }

  .control-response-step-pane.is-tuned {
    display: flex;
    flex-direction: column;
  }

  .control-response-step-pane.is-tuned h4 { order: 0; }
  .control-response-step-pane.is-tuned .control-response-tuning-parameter-comparison {
    order: 1;
    margin: 0 0 10px;
  }
  .control-response-step-pane.is-tuned .control-response-legend { order: 2; }
  .control-response-step-pane.is-tuned .control-response-step-canvas { order: 3; }
}

@media (max-width: 1100px) and (min-width: 681px) {
  .control-response-response-grid.is-cascade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .control-response-cascade-side-column .control-response-controller-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 680px) {
  .control-response-tuning-dialog,
  .control-response-tuning-dialog.is-cascade {
    width: calc(100vw - 20px);
    height: calc(100vh - 20px);
    height: calc(100dvh - 20px);
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
  }

  .control-response-head,
  .control-response-chart-card > header,
  .control-response-step-card > header,
  .control-response-system-id-card .control-response-model-head {
    align-items: stretch;
    flex-direction: column;
  }

  .control-response-step-comparison-card > .control-response-result-card-head,
  .control-response-system-id-card > .control-response-result-card-head {
    align-items: flex-start;
    flex-direction: row;
  }

  .control-response-system-id-card .control-response-card-actions {
    justify-content: flex-start;
  }

  .control-response-precision-summary dl {
    grid-template-columns: minmax(0, 1fr);
  }

  .control-response-controls,
  .control-response-model-meta,
  .control-response-metrics {
    grid-template-columns: minmax(0, 1fr);
  }

  .control-response-toolbar,
  .control-response-toolbar .analysis-preset-control,
  #controlResponseChannelSelect,
  .control-response-run-actions {
    width: 100%;
  }

  .control-response-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .control-response-range-inline {
    align-items: stretch;
    flex-direction: column;
  }

  .control-response-range-inline .control-response-range-availability {
    padding-left: 0;
    border-left: 0;
    white-space: normal;
  }

  .control-response-settings-control,
  .control-response-settings-menu,
  .control-response-settings-menu > summary {
    width: 100%;
  }

  .control-response-toolbar .control-response-run-actions {
    grid-column: 1;
  }

  .control-response-toolbar .control-response-run-actions .primary-button {
    flex: 1 1 auto;
  }

  .control-response-options {
    width: 100%;
  }

  .control-response-visible-options {
    min-width: 0;
  }

  .control-response-settings-menu {
    margin-left: 0;
  }

  .control-response-settings-panel {
    right: auto;
    left: 0;
    width: min(310px, calc(100vw - 42px));
    min-width: 0;
  }

  .control-response-visible-options > small {
    white-space: normal;
  }

  .control-response-order-control select {
    width: 132px;
  }

  .control-response-summary-strip {
    grid-template-columns: minmax(0, 1fr);
  }

  .control-response-section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .control-response-model-summary-card .control-response-metrics.is-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .control-response-range-controls,
  .control-response-run-actions,
  .control-response-comparison-summary {
    grid-column: 1;
    grid-row: auto;
  }

  .control-response-comparison-summary {
    align-items: stretch;
    flex-direction: column;
  }

  .control-response-comparison-chips,
  .control-response-comparison-legend {
    max-width: none;
    justify-content: flex-start;
  }

  .control-response-comparison-legend small {
    text-align: left;
  }

  .control-response-range-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .control-response-range-controls input[type="number"] {
    width: 100%;
  }

  .control-response-legend {
    justify-content: flex-start;
  }

  .control-response-tuner-head,
  .control-response-tuner-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .control-response-tuner-actions span {
    text-align: left;
  }

  .control-response-tuner-action-buttons {
    width: 100%;
  }

  .control-response-tuner-action-buttons button {
    flex: 1 1 140px;
  }

  .control-response-tuning-parameter-comparison {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .control-response-response-grid.is-cascade,
  .control-response-controller-grid,
  .control-response-cascade-side-column .control-response-controller-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .control-response-tuning-controls-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .control-response-tuning-dialog-body {
    display: block;
    overflow: auto;
  }

  .control-response-tuning-axis {
    margin-bottom: 8px;
  }

  .control-response-tuning-dialog .control-response-tuning-card {
    overflow: visible;
  }

  .control-response-tuning-axis {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .control-response-tuning-axis-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .control-response-cascade-expander {
    justify-content: center;
    width: 100%;
  }

  .control-response-tuning-axis > small {
    max-width: 100%;
  }

  .control-response-tuning-parameter-comparison > section {
    padding: 7px;
  }

  .control-response-tuning-parameter-comparison .control-response-tuner-inputs label {
    grid-template-columns: minmax(80px, 1fr) 50px minmax(72px, 1fr) 46px;
    gap: 5px;
  }

  .control-response-tuning-parameter-comparison .control-response-tuner-columns {
    grid-template-columns: minmax(80px, 1fr) 50px minmax(72px, 1fr) 46px;
    gap: 5px;
  }

  .control-response-canvas {
    height: 280px;
  }

  .control-response-overview-canvas {
    height: 145px;
  }

  .control-response-detail-canvas {
    height: 270px;
  }

  .control-response-step-canvas {
    height: 270px;
  }

  .control-response-cascade-rate-canvas {
    height: 250px;
  }

  .control-response-cascade-angle-rate-canvas {
    height: 250px;
  }
}

@media (max-height: 820px) and (min-width: 681px) {
  .control-response-tuning-dialog-body {
    overflow: auto;
  }

  .control-response-tuning-dialog .control-response-tuning-card {
    overflow: visible;
  }

  .control-response-tuning-dialog .control-response-step-canvas,
  .control-response-tuning-dialog .control-response-cascade-angle-rate-canvas,
  .control-response-tuning-dialog .control-response-cascade-rate-canvas {
    height: 150px;
  }
}

@media (max-width: 560px) {
  .replay-stage-panel {
    grid-template-rows: minmax(620px, 1fr) auto;
  }

  .replay-scene-placeholder {
    min-height: 620px;
  }

  .replay-instrument-stack {
    width: calc(100% - 20px);
  }

  .replay-map-toolbar,
  .replay-stage-panel.is-mobile-fullscreen .replay-map-toolbar {
    right: 6px;
    left: 6px;
    width: calc(100% - 12px);
    max-width: none;
    gap: 2px;
    overflow: hidden;
  }

  .replay-map-toolbar #replayCameraMode {
    width: 64px;
  }

  .replay-map-toolbar #replayCameraView {
    width: 56px;
  }

  .replay-map-toolbar .replay-camera-lock {
    padding: 0 1px;
    border-left: 0;
  }

  .replay-map-toolbar .replay-toolbar-vehicle-size input {
    width: 40px;
  }

  .replay-map-toolbar .replay-camera-zoom-group {
    gap: 2px;
  }

  .replay-map-toolbar .replay-camera-zoom-button,
  .replay-map-toolbar .replay-add-strip-chart-button {
    width: 26px;
    min-width: 26px;
  }

}

.analysis-share-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.45rem;
  min-width: 2.45rem;
  height: 2.3rem;
  padding: 0;
}

.analysis-share-button-icon {
  display: inline-flex;
  width: 1.22rem;
  height: 1.22rem;
  align-items: center;
  justify-content: center;
}

.analysis-share-button-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.analysis-share-button.is-active {
  border-color: #176b87;
  color: #0f6078;
  background: #edf8fb;
}

.admin-analysis-share-settings {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(150px, 220px) auto;
  gap: 0.8rem;
  align-items: end;
  padding: 0.9rem 1rem;
  border: 1px solid #d8e4e9;
  border-radius: 0.75rem;
  background: #f7fafb;
}

.admin-analysis-share-settings > div,
.admin-analysis-share-settings label {
  display: grid;
  gap: 0.28rem;
}

.admin-analysis-share-settings span {
  color: var(--muted);
  font-size: 0.8rem;
}

.admin-analysis-share-settings input {
  width: 100%;
  min-height: 38px;
}

@media (max-width: 780px) {
  .admin-analysis-share-settings {
    grid-template-columns: 1fr;
  }
}

.analysis-share-dialog {
  width: min(780px, calc(100vw - 32px));
  max-height: min(840px, calc(100vh - 32px));
  overflow: hidden;
}

.analysis-share-dialog-body {
  display: grid;
  gap: 18px;
  padding: 18px;
  overflow: auto;
}

.analysis-share-create-section,
.analysis-share-manage-section {
  display: grid;
  gap: 12px;
}

.analysis-share-create-section h3,
.analysis-share-manage-section h3 {
  margin: 0;
  font-size: 17px;
}

.analysis-share-current-state {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #f6f9fb;
  color: #4e6370;
}

.analysis-share-current-state > span {
  color: #17252f;
  font-weight: 700;
}

.analysis-share-current-state ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.analysis-share-current-state li {
  max-width: 100%;
  padding: 4px 8px;
  border: 1px solid #d9e4e9;
  border-radius: 999px;
  background: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analysis-share-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(120px, 0.5fr) auto;
  gap: 10px;
  align-items: end;
}

.analysis-share-form label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: #4e6370;
  font-size: 13px;
  font-weight: 700;
}

.analysis-share-form select,
.analysis-share-link-row input,
.admin-analysis-share-toolbar input,
.admin-analysis-share-toolbar select {
  min-height: 38px;
}

.analysis-share-created {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid #a8d5c2;
  border-radius: 10px;
  background: #f0fbf6;
}

.analysis-share-created-simple,
.analysis-share-error-state,
.analysis-share-progress {
  display: grid;
  gap: 0.78rem;
}

.analysis-share-created-head,
.analysis-share-created-actions,
.analysis-share-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.analysis-share-created-actions {
  justify-content: flex-end;
}

.analysis-share-recent {
  border: 1px solid var(--line);
  border-radius: 0.72rem;
  background: var(--surface);
}

.analysis-share-recent > summary {
  padding: 0.75rem 0.9rem;
  cursor: pointer;
  font-weight: 700;
}

.analysis-share-recent-body {
  padding: 0 0.9rem 0.75rem;
}

.analysis-share-recent-body .analysis-share-section-head {
  padding-bottom: 0.35rem;
  color: var(--muted);
  font-size: 0.78rem;
}

.analysis-share-created-simple > p,
.analysis-share-error-state > p,
.analysis-share-progress > p {
  margin: 0;
  color: var(--muted);
}

.analysis-share-progress {
  justify-items: center;
  padding: 1.6rem 0.5rem;
  text-align: center;
}

.analysis-share-blocked {
  padding: 0.78rem;
  border: 1px solid #f4b7b7;
  border-radius: 0.72rem;
  background: #fff7f7;
}

.analysis-share-blocked ul {
  display: grid;
  gap: 0.48rem;
  margin: 0.65rem 0 0;
  padding: 0;
  list-style: none;
}

.analysis-share-blocked li {
  display: grid;
  gap: 0.12rem;
}

.analysis-share-blocked li span {
  overflow-wrap: anywhere;
  font-weight: 700;
}

.analysis-share-blocked li small {
  color: #9f2929;
}

.analysis-share-link-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.analysis-share-link-row input {
  min-width: 0;
}

.analysis-share-warning,
.analysis-share-error {
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
}

.analysis-share-warning {
  background: #fff7df;
  color: #7d5400;
}

.analysis-share-access-notice {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);
  gap: 10px 18px;
  margin: 10px 0 4px;
  padding: 10px 12px;
  border: 1px solid #edc86a;
  border-left: 4px solid #c58b00;
  border-radius: 8px;
  background: #fff9e8;
  color: #614700;
}

.analysis-share-global-notice {
  margin: 0;
}

.analysis-share-access-notice[hidden] {
  display: none;
}

.analysis-share-access-notice > div {
  display: grid;
  align-content: start;
  gap: 2px;
}

.analysis-share-access-notice > div > span,
.analysis-share-access-notice li > span {
  font-size: 12px;
  line-height: 1.4;
}

.analysis-share-access-notice ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 5px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.analysis-share-access-notice li {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.analysis-share-error {
  background: #fff0f0;
  color: #a61e1e;
}

.analysis-share-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.analysis-share-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 11px 0;
  border-top: 1px solid #e4ebef;
}

.analysis-share-item-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.analysis-share-item-main > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.analysis-share-item-main > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analysis-share-item-main small {
  color: #647785;
}

.analysis-share-item-actions {
  display: flex;
  gap: 6px;
}

.analysis-share-status {
  display: inline-flex;
  align-items: center;
  width: max-content;
  padding: 2px 7px;
  border-radius: 999px;
  background: #eef2f4;
  color: #536671;
  font-size: 12px;
  font-weight: 700;
}

.analysis-share-status.is-active {
  background: #e8f7ef;
  color: #12643c;
}

.analysis-share-status.is-expired {
  background: #fff4d9;
  color: #7a5200;
}

.analysis-share-status.is-revoked {
  background: #fbecec;
  color: #a52b2b;
}

.admin-analysis-share-metrics {
  margin-bottom: 16px;
}

.admin-analysis-share-toolbar {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(130px, auto) minmax(150px, auto) auto auto;
  align-items: center;
}

.admin-analysis-share-table {
  min-width: 1260px;
}

.admin-analysis-share-table td:nth-child(5) {
  min-width: 230px;
  max-width: 340px;
  vertical-align: top;
}

.admin-analysis-share-table td {
  vertical-align: top;
}

.admin-analysis-share-logs {
  display: grid;
  gap: 4px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: normal;
}

.admin-analysis-share-logs li {
  min-width: 0;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-analysis-share-logs li + li {
  padding-top: 4px;
  border-top: 1px solid rgba(100, 119, 133, 0.18);
}

/* The account dialog is narrower than the administrator directory. */
.account-analysis-share-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.account-analysis-share-table th,
.account-analysis-share-table td,
.account-analysis-share-table td:nth-child(5) {
  min-width: 0;
  max-width: none;
  padding: 8px 6px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.account-analysis-share-table th:nth-child(1) { width: 13%; }
.account-analysis-share-table th:nth-child(2) { width: 11%; }
.account-analysis-share-table th:nth-child(3) { width: 17%; }
.account-analysis-share-table th:nth-child(4) { width: 24%; }
.account-analysis-share-table th:nth-child(5) { width: 10%; }
.account-analysis-share-table th:nth-child(6) { width: 12%; }
.account-analysis-share-table th:nth-child(7) { width: 13%; }

.account-analysis-share-table .analysis-share-status + .analysis-share-table-actions {
  margin-top: 5px;
}

.account-analysis-share-table .admin-row-subtext,
.account-analysis-share-table .admin-analysis-share-logs li,
.account-analysis-share-table .analysis-share-status {
  white-space: normal;
  overflow-wrap: anywhere;
}

.account-analysis-share-table .analysis-share-table-actions {
  flex-direction: column;
  align-items: stretch;
  white-space: normal;
}

.account-analysis-share-table .analysis-share-table-actions button {
  min-width: 0;
  padding: 4px;
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 600px) {
  .account-analysis-share-section {
    display: block;
    height: auto;
    min-height: 0;
  }
  .admin-table-wrap.account-analysis-share-table-wrap {
    height: auto;
    max-height: none;
    overflow: visible;
  }
  .account-analysis-share-table thead { display: none; }
  .account-analysis-share-table,
  .account-analysis-share-table tbody,
  .account-analysis-share-table tr { display: block; }
  .account-analysis-share-table tr + tr { border-top: 2px solid var(--line); }
  .account-analysis-share-table td,
  .account-analysis-share-table td:nth-child(5) {
    display: grid;
    grid-template-columns: minmax(0, 28%) minmax(0, 1fr);
    gap: 2px 10px;
    width: auto;
  }
  .account-analysis-share-table td::before {
    content: attr(data-label);
    grid-column: 1;
    grid-row: 1 / span 3;
    color: var(--muted);
  }
  .account-analysis-share-table td > * { grid-column: 2; min-width: 0; }
  .account-analysis-share-table .analysis-share-table-actions { flex-direction: row; }
  .account-analysis-share-table .analysis-share-table-actions button { flex: 1; }
}

.admin-analysis-share-footer {
  margin-top: 10px;
}

@media (max-width: 720px) {
  #logSearchInput {
    width: 100%;
    max-width: none;
  }

  .analysis-share-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
  }

  .analysis-share-dialog-body {
    padding: 12px;
  }

  .analysis-share-form,
  .analysis-share-link-row,
  .analysis-share-item {
    grid-template-columns: 1fr;
  }

  .analysis-share-item-actions {
    justify-content: flex-start;
  }

  .analysis-share-created-head,
  .analysis-share-section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .analysis-share-access-notice {
    grid-template-columns: 1fr;
  }

  .admin-analysis-share-toolbar {
    grid-template-columns: 1fr 1fr;
  }

  .admin-analysis-share-toolbar input {
    grid-column: 1 / -1;
  }
}

@media (max-width: 880px) {
  .debrief-page-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .debrief-page-actions {
    width: 100%;
  }

  .debrief-generate-context {
    flex-basis: 100%;
  }
}

@media print {
  body {
    background: #fff;
  }

  body > :not(.app-shell),
  .app-shell > :not([data-app-view-panel="reports"]),
  [data-app-view-panel="reports"] > :not(.report-workspace),
  .report-workspace > :not(#reportBuilder),
  .report-editor {
    display: none !important;
  }

  .app-shell,
  [data-app-view-panel="reports"],
  .report-workspace,
  #reportBuilder,
  .report-preview {
    display: block !important;
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
  }

  .report-document {
    max-width: none;
    padding: 0;
    border: 0;
  }

  .report-chart-section {
    break-inside: avoid;
  }
}