:root,
[data-bs-theme="light"] {
  --primary: #0f766e;
  --ink: #172d3b;
  --muted: #728390;
  --line: #e5ecf0;
  --surface: #ffffff;
  --canvas: #f5f8fa;
  --soft: #f3f6f8;
  --subtle: #f9fbfc;
  --accent-soft: #eaf6f3;
  --accent-border: #b6d5d0;
  --label: #617583;
  --drop-bg: #f9fcfc;
  --drop-border: #9ac8c1;
  --drop-hover: #e5f4ee;
  --notice-bg: #eff7fa;
  --notice-border: #deedf2;
  --notice-ink: #57788a;
  --input-border: #dce5eb;
  --quiet: #82929d;
  --focus-ring: #0f766e24;
  --accepted-bg: #e8f5ee;
  --accepted-ink: #25865c;
  --failed-bg: #fcecee;
  --failed-ink: #b64854;
  --uncertain-bg: #fff3d9;
  --uncertain-ink: #9a6b13;
  --pending-bg: #edf2f7;
  --pending-ink: #60758c;
  --bs-primary: #0f766e;
  --bs-body-bg: var(--canvas);
  --bs-body-color: var(--ink);
}
[data-bs-theme="dark"] {
  --primary: #64d6c3;
  --ink: #e2eaf0;
  --muted: #a1afbd;
  --line: #304151;
  --surface: #1b2835;
  --canvas: #121d28;
  --soft: #253443;
  --subtle: #21303e;
  --accent-soft: #1b3c3b;
  --accent-border: #47766e;
  --label: #bfceda;
  --drop-bg: #172d34;
  --drop-border: #497d75;
  --drop-hover: #24443f;
  --notice-bg: #1c3343;
  --notice-border: #355267;
  --notice-ink: #b7d5e7;
  --input-border: #435667;
  --quiet: #a1b2c0;
  --focus-ring: #64d6c330;
  --accepted-bg: #1e4034;
  --accepted-ink: #8ce0b3;
  --failed-bg: #482d35;
  --failed-ink: #ffb5bf;
  --uncertain-bg: #493e23;
  --uncertain-ink: #f5d78b;
  --pending-bg: #2b3c50;
  --pending-ink: #bdcfe4;
  --bs-secondary-color: #a1afbd;
  --bs-border-color: var(--line);
  --bs-tertiary-bg: var(--soft);
  --bs-secondary-bg: var(--surface);
}
.theme-switch {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  color: var(--muted);
  font-size: 12px;
}
.theme-switch select {
  width: 112px;
  min-height: 34px;
  padding-top: 5px;
  padding-bottom: 5px;
}
.login-theme {
  position: absolute;
  top: 20px;
  right: 24px;
}
.evidence-preview {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: white;
}
.evidence-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
@media (max-width: 767px) {
  .theme-switch > span {
    display: none;
  }
  .theme-switch select {
    width: 95px;
  }
  .topbar {
    height: auto;
    min-height: 70px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .topbar > div {
    flex-wrap: wrap;
  }
}