@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap');

:root {
  --bg: #000000;
  --surface: #050506;
  --surface2: #101114;
  --border: rgba(255,255,255,0.075);
  --border-active: rgba(99,179,237,0.22);
  --text: #f5f7fb;
  --text-muted: #a2acba;
  --text-dim: #687386;
  --accent-blue: #4fa3d1;
  --accent-teal: #38b2ac;
  --accent-red: #e05252;
  --accent-amber: #e8a838;
  --accent-violet: #8b6cd8;
  --accent-green: #48bb78;
  --glow-blue: rgba(79,163,209,0.12);
  --glow-teal: rgba(56,178,172,0.10);

  --font-sans: 'DM Sans', 'Segoe UI', sans-serif;
  --font-mono: 'DM Mono', 'Consolas', monospace;
  --sidebar-w: 56px;
  --tab-content-top-gap: 10px;
  --tab-content-right-gap: 180px;
  --tab-content-bottom-gap: 30px;
  --tab-content-left-gap: 180px;
  --tab-content-edge-gap: var(--tab-content-top-gap);

  --fg: var(--text);
  --fg2: var(--text-muted);
  --fg3: var(--text-dim);
  --bg1: var(--bg);
  --bg2: var(--surface);
  --app-bg: var(--bg);
  --sidebar-bg: #000000;
  --card-bg: var(--surface);
  --panel-bg: var(--surface);
  --border-color: var(--border);
  --button-bg: var(--surface2);
  --button-hover-bg: color-mix(in srgb, var(--surface2) 96%, #ffffff 4%);
  --input-bg: var(--surface2);
  --input-border: var(--border);
  --input-text: var(--text);
  --inp-bg: var(--surface2);
  --inp-fg: var(--text);
  --inp-ph: var(--text-dim);
  --accent: var(--accent-blue);
  --accent2: color-mix(in srgb, var(--accent-blue) 72%, #050506 28%);
  --danger-bg: rgba(224, 82, 82, 0.12);
  --danger-bg-hover: rgba(224, 82, 82, 0.18);
  --danger-bg-active: rgba(224, 82, 82, 0.22);
  --danger-border: rgba(224, 82, 82, 0.28);
  --danger-border-hover: rgba(224, 82, 82, 0.42);
  --danger-text: var(--accent-red);
  --chrome-edge-line: color-mix(in srgb, var(--accent-blue) 24%, var(--border) 76%);
  --chrome-edge-inset: color-mix(in srgb, var(--accent-blue) 12%, transparent);
}

body.light-theme {
  --bg: #f3f7fc;
  --surface: #ffffff;
  --surface2: #edf3fb;
  --border: rgba(18, 42, 72, 0.18);
  --border-active: rgba(47, 131, 184, 0.5);
  --text: #11253f;
  --text-muted: #3b4f6a;
  --text-dim: #6c809b;
  --accent-blue: #2f83b8;
  --accent-teal: #1d9789;
  --accent-red: #c94a4a;
  --accent-amber: #c38a24;
  --accent-violet: #6f5ed2;
  --accent-green: #268e67;
  --glow-blue: rgba(47, 131, 184, 0.14);
  --glow-teal: rgba(29, 151, 137, 0.12);
  --button-hover-bg: color-mix(in srgb, var(--surface2) 84%, var(--accent-blue) 16%);
  --input-bg: #f7faff;
  --input-border: rgba(30, 55, 85, 0.22);
  --input-text: var(--text);
  --inp-bg: var(--input-bg);
  --inp-fg: var(--text);
  --inp-ph: var(--text-dim);
  --accent: var(--accent-blue);
  --accent2: color-mix(in srgb, var(--accent-blue) 74%, #ffffff 26%);
  --danger-bg: rgba(201, 74, 74, 0.1);
  --danger-bg-hover: rgba(201, 74, 74, 0.16);
  --danger-bg-active: rgba(201, 74, 74, 0.2);
  --danger-border: rgba(201, 74, 74, 0.32);
  --danger-border-hover: rgba(201, 74, 74, 0.46);
  --danger-text: #9e2d2d;
  --chrome-edge-line: color-mix(in srgb, var(--accent-blue) 28%, var(--border) 72%);
  --chrome-edge-inset: color-mix(in srgb, var(--accent-blue) 16%, transparent);
}

* { box-sizing: border-box; }

html,
body,
#_dash-app-content,
#_dash-app-content > div {
  height: 100%;
}

body,
.dash-application {
  margin: 0 !important;
  background-color: var(--bg-pattern-base, var(--bg)) !important;
  background-image: var(--bg-pattern-image, none) !important;
  background-repeat: repeat !important;
  background-attachment: fixed !important;
  color: var(--text) !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  overflow: hidden;
}

a { color: inherit; }

#root-div {
  display: flex;
  height: 100vh;
  overflow: hidden;
  background-color: var(--bg-pattern-base, var(--bg));
  background-image: var(--bg-pattern-image, none);
  background-repeat: repeat;
  background-attachment: fixed;
}

#root-div.sidebar-collapsed {
  --sidebar-w: 56px;
}

#app-main {
  margin-left: var(--sidebar-w) !important;
  min-height: 100vh !important;
  width: calc(100% - var(--sidebar-w));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--bg-pattern-base, var(--bg)) !important;
  background-image: var(--bg-pattern-image, none) !important;
  background-repeat: repeat !important;
  background-attachment: fixed !important;
}

#page-content.content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  padding: var(--tab-content-top-gap) var(--tab-content-right-gap) var(--tab-content-bottom-gap) var(--tab-content-left-gap) !important;
  background-color: var(--bg-pattern-base, var(--bg));
  background-image: var(--bg-pattern-image, none);
  background-repeat: repeat;
  background-attachment: fixed;
}

#page-content.content::-webkit-scrollbar { width: 4px; }
#page-content.content::-webkit-scrollbar-track { background: transparent; }
#page-content.content::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

#page-content > [id^="content-"] {
  width: 100%;
  padding-bottom: var(--tab-content-bottom-gap) !important;
  box-sizing: border-box;
}

.main-wrap {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.analysis-main-wrap {
  gap: 14px;
}

.wide-wrap { max-width: none !important; }

#content-browser {
  min-height: 0;
  height: 100%;
}

#clock-theme-dock,
.app-name-dock {
  display: none !important;
}

#app-sidebar.app-sidebar {
  width: 56px !important;
  background: var(--surface) !important;
  border-right: 1px solid var(--chrome-edge-line) !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0 10px;
  gap: 4px;
  flex-shrink: 0;
  z-index: 20;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  overflow: hidden;
  box-shadow: inset -1px 0 0 var(--chrome-edge-inset);
}

#app-sidebar .sidebar-logo {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#app-sidebar .sidebar-logo .app-sidebar-toggle-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

#app-sidebar .sidebar-divider {
  width: 28px;
  height: 1px;
  background: var(--border);
  margin: 3px 0 5px;
}

#app-sidebar .app-sidebar-nav,
#app-sidebar .app-sidebar-nav-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
}

#app-sidebar .nav-item {
  width: auto;
}

#app-sidebar .nav-link,
#app-sidebar .nav-link.nav-item {
  width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  min-width: 36px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  color: var(--text-dim) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  position: relative;
  transition: background 0.15s, color 0.15s;
}

#app-sidebar .nav-link:hover {
  background: var(--surface2) !important;
  color: var(--text-muted) !important;
}

#app-sidebar .nav-link.active {
  background: rgba(79,163,209,0.15) !important;
  color: var(--accent-blue) !important;
  box-shadow: none !important;
}

#app-sidebar .nav-link.active::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 20px;
  background: var(--accent-blue);
  border-radius: 0 2px 2px 0;
}

#app-sidebar .sidebar-nav-icon {
  width: 16px;
  min-width: 16px;
  text-align: center;
  font-size: 18px;
  line-height: 1;
  transform-origin: 50% 50%;
  transition: transform 140ms cubic-bezier(0.4, 0, 0.2, 1), text-shadow 140ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

#app-sidebar .nav-link:not(.nav-link-running):hover .sidebar-nav-icon {
  transform: translateY(-1px) scale(1.08);
  text-shadow: 0 0 9px color-mix(in srgb, currentColor 34%, transparent);
}

#app-sidebar .nav-link:not(.nav-link-running):active .sidebar-nav-icon {
  transform: scale(0.92);
}

#app-sidebar .nav-link.is-click-anim:not(.nav-link-running) .sidebar-nav-icon {
  animation: sidebarIconClickPop 230ms cubic-bezier(0.22, 0.61, 0.36, 1) 1;
}

@keyframes sidebarIconClickPop {
  0% { transform: scale(1); }
  45% { transform: scale(0.88); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  #app-sidebar .sidebar-nav-icon {
    transition: none;
  }
  #app-sidebar .nav-link.is-click-anim:not(.nav-link-running) .sidebar-nav-icon {
    animation: none;
  }
}

#app-sidebar .sidebar-nav-label {
  display: none !important;
}

#app-sidebar .sidebar-nav-icon[data-hema-tooltip] {
  position: relative;
}

#app-sidebar .sidebar-bottom {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-bottom: 6px;
}

#app-sidebar .app-sidebar-toggle,
#app-sidebar .app-sidebar-brand {
  display: none !important;
}

#content-home {
  min-height: 100%;
}

#content-home > .home-main-wrap {
  min-height: calc(100vh - 48px - 64px);
}

.home-main-wrap {
  display: flex;
  flex-direction: column;
}

.home-description-reset-hit {
  cursor: pointer;
  border-radius: 10px;
}

.home-description-reset-content {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.home-description-logo {
  height: 64px;
  width: auto;
  object-fit: contain;
  margin-top: 4px;
  flex-shrink: 0;
}

.home-description-reset-hit:focus-visible {
  outline: 1px solid var(--border-active);
  outline-offset: 2px;
}

.analysis-main-wrap .page-header {
  padding-bottom: 14px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--border-color);
}

.analysis-main-wrap .section-label {
  margin-bottom: 8px;
}

.analysis-main-wrap .analysis-kpi-row {
  --bs-gutter-x: 10px;
  --bs-gutter-y: 10px;
}

.analysis-main-wrap .mb-3 {
  margin-bottom: 0.6rem !important;
}

.analysis-main-wrap .upload-box {
  padding: 16px 18px !important;
  border-color: color-mix(in srgb, var(--accent-blue) 32%, var(--border-color) 68%) !important;
  background: color-mix(in srgb, var(--panel-bg) 86%, var(--surface2) 14%) !important;
}

.analysis-main-wrap .analysis-project-input {
  min-height: 38px;
}

.analysis-main-wrap .analysis-format-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.analysis-main-wrap .analysis-input-path-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin-bottom: 10px;
}

.analysis-main-wrap .analysis-input-actions-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.analysis-main-wrap .analysis-browse-folder-btn,
.analysis-main-wrap .analysis-browse-files-btn,
.analysis-main-wrap .analysis-clear-upload-btn {
  min-height: 32px;
  border-radius: 8px !important;
}

.analysis-main-wrap .analysis-upload-filenames {
  margin-top: 8px !important;
  color: var(--fg3) !important;
}

.analysis-main-wrap .analysis-upload-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2px;
  color: var(--fg3);
}

.analysis-main-wrap .analysis-upload-toggle:hover {
  color: var(--fg2);
}

.analysis-main-wrap .analysis-upload-file-list {
  margin: 6px 0 0 0;
  padding: 6px 0 0 0;
  list-style: none;
  border-top: 1px solid var(--border-color);
  max-height: 132px;
  overflow-y: auto;
}

.analysis-main-wrap .analysis-upload-file-item {
  list-style: none;
  padding: 2px 0;
  color: var(--fg2);
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.45;
}

.analysis-main-wrap .stat-box {
  min-height: 76px;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  border-color: color-mix(in srgb, var(--accent-blue) 18%, var(--border-color) 82%);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--panel-bg) 78%, var(--surface2) 22%),
    color-mix(in srgb, var(--panel-bg) 92%, #06080d 8%)
  );
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 11px 8px 10px;
}

.analysis-main-wrap .stat-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent-blue);
  opacity: 0.9;
}

.analysis-main-wrap .stat-box-samples::before {
  background: var(--accent-teal);
}

.analysis-main-wrap .stat-box-modules::before {
  background: var(--accent-blue);
}

.analysis-main-wrap .stat-box-status::before {
  background: var(--accent-green);
}

.analysis-main-wrap .stat-num {
  text-align: center;
  margin-top: 4px;
  font-size: 36px;
  line-height: 1;
  color: #eaf2ff;
}

.analysis-main-wrap .stat-lbl {
  margin: 0;
  text-align: center;
  font-size: 10px;
  letter-spacing: 1.2px;
  color: var(--fg3);
}

.analysis-main-wrap #stat-status {
  color: var(--accent-green);
  font-size: 30px;
}

.analysis-main-wrap .analysis-module-row {
  --bs-gutter-x: 10px;
  --bs-gutter-y: 10px;
}

.analysis-main-wrap .analysis-module-row .module-card {
  min-height: 176px;
  padding: 15px 15px 13px !important;
}

.analysis-main-wrap #card_fusion.module-card:not(.selected-teal) {
  border-color: rgba(56,178,172,0.45) !important;
  background: linear-gradient(180deg, rgba(56,178,172,0.30), rgba(56,178,172,0.12)) !important;
}

.analysis-main-wrap #card_variant.module-card:not(.selected-blue) {
  border-color: rgba(79,163,209,0.45) !important;
  background: linear-gradient(180deg, rgba(79,163,209,0.30), rgba(79,163,209,0.12)) !important;
}

.analysis-main-wrap #card_lineage.module-card:not(.selected-pink) {
  border-color: rgba(212,83,126,0.48) !important;
  background: linear-gradient(180deg, rgba(212,83,126,0.31), rgba(212,83,126,0.12)) !important;
}

.analysis-main-wrap #card_subtype.module-card:not(.selected-amber) {
  border-color: rgba(186,117,23,0.50) !important;
  background: linear-gradient(180deg, rgba(186,117,23,0.34), rgba(186,117,23,0.12)) !important;
}

.analysis-main-wrap #card_fusion.module-card:not(.selected-teal) .mod-desc,
.analysis-main-wrap #card_variant.module-card:not(.selected-blue) .mod-desc,
.analysis-main-wrap #card_lineage.module-card:not(.selected-pink) .mod-desc,
.analysis-main-wrap #card_subtype.module-card:not(.selected-amber) .mod-desc {
  color: color-mix(in srgb, var(--fg2) 84%, #d7e3f5 16%) !important;
}

.analysis-main-wrap #card_full.module-card {
  display: flex !important;
  flex-direction: row !important;
  padding: 12px 14px !important;
  gap: 12px !important;
  justify-content: flex-start;
  align-items: center;
  border-radius: 10px !important;
  border-color: #534ab7 !important;
  background: linear-gradient(180deg, rgba(111,103,216,0.52), rgba(74,66,166,0.46)) !important;
}

.analysis-main-wrap #card_full .mod-icon {
  margin-bottom: 0 !important;
  flex-shrink: 0;
}

.analysis-main-wrap #card_full .mod-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

.analysis-main-wrap #card_full .mod-name,
.analysis-main-wrap #card_full .mod-desc {
  margin-bottom: 0;
  text-align: left !important;
}

.analysis-main-wrap .analysis-full-module-check {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(186, 171, 255, 0.55);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(186, 171, 255, 0.92);
  background: rgba(8, 12, 26, 0.35);
  flex-shrink: 0;
}

.analysis-main-wrap .analysis-full-module-check .material-symbols-rounded {
  font-size: 13px;
  line-height: 1;
}

.analysis-main-wrap #card_full.selected-purple .analysis-full-module-check {
  background: rgba(160, 142, 255, 0.24);
  border-color: rgba(186, 171, 255, 0.9);
  color: #efe9ff;
}

.analysis-main-wrap .module-card.selected-teal .mod-icon .material-symbols-rounded,
.analysis-main-wrap .module-card.selected-blue .mod-icon .material-symbols-rounded,
.analysis-main-wrap .module-card.selected-pink .mod-icon .material-symbols-rounded,
.analysis-main-wrap .module-card.selected-amber .mod-icon .material-symbols-rounded,
.analysis-main-wrap .module-card.selected-purple .mod-icon .material-symbols-rounded {
  color: #ffffff !important;
  opacity: 1 !important;
}

.analysis-main-wrap .run-btn-wrap {
  display: flex;
  justify-content: center;
  margin-top: 2px;
}

.analysis-main-wrap #run-btn.run-btn {
  min-width: 216px;
  min-height: 40px;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -0.1px;
  padding: 0 28px !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, #21b88d, #1c936f) !important;
  box-shadow: 0 10px 22px rgba(29, 158, 117, 0.26);
  transform: none !important;
}

.analysis-main-wrap #run-btn.run-btn:hover {
  opacity: 1 !important;
  filter: brightness(1.03);
  transform: none !important;
}

.analysis-main-wrap #run-btn .run-analysis-btn-surface {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.analysis-main-wrap #run-btn .run-analysis-label {
  font-size: 16px;
  font-weight: 700;
}

.analysis-main-wrap #run-btn .run-analysis-spinner {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: rgba(255,255,255,0.95);
  display: none;
}

.analysis-main-wrap #run-btn.run-analysis-state-loading .run-analysis-spinner,
.analysis-main-wrap #run-btn.run-analysis-state-handoff-to-navigation .run-analysis-spinner {
  display: inline-block;
  animation: analysisRunSpin 0.9s linear infinite;
}

@keyframes analysisRunSpin {
  to { transform: rotate(360deg); }
}

.appearance-main-wrap {
  gap: 14px;
}

.appearance-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
}

.appearance-section-title {
  margin-bottom: 8px;
}

.appearance-section-description {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
}

.appearance-theme-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.appearance-theme-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.appearance-theme-note {
  font-size: 11px;
  color: var(--text-dim);
  margin: 0;
}

.appearance-theme-toggle-btn {
  min-height: 34px;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 7px 14px !important;
}

.appearance-theme-toggle-btn .material-symbols-rounded {
  font-size: 16px;
  line-height: 1;
}

.appearance-picker-grid-theme,
.appearance-picker-grid-accent {
  display: grid;
  gap: 12px;
}

.appearance-picker-grid-theme {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.appearance-picker-grid-accent {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.color-picker-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.color-picker-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.3px;
}

.color-picker-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.color-swatch.appearance-color-input {
  width: 28px !important;
  min-width: 28px;
  height: 28px !important;
  border-radius: 6px;
  border: 1px solid var(--border);
  flex-shrink: 0;
  cursor: pointer;
  padding: 0 !important;
  background: transparent !important;
}

.color-swatch.appearance-color-input::-webkit-color-swatch-wrapper {
  padding: 0;
}

.color-swatch.appearance-color-input::-webkit-color-swatch {
  border: none;
  border-radius: 5px;
}

.color-hex-input.appearance-hex-input {
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  color: var(--text) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  padding: 5px 10px !important;
  flex: 1;
  outline: none;
  transition: border-color 0.15s;
}

.color-hex-input.appearance-hex-input:focus {
  border-color: var(--border-active) !important;
}

.appearance-preset-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.appearance-palette-btn,
.appearance-custom-btn,
.appearance-custom-save-btn {
  min-height: 34px;
}

.appearance-custom-save-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

.appearance-custom-name-input {
  min-width: 220px;
  flex: 1;
}

.sys-console-command-input {
  min-height: 38px !important;
  font-family: var(--font-mono) !important;
}

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

.appearance-reset-btn {
  font-weight: 700 !important;
}

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

.appearance-margin-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.appearance-margin-label {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.25px;
}

.appearance-margin-stepper {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface2) 82%, var(--surface) 18%);
  width: max-content;
}

.appearance-margin-step-btn {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.appearance-margin-step-btn:hover {
  border-color: var(--border-active);
  background: color-mix(in srgb, var(--surface) 70%, var(--surface2) 30%);
}

.appearance-margin-input {
  width: 70px;
  max-width: 70px;
  min-width: 70px;
  text-align: center;
  padding: 0 4px !important;
  background: transparent !important;
  color: var(--text) !important;
  border: none !important;
  border-radius: 0 !important;
  min-height: 28px;
  box-shadow: none !important;
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}

.appearance-margin-input::-webkit-outer-spin-button,
.appearance-margin-input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  appearance: none !important;
  margin: 0 !important;
  display: none !important;
}

body:not(.light-theme) .appearance-margin-input {
  background: transparent !important;
  color: var(--fg) !important;
  color-scheme: dark;
}

body.light-theme .appearance-margin-input {
  color-scheme: light;
}

body:not(.light-theme) .appearance-margin-stepper {
  background: color-mix(in srgb, var(--surface2) 76%, #000 24%);
  border-color: color-mix(in srgb, var(--border) 84%, #4f5d75 16%);
}

body:not(.light-theme) .appearance-margin-step-btn {
  background: color-mix(in srgb, var(--surface) 88%, #02040a 12%);
  border-color: color-mix(in srgb, var(--border) 82%, #51607c 18%);
  color: var(--fg);
}

.appearance-margin-note {
  font-size: 10px;
  color: var(--text-dim);
  line-height: 1.4;
}

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

.appearance-margin-save-btn,
.appearance-margin-reset-btn {
  min-height: 34px;
  font-weight: 600 !important;
}

.appearance-margin-status {
  font-size: 11px;
  color: var(--text-dim);
}

.topbar {
  height: 48px;
  border-bottom: 1px solid var(--chrome-edge-line);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 16px;
  flex-shrink: 0;
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 9;
  box-shadow: inset 0 -1px 0 var(--chrome-edge-inset);
}

.topbar-brand {
  display: flex;
  align-items: center;
  height: 34px;
  cursor: pointer;
}

.topbar-brand-logo {
  height: 30px;
  max-width: 180px;
  width: auto;
  object-fit: contain;
  display: block;
}

.topbar-version,
.topbar-genome {
  font-family: var(--font-mono) !important;
  font-size: 10px;
  color: var(--text-dim);
  background: var(--surface2);
  border: 1px solid var(--border);
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.topbar-genome { padding: 3px 8px; }
.topbar-spacer { flex: 1; }

.topbar-status {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--text-muted);
  min-width: 0;
}

.topbar-pipeline-text {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

.pipeline-mod-lights {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 8px;
}

.pipeline-mod-light {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  opacity: 0.14;
  transform: scale(0.95);
  transition: opacity 0.14s ease, transform 0.14s ease, box-shadow 0.14s ease;
}

.pipeline-mod-light.mod-fusion { background: var(--accent-teal); }
.pipeline-mod-light.mod-variant { background: var(--accent-blue); }
.pipeline-mod-light.mod-lineage { background: #D4537E; }
.pipeline-mod-light.mod-subtype { background: #BA7517; }

.pipeline-mod-light.is-off {
  opacity: 0.12;
  box-shadow: none;
}

.pipeline-mod-light.is-on {
  opacity: 0.98;
  transform: scale(1.08);
  box-shadow: 0 0 8px color-mix(in srgb, currentColor 55%, transparent);
  animation: topbar-mod-blink 0.62s ease-in-out infinite;
}

.pipeline-mod-light.is-scan {
  opacity: 0.72;
  transform: scale(1.04);
  box-shadow: 0 0 6px color-mix(in srgb, currentColor 42%, transparent);
  animation: topbar-mod-blink 0.62s ease-in-out infinite;
}

.status-indicator {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  cursor: pointer;
}

.status-indicator-ready {
  background: var(--accent-green);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent-green) 72%, transparent);
  animation: topbar-ready-blink 1.05s ease-in-out infinite;
}

.status-indicator-error {
  background: var(--accent-red);
  box-shadow: 0 0 9px color-mix(in srgb, var(--accent-red) 76%, transparent);
  animation: topbar-error-blink 0.74s infinite;
}

.status-indicator-stopped {
  background: var(--accent-amber);
  box-shadow: 0 0 7px color-mix(in srgb, var(--accent-amber) 64%, transparent);
}

.status-indicator-running {
  background: transparent;
  width: 9px;
  height: 9px;
}

.status-indicator-running::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--accent-green) 24%, transparent);
}

.status-indicator-running::after {
  content: "";
  position: absolute;
  inset: -50%;
  border-radius: 50%;
  --topbar-ring-angle: 0deg;
  background: conic-gradient(var(--accent-green) var(--topbar-ring-angle), transparent 0deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  transform: scale(0.5) rotate(-90deg);
  transform-origin: 50% 50%;
  animation: topbar-ring-fill-smooth 3s linear infinite;
  box-shadow:
    0 0 7px color-mix(in srgb, var(--accent-green) 66%, transparent),
    0 0 10px color-mix(in srgb, var(--accent-green) 34%, transparent);
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent-green) 42%, transparent));
  will-change: transform, background;
}

/* Backward-compatible classes still used in older sections */
.status-dot,
.status-dot-ready,
.status-dot-running,
.status-dot-error,
.status-dot-stopped {
  all: unset;
}

@property --topbar-ring-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes topbar-ring-fill-smooth {
  from { --topbar-ring-angle: 0deg; }
  to   { --topbar-ring-angle: 360deg; }
}

@keyframes topbar-mod-blink {
  0%, 100% {
    opacity: 0.98;
    transform: scale(1.08);
  }
  50% {
    opacity: 0.3;
    transform: scale(0.96);
  }
}

@keyframes topbar-ready-blink {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 8px color-mix(in srgb, var(--accent-green) 72%, transparent);
  }
  50% {
    opacity: 0.36;
    box-shadow: 0 0 4px color-mix(in srgb, var(--accent-green) 44%, transparent);
  }
}

@keyframes topbar-error-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.18; }
}

.topbar-user-shell {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.topbar-user-session {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-user {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, #ffffff 22%, transparent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: transform 0.14s ease, box-shadow 0.16s ease;
}

.topbar-user:hover {
  transform: translateY(-1px);
}

.topbar-user:active {
  transform: translateY(0);
}

.topbar-user-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: 320px;
  max-width: min(92vw, 320px);
  padding: 12px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--accent-blue) 24%, var(--border) 76%);
  background: color-mix(in srgb, var(--surface) 94%, #06090f 6%);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.34);
  z-index: 1200;
}

.topbar-user-menu-title {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent-teal);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.topbar-user-capacity {
  margin-top: 4px;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
}

.topbar-user-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 238px;
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.topbar-user-list::-webkit-scrollbar {
  width: 4px;
}

.topbar-user-list::-webkit-scrollbar-track {
  background: transparent;
}

.topbar-user-list::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 2px;
}

.topbar-user-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface2) 86%, transparent);
  color: var(--text);
  border-radius: 8px;
  padding: 6px 8px;
  cursor: pointer;
  text-align: left;
}

.topbar-user-row.active {
  border-color: color-mix(in srgb, var(--accent-blue) 48%, var(--border) 52%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-blue) 30%, transparent);
}

.topbar-user-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  border: 1px solid color-mix(in srgb, #ffffff 24%, transparent);
  flex-shrink: 0;
}

.topbar-user-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
}

.topbar-user-active-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--accent-blue);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.topbar-user-empty {
  font-size: 11px;
  color: var(--text-dim);
  padding: 6px 2px;
}

.topbar-user-add-grid {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 6px;
  margin-top: 10px;
}

.topbar-user-input {
  min-height: 38px;
}

.topbar-user-add-btn {
  min-height: 32px;
  font-size: 11px;
  padding: 0 10px !important;
}

.topbar-user-feedback {
  min-height: 16px;
  margin-top: 6px;
  font-size: 10px;
  color: var(--text-dim);
}

.page-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 16px;
  border-bottom: none;
  margin-bottom: 4px;
}

.hero-eyebrow {
  font-family: var(--font-mono) !important;
  font-size: 10px;
  color: var(--accent-teal);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.hero-title {
  font-size: 22px;
  font-weight: 300;
  color: var(--text);
  letter-spacing: -0.5px;
  line-height: 1.3;
  margin: 0;
}

.hero-title strong { font-weight: 600; }

.hero-sub {
  font-size: 12px;
  color: var(--text-muted);
  max-width: 620px;
  line-height: 1.6;
  margin: 0;
}

.section-label,
.panel-title {
  font-family: var(--font-mono) !important;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted) !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.panel,
.result-card,
.info-panel,
.sys-config-card,
.sys-health-card,
.samples-result-card,
.rpt-top-card,
.rpt-findings-shell,
.about-card,
.module-detail,
.samples-subsection-shell,
.samples-search-shell,
.sys-config-grid,
.browser-shell,
.notes-shell,
.rpt-field,
.upload-box {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
}

.panel,
.result-card,
.info-panel,
.sys-config-card,
.sys-health-card,
.rpt-top-card,
.about-card,
.samples-search-shell,
.samples-subsection-shell,
.rpt-field {
  padding: 18px 20px;
}

.empty-state {
  background: var(--surface);
  border: 1px dashed var(--border-active);
  border-radius: 10px;
  padding: 24px;
}

.empty-icon.empty-icon-ms {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
}

.empty-icon.empty-icon-ms .material-symbols-rounded {
  font-size: 40px;
  line-height: 1;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

.samples-search-icon.material-symbols-rounded,
.samples-status-icon,
.samples-card-icon-btn .material-symbols-rounded,
.jv2-action-btn .material-symbols-rounded,
.jobs-history-icon-btn .material-symbols-rounded,
.project-actions-dock .material-symbols-rounded,
.jv2-status-ring .material-symbols-rounded,
.jobs-history-icon .material-symbols-rounded {
  font-variation-settings: "FILL" 0, "wght" 360, "GRAD" 0, "opsz" 20 !important;
  text-shadow: none !important;
}

.samples-search-icon.material-symbols-rounded {
  font-size: 16px !important;
  line-height: 1;
}

.empty-title { color: var(--text); }
.empty-desc { color: var(--text-muted); }

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

.module-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 16px !important;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
  position: relative;
  overflow: hidden;
  color: var(--text);
}

.module-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 10px 10px 0 0;
  opacity: 0;
  transition: opacity 0.2s;
}

.module-card:hover {
  border-color: var(--border-active) !important;
  background: var(--surface2) !important;
  transform: translateY(-1px);
}

.module-card:hover::before,
.module-card.selected-teal::before,
.module-card.selected-blue::before,
.module-card.selected-pink::before,
.module-card.selected-amber::before,
.module-card.selected-purple::before,
.home-module-card[style*="borderColor: var(--border-active)"]::before {
  opacity: 1;
}

.module-card.c1::before,
#card_fusion.module-card::before,
.module-card.selected-teal::before { background: var(--accent-teal); }
.module-card.c2::before,
#card_variant.module-card::before,
.module-card.selected-blue::before { background: var(--accent-blue); }
.module-card.c3::before,
#card_lineage.module-card::before,
.module-card.selected-pink::before { background: var(--accent-red); }
.module-card.c4::before,
#card_subtype.module-card::before,
.module-card.selected-amber::before { background: var(--accent-amber); }
.module-card.c5::before,
#card_full.module-card::before,
.module-card.selected-purple::before { background: var(--accent-violet); }

.module-icon,
.mod-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.module-card .mod-icon .material-symbols-rounded {
  font-size: 18px;
  line-height: 1;
}

.module-name,
.mod-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 3px;
  letter-spacing: -0.2px;
}

.module-desc,
.mod-desc {
  font-size: 10.5px;
  color: var(--text-muted);
  line-height: 1.5;
}

.module-card .mod-name,
.module-card .mod-desc {
  color: var(--text) !important;
}

.module-card .mod-desc {
  color: var(--text-muted) !important;
}

#card_fusion .mod-icon { background: rgba(56,178,172,0.12) !important; color: var(--accent-teal) !important; border-color: transparent !important; }
#card_variant .mod-icon { background: rgba(79,163,209,0.12) !important; color: var(--accent-blue) !important; border-color: transparent !important; }
#card_lineage .mod-icon { background: rgba(224,82,82,0.12) !important; color: var(--accent-red) !important; border-color: transparent !important; }
#card_subtype .mod-icon { background: rgba(232,168,56,0.12) !important; color: var(--accent-amber) !important; border-color: transparent !important; }
#card_full .mod-icon { background: rgba(139,108,216,0.12) !important; color: var(--accent-violet) !important; border-color: transparent !important; }

.module-card.selected-teal,
.module-card.selected-blue,
.module-card.selected-pink,
.module-card.selected-amber,
.module-card.selected-purple {
  color: #fff !important;
  transform: translateY(-1px);
}

.module-card.selected-teal {
  border-color: var(--accent-teal) !important;
  background: linear-gradient(180deg, #38b2ac, #23807c) !important;
  box-shadow: 0 0 0 1px rgba(56,178,172,0.48) inset, 0 10px 22px rgba(56,178,172,0.22) !important;
}
.module-card.selected-blue {
  border-color: var(--accent-blue) !important;
  background: linear-gradient(180deg, #4fa3d1, #327395) !important;
  box-shadow: 0 0 0 1px rgba(79,163,209,0.48) inset, 0 10px 22px rgba(79,163,209,0.22) !important;
}
.module-card.selected-pink {
  border-color: var(--accent-red) !important;
  background: linear-gradient(180deg, #e05252, #9e3b3b) !important;
  box-shadow: 0 0 0 1px rgba(224,82,82,0.48) inset, 0 10px 22px rgba(224,82,82,0.2) !important;
}
.module-card.selected-amber {
  border-color: var(--accent-amber) !important;
  background: linear-gradient(180deg, #e8a838, #9b6e22) !important;
  box-shadow: 0 0 0 1px rgba(232,168,56,0.48) inset, 0 10px 22px rgba(232,168,56,0.2) !important;
}
.module-card.selected-purple {
  border-color: var(--accent-violet) !important;
  background: linear-gradient(180deg, #8b6cd8, #5d4990) !important;
  box-shadow: 0 0 0 1px rgba(139,108,216,0.48) inset, 0 10px 22px rgba(139,108,216,0.2) !important;
}

.module-card.selected-teal .mod-name,
.module-card.selected-blue .mod-name,
.module-card.selected-pink .mod-name,
.module-card.selected-amber .mod-name,
.module-card.selected-purple .mod-name {
  color: #ffffff !important;
}

.module-card.selected-teal .mod-desc,
.module-card.selected-blue .mod-desc,
.module-card.selected-pink .mod-desc,
.module-card.selected-amber .mod-desc,
.module-card.selected-purple .mod-desc {
  color: rgba(255,255,255,0.9) !important;
}

.module-card.selected-teal .mod-icon,
.module-card.selected-blue .mod-icon,
.module-card.selected-pink .mod-icon,
.module-card.selected-amber .mod-icon,
.module-card.selected-purple .mod-icon {
  background: rgba(255,255,255,0.18) !important;
  border: 1px solid rgba(255,255,255,0.4) !important;
  color: #ffffff !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}

.module-card.selected-teal .mod-icon .material-symbols-rounded,
.module-card.selected-blue .mod-icon .material-symbols-rounded,
.module-card.selected-pink .mod-icon .material-symbols-rounded,
.module-card.selected-amber .mod-icon .material-symbols-rounded,
.module-card.selected-purple .mod-icon .material-symbols-rounded {
  font-variation-settings: "FILL" 1, "wght" 650, "GRAD" 0, "opsz" 24;
}

.home-module-card {
  appearance: none;
}

.home-module-card[style*="linear-gradient"] .module-name {
  color: #ffffff !important;
}

.home-module-card[style*="linear-gradient"] .module-desc {
  color: rgba(255,255,255,0.9) !important;
}

.home-module-card[style*="linear-gradient"] .module-icon {
  background: rgba(255,255,255,0.16) !important;
  color: #ffffff !important;
}

.module-detail {
  padding: 0;
  overflow: hidden;
}

.detail-header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.detail-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--accent-amber);
  background: rgba(232,168,56,0.08);
  border: 1px solid rgba(232,168,56,0.2);
  padding: 3px 8px;
  border-radius: 4px;
  margin-bottom: 8px;
}

.detail-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--text);
  margin-bottom: 4px;
}

.detail-subtitle {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 560px;
}

.detail-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
  flex-shrink: 0;
}

.badge {
  font-family: var(--font-mono) !important;
  font-size: 10px;
  color: var(--text-dim);
  background: var(--surface2);
  border: 1px solid var(--border);
  padding: 2px 7px;
  border-radius: 4px;
  display: inline-block;
  white-space: nowrap;
}

.badge-blue  { color: var(--accent-blue);   background: rgba(79,163,209,0.08);  border-color: rgba(79,163,209,0.2); }
.badge-teal  { color: var(--accent-teal);   background: rgba(56,178,172,0.08);  border-color: rgba(56,178,172,0.2); }
.badge-amber { color: var(--accent-amber);  background: rgba(232,168,56,0.08);  border-color: rgba(232,168,56,0.2); }
.badge-red   { color: var(--accent-red);    background: rgba(224,82,82,0.08);   border-color: rgba(224,82,82,0.2); }
.badge-green { color: var(--accent-green);  background: rgba(72,187,120,0.08);  border-color: rgba(72,187,120,0.2); }
.badge-violet{ color: var(--accent-violet); background: rgba(139,108,216,0.08); border-color: rgba(139,108,216,0.2); }

.workflow-steps {
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  padding: 8px 0;
  min-height: 168px;
}

.wf-step {
  flex: 1;
  min-width: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
}

.wf-node {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
}

.wf-node svg {
  width: 18px;
  height: 18px;
}

.wf-step.active .wf-node {
  border-color: rgba(232,168,56,0.4);
  background: rgba(232,168,56,0.06);
  color: var(--accent-amber);
  box-shadow: 0 0 16px rgba(232,168,56,0.08);
}

.home-wf-node {
  width: 110px !important;
  height: 110px !important;
  padding: 5px;
}

.home-workflow-step-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
}

#home-panel-workflow .panel {
  min-height: 190px;
  display: flex;
  align-items: center;
}

#home-panel-workflow .workflow-steps {
  width: 100%;
}

.home-collapsible {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
}

.home-collapsible + .home-collapsible,
.home-collapsible + .bottom-row,
.bottom-row + .home-collapsible {
  margin-top: 2px;
}

.home-collapsible-header {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 10px 14px;
  background: var(--surface2);
  border-bottom: 1px solid transparent;
  font-size: 11px;
  color: var(--text-muted);
  user-select: none;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.home-collapsible-header:hover {
  color: var(--text);
  border-bottom-color: var(--border-active);
}

.home-collapsible-header::-webkit-details-marker {
  display: none;
}

.home-collapsible-icon {
  font-size: 16px;
  line-height: 1;
  transition: transform 0.15s ease;
}

.home-collapsible[open] .home-collapsible-icon {
  transform: rotate(90deg);
}

.home-collapsible-body {
  padding: 10px;
}

.wf-name {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
  text-align: center;
}

.wf-sub {
  font-size: 9.5px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  text-align: center;
}

.wf-arrow {
  color: color-mix(in srgb, var(--text-muted) 70%, var(--accent-blue) 30%);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
  margin: 0 2px 18px;
  opacity: 0.92;
}

.bottom-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.ref-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.ref-item:last-child { border-bottom: none; }

.ref-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ref-text {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}

.ref-text strong {
  color: var(--text);
  font-weight: 500;
}

.ref-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  flex-shrink: 0;
}

.qc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.metric-box,
.stat-box {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 10px 12px;
  text-align: left;
}

.metric-label,
.stat-lbl {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.metric-value,
.stat-num {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.5px;
  line-height: 1;
  color: var(--text);
}

.metric-sub {
  font-size: 9.5px;
  color: var(--text-dim);
  margin-top: 2px;
}

.disclaimer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(224,82,82,0.04);
  border: 1px solid rgba(224,82,82,0.12);
  border-radius: 8px;
  font-size: 10.5px;
  color: var(--text-muted);
  line-height: 1.5;
}

.disclaimer strong { color: var(--accent-red); }

.footer-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 10px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  border-top: 1px solid var(--border);
  margin-top: auto;
}

.btn-primary,
.run-btn,
.gen-btn,
.rpt-findings-add-row {
  background: var(--accent-blue) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 7px !important;
  padding: 8px 18px !important;
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}

.run-btn:hover,
.gen-btn:hover,
.rpt-findings-add-row:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

.btn-hema-primary {
  background: var(--accent-blue) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 7px !important;
  padding: 8px 18px !important;
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: opacity 0.15s !important;
  display: inline-flex !important;
  align-items: center !important;
}

.btn-hema-primary:hover {
  opacity: 0.85 !important;
}

.btn-hema-secondary {
  background: transparent !important;
  color: var(--text-muted) !important;
  border: 1px solid var(--border) !important;
  border-radius: 7px !important;
  padding: 7px 16px !important;
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  cursor: pointer !important;
  transition: border-color 0.15s, color 0.15s !important;
}

.btn-hema-secondary:hover {
  border-color: var(--border-active) !important;
  color: var(--text) !important;
}

.btn-hema-danger {
  background: rgba(224,82,82,0.1) !important;
  color: var(--accent-red) !important;
  border: 1px solid rgba(224,82,82,0.25) !important;
  border-radius: 7px !important;
  padding: 7px 16px !important;
  font-size: 12px !important;
  cursor: pointer !important;
}

.theme-btn,
.btn-secondary,
.dl-btn,
.samples-subsection-pill,
.browser-nav-btn,
.browser-category-btn,
.browser-resource-btn,
.browser-internal-tab-btn,
.browser-internal-tab-close {
  background: transparent !important;
  color: var(--text-muted) !important;
  border: 1px solid var(--border) !important;
  border-radius: 7px !important;
  padding: 7px 16px !important;
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.theme-btn:hover,
.btn-secondary:hover,
.dl-btn:hover {
  border-color: var(--border-active) !important;
  color: var(--text) !important;
  background: rgba(79,163,209,0.07) !important;
}

.theme-btn-danger,
.btn-danger,
.stop-btn-inline,
.app-confirm-submit-stop {
  background: rgba(224,82,82,0.1) !important;
  color: var(--accent-red) !important;
  border: 1px solid rgba(224,82,82,0.25) !important;
  border-radius: 7px !important;
}

.theme-btn-danger:hover,
.btn-danger:hover,
.stop-btn-inline:hover {
  background: rgba(224,82,82,0.18) !important;
  border-color: rgba(224,82,82,0.45) !important;
}

#generate-report-btn {
  background: var(--accent-amber) !important;
  color: #000 !important;
}

input,
select,
textarea,
.theme-input,
.path-input,
.rpt-input,
.Select-control,
.Select-menu-outer,
.Select-menu,
.browser-url-input,
.samples-search-input,
.samples-group-name-input,
.notes-editor-input {
  background: color-mix(in srgb, var(--input-bg) 94%, var(--bg1) 6%) !important;
  border: 1px solid color-mix(in srgb, var(--input-border) 92%, transparent 8%) !important;
  border-radius: 10px !important;
  color: var(--text) !important;
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 0.16s ease, background 0.16s ease !important;
}

input,
select,
textarea,
.theme-input,
.path-input,
.rpt-input,
.browser-url-input,
.samples-search-input,
.samples-group-name-input {
  padding: 8px 12px !important;
}

input::placeholder,
textarea::placeholder,
.path-input::placeholder,
.theme-input::placeholder,
.browser-url-input::placeholder {
  color: var(--text-dim) !important;
}

input:focus,
select:focus,
textarea:focus,
.theme-input:focus,
.path-input:focus,
.rpt-input:focus,
.browser-url-input:focus,
.Select-control:hover,
.Select-control.is-focused {
  border-color: var(--border-active) !important;
  box-shadow: none !important;
  background: color-mix(in srgb, var(--input-bg) 96%, var(--bg1) 4%) !important;
}

.theme-input,
.path-input,
.rpt-input,
.browser-url-input,
.app-confirm-text-input,
.date-field-wrapper .date-display-input,
.color-hex-input.appearance-hex-input {
  min-height: 25px !important;
  height: 25px !important;
}

textarea,
.field-textarea,
.notes-editor-input {
  min-height: 110px;
  padding: 12px 14px !important;
  line-height: 1.58 !important;
}

.Select-option,
.VirtualizedSelectOption {
  color: var(--text-muted) !important;
  font-size: 12px !important;
}

.Select-option:hover,
.Select-option.is-focused,
.VirtualizedSelectFocusedOption {
  background: rgba(79,163,209,0.08) !important;
  color: var(--text) !important;
}

.Select-value-label,
.VirtualizedSelectSelectedOption {
  color: var(--text) !important;
}

label,
.rpt-label,
.toggle-label,
.sys-toggle-label {
  color: var(--text-muted) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  margin-bottom: 4px;
}

.upload-box,
#target-panel-upload,
.upload-zone {
  border: 1.5px dashed var(--border-active) !important;
  border-radius: 10px !important;
  background: var(--surface) !important;
  padding: 24px !important;
}

.upload-box:hover,
#target-panel-upload:hover,
.upload-zone:hover {
  background: var(--surface2) !important;
}

.format-tag {
  border: 1px solid var(--border) !important;
  border-radius: 7px !important;
  color: var(--text-muted) !important;
  background: var(--surface2) !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  padding: 4px 8px !important;
}

.format-tag:hover {
  border-color: var(--border-active) !important;
  color: var(--text) !important;
}

.analysis-main-wrap .analysis-format-tags .format-tag {
  position: relative;
}

.analysis-main-wrap .analysis-format-tags .format-tag.format-tag-selected {
  border-color: rgba(31, 201, 146, 0.92) !important;
  background:
    linear-gradient(180deg, rgba(29, 158, 117, 0.30), rgba(29, 158, 117, 0.14)) !important;
  color: #eafff6 !important;
  box-shadow:
    0 0 0 1px rgba(31, 201, 146, 0.42),
    0 0 16px rgba(31, 201, 146, 0.36),
    inset 0 0 14px rgba(31, 201, 146, 0.12) !important;
  text-shadow: 0 0 8px rgba(31, 201, 146, 0.62);
}

.analysis-main-wrap .analysis-format-tags .format-tag.format-tag-selected:hover,
.analysis-main-wrap .analysis-format-tags .format-tag.format-tag-selected:focus-visible {
  border-color: rgba(68, 241, 181, 0.98) !important;
  box-shadow:
    0 0 0 1px rgba(68, 241, 181, 0.55),
    0 0 20px rgba(68, 241, 181, 0.44),
    inset 0 0 16px rgba(31, 201, 146, 0.18) !important;
}

.data-table,
.findings-ag-grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.dash-table-container .dash-spreadsheet-container,
.dash-table-container .dash-spreadsheet-inner {
  background: var(--surface) !important;
}

.dash-table-container th {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-dim) !important;
}

.dash-table-container td {
  color: var(--text-muted) !important;
}

.caller-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--caller-accent);
  border-radius: 0 10px 10px 0;
  padding: 16px 20px;
}

.caller-panel.arriba { --caller-accent: var(--accent-teal); }
.caller-panel.cicero { --caller-accent: var(--accent-blue); }
.caller-panel.fusioncatcher { --caller-accent: var(--accent-amber); }
.caller-panel.rascall { --caller-accent: var(--accent-violet); }

.caller-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 10px;
}

.arriba .caller-title { color: var(--accent-teal); }
.cicero .caller-title { color: var(--accent-blue); }
.fusioncatcher .caller-title { color: var(--accent-amber); }
.rascall .caller-title { color: var(--accent-violet); }

.impact-high { color: var(--accent-red) !important; font-weight: 600; }
.impact-moderate { color: var(--accent-amber) !important; }
.impact-low { color: var(--accent-teal) !important; }
.vaf-value { font-family: var(--font-mono); color: var(--accent-blue); }

.ag-theme-alpine,
.ag-theme-alpine-dark {
  --ag-background-color: var(--surface);
  --ag-header-background-color: var(--surface2);
  --ag-foreground-color: var(--text-muted);
  --ag-header-foreground-color: var(--text-dim);
  --ag-border-color: rgba(255,255,255,0.06);
  --ag-row-hover-color: rgba(79,163,209,0.08);
  --ag-selected-row-background-color: rgba(79,163,209,0.08);
  --ag-font-family: 'DM Sans', sans-serif;
  --ag-font-size: 12px;
}

#sys-fix-log,
#sys-last-run-log,
.job-progress-log,
.job-log,
.log-panel,
.inspector-code-block,
.inspector-match-pre {
  background: #050709 !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 14px 16px !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  color: var(--text-dim) !important;
  line-height: 1.7;
  max-height: 320px;
  overflow-y: auto;
}

.progress-track {
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
  margin: 6px 0;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(to right, var(--accent-teal), var(--accent-blue));
  border-radius: 2px;
  transition: width 0.4s ease;
}

.job-progress-title,
.progress-pct,
.progress-msg,
.job-progress-detail {
  color: var(--text-muted) !important;
  font-family: var(--font-mono) !important;
}

.samples-status-icon-chip,
.result-badge,
.tab-samples-module-badge {
  border-radius: 4px !important;
  font-family: var(--font-mono) !important;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -8px;
  margin-left: -8px;
}

.row > * {
  padding-right: 8px;
  padding-left: 8px;
  max-width: 100%;
}

.col { flex: 1 0 0%; }
.col-1 { flex: 0 0 auto; width: 8.333333%; }
.col-2 { flex: 0 0 auto; width: 16.666667%; }
.col-3 { flex: 0 0 auto; width: 25%; }
.col-4 { flex: 0 0 auto; width: 33.333333%; }
.col-5 { flex: 0 0 auto; width: 41.666667%; }
.col-6 { flex: 0 0 auto; width: 50%; }
.col-7 { flex: 0 0 auto; width: 58.333333%; }
.col-8 { flex: 0 0 auto; width: 66.666667%; }
.col-9 { flex: 0 0 auto; width: 75%; }
.col-10 { flex: 0 0 auto; width: 83.333333%; }
.col-11 { flex: 0 0 auto; width: 91.666667%; }
.col-12 { flex: 0 0 auto; width: 100%; }

.nav {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.nav-link {
  display: block;
  text-decoration: none;
}

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

.form-switch .form-check-input,
input.form-check-input[type="checkbox"] {
  appearance: none;
  width: 34px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface2);
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
}

.form-switch .form-check-input::after,
input.form-check-input[type="checkbox"]::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  left: 1px;
  top: 1px;
  border-radius: 50%;
  background: #06080f !important;
  transition: transform 0.2s ease;
}

.form-switch .form-check-input:checked,
input.form-check-input[type="checkbox"]:checked {
  background: rgba(79,163,209,0.22);
  border-color: rgba(79,163,209,0.55);
}

.form-switch .form-check-input:checked::after,
input.form-check-input[type="checkbox"]:checked::after {
  transform: translateX(16px);
  background: #06080f !important;
}

.mb-3 { margin-bottom: 1rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.ms-2 { margin-left: 0.5rem !important; }

@media (max-width: 1280px) {
  .modules-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 992px) {
  #page-content.content { padding: var(--tab-content-top-gap) var(--tab-content-right-gap) var(--tab-content-bottom-gap) var(--tab-content-left-gap) !important; }
  #content-home > .home-main-wrap { min-height: calc(100vh - 48px - 48px); }
  .appearance-custom-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bottom-row { grid-template-columns: 1fr; }
  .modules-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .topbar-version,
  .topbar-genome,
  .topbar-user-shell { display: none; }
  .home-description-reset-content { flex-direction: column; gap: 8px; }
  .home-description-logo { height: 52px; margin-top: 0; }
  .appearance-picker-grid-theme,
  .appearance-picker-grid-accent,
  .appearance-custom-grid { grid-template-columns: 1fr; }
  .modules-grid { grid-template-columns: 1fr; }
  .detail-header { flex-direction: column; }
  .detail-meta { align-items: flex-start; }
  .qc-grid { grid-template-columns: 1fr; }
  .footer-line {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .col-3,
  .col-4,
  .col-5,
  .col-6,
  .col-7,
  .col-8,
  .col-9,
  .col-10,
  .col-11 {
    width: 100%;
  }
}

/* =========================================
   Clinical Report Tab Refresh
   ========================================= */
.report-tab-wrap {
  padding-bottom: 16px;
  position: relative;
}

.report-two-panel {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.report-generated-panel {
  width: 340px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--sidebar-bg);
  border: 1px solid color-mix(in srgb, var(--accent-blue) 26%, var(--border) 74%);
  border-radius: 10px;
  overflow: hidden;
  max-height: calc(100vh - 70px);
  position: sticky;
  top: calc(48px + 8px);
}

.report-generated-right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding-bottom: 12px;
}

.report-generated-header {
  padding: 20px 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent-blue) 18%, var(--border) 82%);
}

.report-generated-eyebrow {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--accent-teal);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.report-generated-title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--fg);
}

.report-generated-count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg3);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.report-generated-search-shell {
  padding: 14px 14px 16px;
  flex-shrink: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--accent-blue) 14%, var(--border) 86%);
}

.report-generated-search-frame {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  border-radius: 9px;
  background: var(--panel-bg);
  border: 1px solid color-mix(in srgb, var(--accent-blue) 22%, var(--border) 78%);
  padding: 6px 8px;
}

.report-generated-search-icon {
  width: 18px;
  text-align: center;
  color: var(--fg3);
  font-size: 12px;
  flex-shrink: 0;
}

.report-generated-search-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  color: var(--fg);
  font-size: 11px;
  font-family: var(--font-mono);
  border: none;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

.report-generated-search-input::placeholder {
  color: var(--fg3);
}

.report-generated-search-clear {
  height: 20px;
  min-width: 36px;
  padding: 0 8px;
  border-radius: 6px;
  background: transparent;
  color: var(--fg3);
  font-size: 10px;
  font-family: var(--font-mono);
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}

.report-generated-search-clear:hover {
  color: var(--fg);
  background: var(--input-bg);
}

.report-generated-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
}

.report-generated-list::-webkit-scrollbar {
  width: 3px;
}

.report-generated-list::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 2px;
}

.report-generated-row {
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent-blue) 12%, var(--border) 88%);
}

.report-generated-row:last-child {
  border-bottom: none;
}

.report-generated-row:hover {
  background: var(--panel-bg);
}

.report-generated-row-name {
  font-size: 12px;
  color: var(--fg2);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.report-generated-row-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg3);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.report-generated-row-ext {
  font-size: 9px;
  color: var(--accent-blue);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.report-generated-row-ext-pdf {
  color: var(--accent-red);
}

.report-builder-header-spacer {
  flex: 1;
}

.report-tab-wrap .report-generate-btn {
  background: linear-gradient(180deg, #ffd95a, #f1b91f) !important;
  color: #161006 !important;
  font-weight: 700 !important;
  border: 1px solid #e1ad17 !important;
  box-shadow: 0 4px 14px rgba(241, 185, 31, 0.28) !important;
}

.report-floating-strip {
  position: fixed;
  left: var(--sidebar-w);
  right: 0;
  top: 48px;
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 0;
  padding: 10px 24px;
  background: color-mix(in srgb, var(--surface) 94%, #06080d 6%);
  border: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent-violet) 16%, var(--border) 84%);
  border-radius: 0;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.report-floating-strip.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.report-floating-strip-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.report-floating-strip-kicker {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 1px;
  color: var(--accent-teal);
  text-transform: uppercase;
}

.report-floating-strip-title {
  color: var(--text);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.report-floating-strip-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.report-floating-strip-actions .btn-hema-secondary,
.report-floating-strip-actions .report-generate-btn {
  min-height: 36px;
  line-height: 1.2 !important;
  padding: 8px 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 9px !important;
  white-space: nowrap;
}

.report-gen-toast {
  margin-top: 8px;
  margin-bottom: 2px;
  font-size: 11px;
  color: var(--text);
}

.report-config-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 4px;
}

.report-header-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: start;
  width: 100%;
  max-width: 100%;
}

.report-header-row > * {
  min-width: 0;
}

.report-header-row .page-header {
  padding-bottom: 0;
  margin-bottom: 0;
}

.report-command-bar {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(245px, 1fr) 156px minmax(210px, 1.08fr) auto;
  align-items: stretch;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 11px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--surface) 94%, var(--surface2) 6%),
    color-mix(in srgb, var(--surface) 88%, #111725 12%)
  );
  border: 1px solid color-mix(in srgb, var(--border) 90%, var(--surface2) 10%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 10px 28px rgba(7, 8, 16, 0.3);
}

.report-header-row .report-command-bar {
  width: 100%;
  max-width: 100%;
  margin: 20px 0;
}

.report-command-cell {
  --field-shell-fill: color-mix(in srgb, var(--surface) 92%, var(--surface2) 8%);
  --material-field-label-bg: transparent;
  min-width: 0;
  min-height: 40px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  padding: 10px 12px 6px;
  border: 1px solid color-mix(in srgb, var(--border) 90%, var(--surface2) 10%);
  border-radius: 12px;
  background: var(--field-shell-fill);
  overflow: visible;
  transition: border-color 0.14s ease, background 0.14s ease;
}

.report-command-cell:hover,
.report-command-cell:focus-within {
  border-color: color-mix(in srgb, var(--border2, var(--border)) 44%, var(--border) 56%);
}

.report-command-autofill {
  min-width: 240px;
}

.report-command-format {
  min-width: 150px;
}

.report-command-filename {
  min-width: 210px;
}

.report-command-input {
  min-height: 24px;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.report-command-filename-input,
#rpt-filename {
  all: unset;
  box-sizing: border-box;
  display: block;
  flex: 1 1 auto;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  outline: none !important;
  color: var(--text) !important;
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  line-height: 24px !important;
  caret-color: var(--text) !important;
  text-align: left !important;
  direction: ltr !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.report-command-filename-input::placeholder,
#rpt-filename::placeholder {
  color: var(--text-dim) !important;
}

.report-command-filename-input:focus,
.report-command-filename-input:focus-visible,
#rpt-filename:focus,
#rpt-filename:focus-visible {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  outline: none !important;
}

.report-command-bar .field-label,
.report-command-bar .report-config-card-label {
  position: absolute;
  top: -9px;
  left: 12px;
  z-index: 2;
  margin: 0 !important;
  min-height: 0;
  display: flex;
  align-items: center;
  padding: 0 8px;
  background: var(--field-shell-fill, var(--surface)) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.85px;
  line-height: 1.1;
}

.report-command-autofill .autofill-success {
  position: absolute;
  top: -7px;
  right: 12px;
  z-index: 2;
  margin: 0;
  min-height: 0;
  max-width: min(52%, 280px);
  padding: 0;
  background: transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#rpt-sample-selector .Select-menu-outer {
  min-width: 540px;
  max-width: min(78vw, 760px);
}

#rpt-sample-selector .Select-option {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.report-command-autofill .autofill-success:empty {
  display: none;
}

.report-command-autofill .autofill-success .autofill-legend {
  padding: 0 6px;
  background: var(--field-shell-fill, var(--surface)) !important;
  max-width: 100%;
}

.report-command-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: nowrap;
  min-width: max-content;
  align-self: stretch;
}

.report-command-actions .btn-hema-secondary,
.report-command-actions .report-generate-btn {
  min-height: 36px;
  padding: 8px 12px !important;
  border-radius: 9px !important;
  white-space: nowrap;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto;
  line-height: 1.2 !important;
  text-align: center !important;
}

@media (max-width: 1500px) {
  .report-command-bar {
    grid-template-columns: minmax(205px, 0.92fr) 144px minmax(195px, 1fr) auto;
  }
}

@media (max-width: 1180px) {
  .report-command-bar {
    grid-template-columns: minmax(180px, 0.86fr) 132px minmax(185px, 0.98fr);
  }

  .report-command-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

.report-config-card {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent-violet) 24%, var(--surface) 76%),
    color-mix(in srgb, var(--accent-violet) 12%, #12121f 88%)
  );
  border: 1px solid color-mix(in srgb, var(--accent-violet) 44%, var(--border) 56%);
  border-radius: 10px;
  padding: 16px 18px;
  box-shadow: inset 0 1px 0 rgba(186, 138, 255, 0.1);
}

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

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

.report-config-actions .btn-hema-secondary,
.report-config-actions .report-generate-btn {
  min-height: 34px;
  line-height: 1.2 !important;
  padding: 8px 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  white-space: nowrap;
}

.report-config-card-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.report-config-card-label .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-violet);
}

.date-field-wrapper {
  position: relative;
  width: 100%;
  color-scheme: dark;
}

.date-field-wrapper .date-display-input {
  width: 100%;
  background: color-mix(in srgb, var(--input-bg) 94%, var(--bg1) 6%) !important;
  border: 1px solid color-mix(in srgb, var(--input-border) 92%, transparent 8%) !important;
  border-radius: 10px !important;
  color: var(--text) !important;
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  padding: 8px 194px 8px 12px !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 0.15s !important;
  cursor: text !important;
}

.date-field-wrapper .date-display-input:focus {
  border-color: var(--border-active) !important;
}

.date-field-wrapper .date-display-input::placeholder {
  color: var(--text-dim) !important;
}

.date-native-input {
  position: absolute !important;
  inset: 0 !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  color: transparent !important;
  box-shadow: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  color-scheme: dark !important;
  z-index: 0 !important;
  overflow: hidden !important;
}

.date-native-input::-webkit-calendar-picker-indicator {
  display: none !important;
}

/* ── Calendar popup ─────────────────────────────────────── */
.hema-cal-popup {
  position: fixed;
  z-index: 9999;
  width: 252px;
  background: color-mix(in srgb, var(--surface) 96%, #06080d 4%);
  border: 1px solid color-mix(in srgb, var(--accent-violet) 22%, var(--border) 78%);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
  padding: 10px;
  user-select: none;
}

.hema-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.hema-cal-month-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.2px;
}

.hema-cal-nav {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 5px;
  transition: background 0.12s, color 0.12s;
}
.hema-cal-nav:hover {
  background: var(--surface2);
  color: var(--text);
}

.hema-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.hema-cal-dow {
  font-size: 9px;
  font-family: var(--font-mono);
  color: var(--text-dim);
  text-align: center;
  padding: 3px 0 4px;
  letter-spacing: 0.3px;
}

.hema-cal-empty {
  display: block;
}

.hema-cal-day {
  background: none;
  border: none;
  border-radius: 5px;
  color: var(--text-muted);
  font-size: 11px;
  font-family: var(--font-sans);
  cursor: pointer;
  padding: 5px 0;
  text-align: center;
  transition: background 0.1s, color 0.1s;
  line-height: 1;
}
.hema-cal-day:hover {
  background: var(--surface2);
  color: var(--text);
}
.hema-cal-day.today {
  color: var(--accent-teal);
  font-weight: 600;
}
.hema-cal-day.selected {
  background: var(--accent-blue);
  color: #fff;
  font-weight: 600;
}
.hema-cal-day.today.selected {
  background: var(--accent-teal);
}

.date-format-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) !important;
  height: 22px;
  width: 90px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--surface2) 38%, var(--border) 62%);
  background: color-mix(in srgb, var(--surface) 78%, var(--surface2) 22%);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 9px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 4;
  transition: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  box-shadow: none !important;
  margin: 0 !important;
}

.date-format-btn {
  right: 8px;
  padding: 0 8px;
  letter-spacing: 0.35px;
}

.date-today-btn {
  right: 130px;
  width: 56px;
}

.date-today-btn:hover,
.date-today-btn:focus-visible,
.date-today-btn:active {
  transform: translateY(-50%) !important;
}

.date-field-wrapper .date-format-btn:not(.date-today-btn) {
  right: 32px;
}

.date-format-btn:hover {
  color: var(--text);
  border-color: var(--border-active);
  background: color-mix(in srgb, var(--surface) 66%, var(--surface2) 34%);
  transition: none !important;
}

.date-format-btn:focus-visible {
  outline: none;
  border-color: var(--border-active);
  transform: translateY(-50%) !important;
  box-shadow: none !important;
}

.date-format-btn:active {
  transform: translateY(-50%) !important;
  transition: none !important;
}

.autocomplete-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  z-index: 1;
  overflow: visible;
}

.autocomplete-wrapper:focus-within {
  z-index: 25;
}

.autocomplete-wrapper:focus-within .autocomplete-dropdown {
  display: block;
}

.autocomplete-wrapper .field-input {
  flex: 1;
  padding-right: 34px !important;
}

.autocomplete-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--surface2);
  border: 1px solid var(--border-active);
  border-radius: 8px;
  z-index: 3200;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  max-height: 208px;
  overflow-y: auto;
  display: none;
}

.autocomplete-dropdown.open {
  display: block;
}

.autocomplete-dropdown::-webkit-scrollbar {
  width: 3px;
}

.autocomplete-dropdown::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 2px;
}

.autocomplete-option-shell {
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}

.autocomplete-option-shell:last-child {
  border-bottom: none;
}

.autocomplete-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 38px;
  padding: 7px 12px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
  background: transparent;
  border: none;
  text-align: left;
}

.autocomplete-option:hover,
.autocomplete-option.kbd-focused {
  background: rgba(79,163,209,0.08);
  color: var(--text);
}

.ac-text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ac-text mark {
  background: transparent;
  color: var(--accent-blue);
  font-weight: 600;
}

.ac-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 5px;
  flex-shrink: 0;
  color: var(--text-dim);
  white-space: nowrap;
  line-height: 1.4;
  vertical-align: middle;
}

.ac-tag.user {
  color: var(--accent-teal);
  border-color: rgba(56,178,172,0.25);
  background: rgba(56,178,172,0.06);
}

.ac-del {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-dim);
  border: none;
  background: transparent;
  font-size: 12px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
  padding: 0;
  line-height: 1;
  margin-right: 8px;
}

.autocomplete-option-shell:hover .ac-del {
  opacity: 1;
}

.ac-del:hover {
  color: var(--accent-red);
  background: rgba(224,82,82,0.1);
}

.ac-add-custom {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px 12px;
  font-size: 11px;
  color: var(--accent-teal);
  cursor: pointer;
  border: none;
  border-top: 1px solid var(--border);
  background: transparent;
  text-align: left;
  transition: background 0.1s;
}

.ac-add-custom:hover {
  background: rgba(56,178,172,0.06);
}

.ac-clear-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 2;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.ac-clear-btn:hover {
  color: var(--accent-red);
  background: rgba(224,82,82,0.1);
  border-color: rgba(224,82,82,0.25);
}

.date-clear-btn {
  right: 8px;
  top: 50%;
  transform: translateY(-50%) !important;
  background: color-mix(in srgb, var(--surface) 78%, var(--surface2) 22%);
  transition: none !important;
  z-index: 6;
}

.date-clear-btn:hover {
  transform: translateY(-50%) !important;
  transition: none !important;
}

.ac-empty {
  padding: 10px 12px;
  font-size: 11px;
  color: var(--text-dim);
  font-family: var(--font-mono);
}

.autofill-success {
  font-size: 11px;
  color: var(--accent-green);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  min-height: 16px;
}

.autofill-legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  font-family: var(--font-mono) !important;
  font-size: 8px !important;
  letter-spacing: 1px;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.autofill-legend-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.autofill-legend-dot {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 42%, transparent);
}

.autofill-legend-check {
  flex: 0 0 auto;
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
}

.autofill-legend-success {
  color: var(--accent-green);
  animation: autofill-legend-hide 3s ease forwards;
}

.autofill-legend-warning {
  color: var(--accent-amber);
}

.autofill-legend-muted {
  color: var(--text-dim);
}

@keyframes autofill-legend-hide {
  0% { opacity: 1; visibility: visible; }
  78% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}

.output-settings-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 10px;
}

.output-filename-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

.auto-toggle-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 3px 10px 3px 6px;
}

.report-sections-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 16px;
}

.report-section-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--section-accent, var(--border));
  border-right: 3px solid var(--section-accent, var(--border));
  border-radius: 10px;
  overflow: visible;
}

.report-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
}

.report-section-number {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 7px;
  flex-shrink: 0;
}

.report-section-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-family: var(--font-mono);
  flex: 1;
}

.report-section-body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.section-accent-teal .report-section-title {
  color: var(--accent-teal);
}

.section-accent-blue .report-section-title {
  color: var(--accent-blue);
}

.section-accent-red .report-section-title {
  color: var(--accent-red);
}

.section-accent-amber .report-section-title {
  color: var(--accent-amber);
}

.section-accent-violet .report-section-title {
  color: var(--accent-violet);
}

.section-include-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-weight: 600;
  margin-left: auto;
}

.rpt-section-switch {
  transform: scale(0.84);
  margin: 0;
}

/* Report include toggles: high contrast ON/OFF so thumb is always visible */
.section-include-toggle .form-check {
  margin: 0;
  min-height: 0;
}

.section-include-toggle .form-check-input {
  width: 38px;
  height: 20px;
  border: 1px solid color-mix(in srgb, var(--accent-blue) 42%, var(--border) 58%) !important;
  background-color: color-mix(in srgb, #0e1524 86%, var(--surface2) 14%) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
  background-image: none !important;
  background-repeat: no-repeat;
  background-position: left 2px center;
  background-size: 0 0;
  transition: background-position .18s ease, background-color .18s ease, border-color .18s ease;
}

.section-include-toggle .form-check-input::after {
  left: 2px;
  top: 2px;
  width: 14px;
  height: 14px;
  background: #06080f !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.16);
}

.section-include-toggle .form-check-input:checked {
  background-color: #1ea179 !important;
  border-color: color-mix(in srgb, #86efcf 62%, #1ea179 38%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.2),
    0 0 0 1px rgba(63,207,159,0.28);
}

.section-include-toggle .form-check-input:checked::after {
  transform: translateX(18px);
  background: #06080f !important;
}

.section-include-toggle .form-check-input:not(:checked) {
  background-color: color-mix(in srgb, #10192a 88%, var(--surface2) 12%) !important;
}

.section-include-toggle .form-check-input:focus-visible {
  outline: 1px solid color-mix(in srgb, #7de6c6 64%, var(--accent-blue) 36%);
  outline-offset: 1px;
}

.report-section-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.field-group {
  --field-shell-fill: color-mix(in srgb, var(--surface) 86%, var(--surface2) 14%);
  --material-field-bg: var(--field-shell-fill);
  --material-field-border: color-mix(in srgb, var(--input-border) 92%, transparent 8%);
  --material-field-label-bg: var(--panel-bg);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  padding: 10px 12px 6px;
  border: 1px solid var(--material-field-border);
  border-radius: 12px;
  background: var(--material-field-bg);
  overflow: visible;
  transition: border-color 0.14s ease, background 0.14s ease;
}

.field-group:hover,
.field-group:focus-within {
  border-color: color-mix(in srgb, var(--section-accent, var(--border-active)) 52%, var(--material-field-border) 48%);
}

.field-label {
  position: absolute;
  top: -9px;
  left: 12px;
  z-index: 2;
  margin: 0 !important;
  padding: 0 8px;
  background: var(--material-field-label-bg);
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--text-dim) !important;
  text-transform: uppercase;
  letter-spacing: 0.85px;
  line-height: 1.1;
}

.field-input {
  background: transparent !important;
  border: none !important;
  border-radius: 10px !important;
  color: var(--text) !important;
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  padding: 8px 12px !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 0.15s !important;
  width: 100%;
}

.field-input:focus {
  border-color: var(--border-active) !important;
}

.field-input::placeholder {
  color: var(--text-dim);
}

.field-textarea {
  background: color-mix(in srgb, var(--input-bg) 94%, var(--bg1) 6%);
  border: 1px solid color-mix(in srgb, var(--input-border) 92%, transparent 8%);
  border-radius: 10px;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.6;
  padding: 10px 12px;
  width: 100%;
  min-height: 120px;
  resize: vertical;
  outline: none;
  box-shadow: none !important;
  transition: border-color 0.15s;
}

.field-textarea:focus {
  border-color: var(--border-active);
}

.field-group > .field-input,
.field-group > .field-textarea,
.field-group > button.rpt-dark-dropdown.field-input {
  width: 100%;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.field-group > .field-input {
  min-height: 24px;
  padding: 0 !important;
}

.field-group > .field-textarea {
  min-height: 96px;
  padding: 0 !important;
}

.field-group .autocomplete-wrapper,
.field-group .date-field-wrapper {
  width: 100%;
  min-height: 24px;
}

.field-group .autocomplete-wrapper .field-input {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 24px 0 0 !important;
  min-height: 24px;
}

.field-group .date-display-input {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 194px 0 0 !important;
  min-height: 24px;
}

.field-group button.rpt-dark-dropdown.field-input {
  min-height: 24px !important;
  padding: 0 !important;
}

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

.file-browse-row .field-input,
.file-browse-row .rpt-input {
  flex: 1;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  color: var(--text-dim) !important;
}

.btn-browse {
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 7px !important;
  color: var(--text-muted) !important;
  font-size: 11px !important;
  padding: 7px 14px !important;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s;
  flex-shrink: 0;
}

.btn-browse:hover {
  border-color: var(--border-active) !important;
  color: var(--text) !important;
}

.embed-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

.embed-toggle-label {
  font-size: 11px;
  color: var(--text-muted);
  flex: 1;
}

.embed-toggle-sublabel {
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 1px;
}

.logo-upload-zone {
  border: 1.5px dashed var(--border);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
}

.logo-upload-zone:hover {
  border-color: var(--border-active);
  background: rgba(79, 163, 209, 0.04);
}

.logo-upload-zone-label {
  font-size: 11px;
  color: var(--text-dim);
}

.logo-upload-zone-sub {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--text-dim);
  opacity: 0.6;
}

.logo-upload-zone .rpt-field {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100%;
}

.logo-upload-zone .rpt-label {
  display: none;
}

.rpt-helper-note {
  font-size: 11px;
  color: var(--text-muted);
  margin: 0;
}

.report-disclaimer-block {
  display: block;
  padding: 12px 14px;
  background: rgba(224, 82, 82, 0.04);
  border: 1px solid rgba(224, 82, 82, 0.24);
  border-radius: 8px;
  font-size: 11px;
  color: var(--text);
  line-height: 1.6;
  margin-top: 4px;
  white-space: normal;
  overflow: visible;
}

.report-section-card .report-section-body {
  overflow: visible;
}

.report-section-card.section-accent-red .report-section-body {
  padding-bottom: 26px;
  overflow: visible;
}

.report-tab-wrap .rpt-findings-shell {
  border-left-width: 3px;
  border-right-width: 3px;
}

.report-tab-wrap .rpt-findings-add-row {
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 7px !important;
}

@media (max-width: 1100px) {
  .report-two-panel {
    flex-direction: column;
  }
  .report-generated-panel {
    width: 100%;
    max-height: 300px;
    position: relative;
    top: auto;
  }
  .report-config-card-head {
    align-items: flex-start;
  }
}

@media (max-width: 920px) {
  .report-header-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .report-header-row .report-command-bar {
    margin: 0 0 20px 0;
  }
  .report-command-bar {
    grid-template-columns: 1fr;
    width: 100%;
  }
  .report-command-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .report-config-row,
  .output-settings-grid,
  .report-section-pair {
    grid-template-columns: 1fr;
  }
  .report-config-card-head {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .report-config-actions {
    justify-content: flex-start;
  }
  .report-tab-wrap {
    padding-bottom: 16px;
  }
  .report-floating-strip {
    left: var(--sidebar-w);
    right: 0;
    top: 48px;
    padding: 10px 16px;
  }
  .report-floating-strip-title {
    font-size: 16px;
  }
}

/* ── Report Restorations ─────────────────────────────────────────────────── */
.report-section-card:hover,
.report-section-card:focus-within {
  border-left-color: color-mix(in srgb, var(--section-accent, var(--accent-blue)) 78%, var(--border) 22%);
  border-right-color: color-mix(in srgb, var(--section-accent, var(--accent-blue)) 78%, var(--border) 22%);
}

.report-section-card .rpt-field {
  --field-shell-fill: color-mix(in srgb, var(--surface) 84%, var(--surface2) 16%);
  --material-field-label-bg: color-mix(in srgb, var(--surface) 88%, var(--surface2) 12%);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--section-accent, var(--border)) 28%, var(--border) 72%);
  border-radius: 12px;
  background: var(--field-shell-fill);
  padding: 10px 12px 6px;
  transition: border-color 0.14s ease, background 0.14s ease;
  overflow: visible;
}

.report-section-card .rpt-field:hover,
.report-section-card .rpt-field:focus-within {
  border-color: color-mix(in srgb, var(--section-accent, var(--accent-blue)) 62%, var(--border) 38%);
  box-shadow: none !important;
}

.report-section-card .rpt-field .field-input,
.report-section-card .rpt-field .field-textarea,
.report-section-card .rpt-field button.rpt-dark-dropdown {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.report-section-card .rpt-field.report-shell-field > .report-shell-input,
.report-section-card .rpt-field.report-shell-field .autocomplete-wrapper > .report-shell-input,
.report-section-card .rpt-field.report-shell-field .date-field-wrapper > .report-shell-input,
.report-section-card .rpt-field.report-shell-field button.rpt-dark-dropdown.report-shell-input,
.report-section-card .rpt-field.report-shell-field input:not(.date-native-input),
.report-section-card .rpt-field.report-shell-field textarea {
  box-sizing: border-box;
  display: block;
  flex: 1 1 auto;
  width: 100% !important;
  min-width: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--text) !important;
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  caret-color: var(--text) !important;
}

.report-section-card .rpt-field.report-shell-field > .report-shell-input,
.report-section-card .rpt-field.report-shell-field > button.rpt-dark-dropdown.report-shell-input {
  min-height: 24px !important;
  padding: 0 !important;
}

.report-section-card .rpt-field.report-shell-field > input:not(.date-native-input) {
  min-height: 24px !important;
  padding: 0 !important;
}

.report-section-card .rpt-field.report-shell-field > textarea.report-shell-input.field-textarea {
  min-height: 96px !important;
  padding: 0 !important;
  line-height: 1.6 !important;
  resize: vertical;
}

.report-section-card .rpt-field.report-shell-field > textarea {
  min-height: 96px !important;
  padding: 0 !important;
  line-height: 1.6 !important;
  resize: vertical;
}

.report-section-card .rpt-field.report-shell-field .autocomplete-wrapper,
.report-section-card .rpt-field.report-shell-field .date-field-wrapper {
  width: 100%;
  min-height: 24px;
  background: transparent !important;
}

.report-section-card .rpt-field.report-shell-field .autocomplete-wrapper > .report-shell-input {
  min-height: 24px !important;
  padding: 0 24px 0 0 !important;
}

.report-section-card .rpt-field.report-shell-field .autocomplete-wrapper input:not(.date-native-input) {
  min-height: 24px !important;
  padding: 0 24px 0 0 !important;
}

.report-section-card .rpt-field.report-shell-field .date-field-wrapper > .date-display-input.report-shell-input {
  min-height: 24px !important;
  padding: 0 194px 0 0 !important;
  cursor: text !important;
}

.report-section-card .rpt-field.report-shell-field .date-field-wrapper input.date-display-input:not(.date-native-input) {
  min-height: 24px !important;
  padding: 0 194px 0 0 !important;
  cursor: text !important;
}

.report-section-card .rpt-field.report-shell-field .report-shell-input::placeholder {
  color: var(--text-dim) !important;
}

.report-section-card .rpt-field.report-shell-field input::placeholder,
.report-section-card .rpt-field.report-shell-field textarea::placeholder {
  color: var(--text-dim) !important;
}

.report-tab-wrap .rpt-findings-shell {
  border-left: 3px solid var(--section-accent, var(--accent-red)) !important;
  border-right: 3px solid var(--section-accent, var(--accent-red)) !important;
}

.rpt-image-field {
  gap: 6px;
}

.rpt-image-shell {
  display: grid;
  grid-template-columns: 106px 1fr 96px;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface2) 74%, var(--surface) 26%);
}

.rpt-image-add-btn {
  width: 100%;
  height: 34px;
  padding: 0 !important;
  border-radius: 8px !important;
  font-size: 12px !important;
}

.rpt-image-filename {
  min-height: 34px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 10px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: color-mix(in srgb, var(--surface) 72%, var(--surface2) 28%);
}

.rpt-image-preview-frame {
  width: 96px;
  height: 96px;
  border: 1px solid color-mix(in srgb, var(--accent-blue) 45%, var(--border) 55%);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 82%, #0a111a 18%);
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rpt-image-preview {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 6px;
}

.rpt-image-preview[src=""] {
  opacity: 0;
}

.rpt-image-saved-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.rpt-image-saved-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-dim);
}

.rpt-image-saved-list {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.rpt-saved-logo-btn {
  border: 1px solid color-mix(in srgb, var(--accent-blue) 44%, var(--border) 56%);
  background: color-mix(in srgb, var(--surface2) 74%, var(--surface) 26%);
  color: var(--text);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 10px;
  font-family: var(--font-mono);
  line-height: 1.5;
  cursor: pointer;
}

.rpt-saved-logo-btn:hover {
  border-color: color-mix(in srgb, var(--accent-teal) 70%, var(--border) 30%);
}

.rpt-saved-logo-btn.active {
  border-color: color-mix(in srgb, var(--accent-teal) 75%, var(--border) 25%);
  color: var(--accent-teal);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-teal) 34%, transparent) inset;
}

.rpt-image-saved-empty {
  font-size: 11px;
  color: var(--text-dim);
}

@media (max-width: 920px) {
  .rpt-image-shell {
    grid-template-columns: 1fr;
  }
  .rpt-image-preview-frame {
    width: 100%;
    max-width: 120px;
    justify-self: start;
  }
}

/* Keep only the top report command bar (no duplicates/floating clone) */
#content-report .report-generated-right > .report-command-bar {
  display: none !important;
}

/* ── Analyzed Samples: restore separator lines ───────────────────────────── */
#content-samples {
  --samples-sep: color-mix(in srgb, var(--border) 95%, #9aa4b2 5%);
  --samples-sep-soft: color-mix(in srgb, var(--border) 98%, #9aa4b2 2%);
  --samples-table-head-bg: color-mix(in srgb, var(--surface) 90%, #9aa4b2 10%);
}

#content-samples .samples-two-panel {
  height: calc(100vh - 48px - var(--tab-content-top-gap) - var(--tab-content-bottom-gap)) !important;
  min-height: calc(100vh - 48px - var(--tab-content-top-gap) - var(--tab-content-bottom-gap)) !important;
  border: 1px solid var(--samples-sep) !important;
  border-radius: 12px;
  overflow: hidden;
}

#content-samples .samples-left-panel {
  border-right: 1px solid var(--samples-sep) !important;
}

#content-samples .samples-right-panel {
  border-left: 0 !important;
}

#content-samples .samples-left-header {
  padding: 16px 16px 10px !important;
}

#content-samples .samples-search-shell-v2 {
  padding: 8px 12px !important;
}

#content-samples .samples-left-panel .samples-subsection-shell {
  margin: 6px 12px 8px !important;
}

#content-samples .samples-detail-topbar {
  padding: 12px 18px 10px !important;
}

#content-samples .samples-chip-bar {
  padding: 5px 24px !important;
}

#content-samples .samples-results-scroll {
  padding: 14px 24px 16px !important;
  gap: 10px !important;
}

#content-samples .samples-active-module {
  padding: 0 12px 12px !important;
}

#content-samples .samples-left-header,
#content-samples .samples-search-shell-v2,
#content-samples .samples-subsection-shell,
#content-samples .samples-project-list,
#content-samples .samples-detail-topbar,
#content-samples .samples-chip-bar {
  border-bottom: 1px solid var(--samples-sep-soft) !important;
}

#content-samples .samples-time-label {
  border-top: 1px solid var(--samples-sep-soft) !important;
}

#content-samples .samples-project-list > .samples-time-label:first-child {
  border-top: 0 !important;
}

#content-samples .samples-project-slim-row {
  border-bottom: 1px solid var(--samples-sep-soft) !important;
}

#content-samples .samples-project-list {
  scrollbar-gutter: auto !important;
}

#content-samples .samples-project-slim-row.dimmed {
  opacity: 1;
}

#content-samples .samples-project-slim-row.dimmed .samples-slim-name {
  color: var(--text-muted) !important;
}

#content-samples .samples-project-slim-row.dimmed .samples-slim-meta {
  color: var(--text-dim) !important;
}

body:not(.light-theme) #content-samples .samples-project-slim-row.dimmed .samples-slim-name {
  color: color-mix(in srgb, #ffffff 74%, var(--text-dim) 26%) !important;
}

body:not(.light-theme) #content-samples .samples-project-slim-row.dimmed .samples-slim-meta {
  color: color-mix(in srgb, #ffffff 50%, var(--text-dim) 50%) !important;
}

#content-samples .samples-project-slim-row.dimmed .samples-slim-dot,
#content-samples .samples-project-slim-row.dimmed .samples-status-module-line {
  filter: grayscale(0.35);
  opacity: 0.6;
}

#content-samples .samples-project-slim-row.dimmed .samples-slim-dot {
  background: var(--text-dim) !important;
}

#content-samples .samples-project-slim-row.dimmed .samples-status-module-segment {
  background: var(--text-dim) !important;
  opacity: 0.7;
}

#content-samples .samples-project-slim-row.dimmed:hover {
  opacity: 1;
}

#content-samples .samples-project-slim-row.selected {
  border-left: 2px solid var(--accent-blue) !important;
  opacity: 1;
}

#content-samples .samples-slim-launcher {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}

#content-samples .samples-slim-launcher-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.samples-launcher-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, #ffffff 24%, transparent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 4px 12px rgba(34, 78, 142, 0.28);
}

.samples-launcher-avatar-sm {
  width: 20px;
  height: 20px;
  font-size: 9px;
}

#content-samples .samples-detail-launcher {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

#content-samples .samples-detail-launcher-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.5px;
}

#content-samples .samples-subsection-pill,
#content-samples .samples-module-pill,
#content-samples .samples-sample-chip,
#content-samples .samples-carousel-btn {
  border: 1px solid var(--samples-sep) !important;
}

#content-samples .samples-module-pill.samples-module-pill-all[data-active="1"],
#content-samples .samples-module-pill.samples-module-pill-all.samples-module-pill-all-active {
  border-color: var(--accent-blue) !important;
  background: color-mix(in srgb, var(--accent-blue) 16%, var(--panel-bg) 84%) !important;
  color: var(--accent-blue) !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--accent-blue) 46%, transparent),
    0 0 0 1px color-mix(in srgb, var(--accent-blue) 28%, transparent);
}

#content-samples .samples-qc-box,
#content-samples .samples-result-card,
#content-samples .samples-result-block-v2,
#content-samples .srb,
#content-samples .samples-inline-surface,
#content-samples .srb-clf-box,
#content-samples .srb-caller {
  border: 1px solid var(--samples-sep-soft) !important;
}

#content-samples .srb,
#content-samples .samples-result-block-v2,
#content-samples .srb-classifier-pair {
  margin: 0 !important;
}

#content-samples .samples-result-block-header,
#content-samples .srb-header,
#content-samples .srb-caller-head,
#content-samples .srb-clf-header {
  border-bottom: 1px solid var(--samples-sep-soft) !important;
}

#content-samples .samples-qc-strip-shell {
  width: 100%;
  min-width: 0;
  margin-bottom: 0 !important;
}

#content-samples .samples-qc-strip {
  display: flex !important;
  grid-template-columns: none !important;
  gap: 8px !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  flex-wrap: nowrap !important;
  cursor: grab;
  user-select: none;
  padding-bottom: 0 !important;
  scroll-snap-type: x proximity;
  scrollbar-width: none !important;
  scrollbar-color: transparent transparent !important;
  -ms-overflow-style: none;
}

#content-samples .samples-qc-strip.is-dragging {
  cursor: grabbing;
}

#content-samples .samples-qc-strip::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

#content-samples .samples-qc-strip::-webkit-scrollbar-track {
  background: transparent;
}

#content-samples .samples-qc-strip::-webkit-scrollbar-thumb {
  background: transparent !important;
  border-radius: 999px;
}

#content-samples .samples-qc-strip-shell:hover .samples-qc-strip,
#content-samples .samples-qc-strip.is-dragging {
  scrollbar-width: none !important;
  scrollbar-color: transparent transparent !important;
}

#content-samples .samples-qc-strip-shell:hover .samples-qc-strip::-webkit-scrollbar,
#content-samples .samples-qc-strip.is-dragging::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

#content-samples .samples-qc-strip-shell:hover .samples-qc-strip::-webkit-scrollbar-thumb,
#content-samples .samples-qc-strip.is-dragging::-webkit-scrollbar-thumb {
  background: transparent !important;
}

#content-samples .samples-qc-strip .samples-qc-box {
  flex: 0 0 174px !important;
  min-width: 174px !important;
  max-width: 174px !important;
  scroll-snap-align: start;
  cursor: pointer;
}

.qc-metric-info-popup {
  width: min(500px, calc(100vw - 40px));
}

.qc-metric-info-line {
  margin-top: 10px;
}

.qc-metric-info-label {
  color: var(--fg);
  font-weight: 700;
}

/* Restore fusion/variant table grid lines after Samples hard border reset */
#content-samples .variant-table,
#content-samples .fusion-table,
#content-samples .samples-inline-surface table {
  border: 1px solid var(--samples-sep-soft) !important;
  border-collapse: collapse !important;
}

#content-samples .variant-table th,
#content-samples .variant-table td,
#content-samples .fusion-table th,
#content-samples .fusion-table td,
#content-samples .samples-inline-surface th,
#content-samples .samples-inline-surface td {
  border-bottom: 1px solid var(--samples-sep-soft) !important;
}

#content-samples .variant-table th:not(:last-child),
#content-samples .variant-table td:not(:last-child),
#content-samples .fusion-table th:not(:last-child),
#content-samples .fusion-table td:not(:last-child),
#content-samples .samples-inline-surface th:not(:last-child),
#content-samples .samples-inline-surface td:not(:last-child) {
  border-right: 1px solid var(--samples-sep-soft) !important;
}

#content-samples .variant-table tr:last-child td,
#content-samples .fusion-table tr:last-child td,
#content-samples .samples-inline-surface tbody tr:last-child td {
  border-bottom: none !important;
}

#content-samples .variant-table thead th,
#content-samples .fusion-table thead th,
#content-samples .samples-inline-surface thead th {
  background: var(--samples-table-head-bg) !important;
}

/* Keep scrollbar gutter stable in Samples to prevent horizontal layout jump */
#content-samples .samples-active-module,
#content-samples .samples-results-scroll,
#content-samples .samples-results-scroll-area {
  scrollbar-gutter: stable;
}

#content-samples .samples-project-list {
  scrollbar-gutter: auto !important;
}

@media (max-width: 920px) {
  #content-samples .samples-two-panel {
    height: auto !important;
    min-height: 0 !important;
  }
}

#content-samples .samples-left-sub.samples-left-sub-inline {
  margin: 0 !important;
  padding-left: 0 !important;
  display: block !important;
  font-size: 10px !important;
  line-height: 1.25 !important;
  color: var(--text-dim) !important;
  white-space: nowrap;
}

/* Light theme readability overrides */
body.light-theme .report-command-bar {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, #ffffff 96%, #eef4ff 4%),
    color-mix(in srgb, #f7f9fd 92%, #edf2f8 8%)
  );
  border-color: color-mix(in srgb, var(--border) 88%, #dbe4ef 12%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 8px 22px rgba(32, 58, 94, 0.1);
}

body.light-theme .report-config-card {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent-violet) 18%, #ffffff 82%),
    color-mix(in srgb, var(--accent-violet) 8%, #f2f6fe 92%)
  );
  border-color: color-mix(in srgb, var(--accent-violet) 30%, var(--border) 70%);
}

body.light-theme .report-floating-strip {
  background: color-mix(in srgb, var(--surface) 96%, #eef4ff 4%);
  border-bottom-color: color-mix(in srgb, var(--accent-violet) 22%, var(--border) 78%);
  box-shadow: 0 6px 16px rgba(32, 58, 94, 0.1);
}

body.light-theme .rpt-image-preview-frame {
  background: color-mix(in srgb, var(--surface) 86%, #dce8fa 14%);
}

body.light-theme .report-disclaimer-block {
  background: rgba(201, 74, 74, 0.08);
  border-color: rgba(201, 74, 74, 0.28);
  color: var(--text);
}

body.light-theme .section-include-toggle .form-check-input {
  background-color: #dfe9f5 !important;
  border-color: color-mix(in srgb, var(--accent-blue) 36%, var(--border) 64%) !important;
  box-shadow: inset 0 0 0 1px rgba(19, 37, 63, 0.08);
}

body.light-theme .section-include-toggle .form-check-input::after {
  box-shadow: 0 0 0 1px rgba(19, 37, 63, 0.2);
}

body.light-theme .section-include-toggle .form-check-input:checked {
  background-color: #26a17f !important;
  border-color: color-mix(in srgb, #26a17f 70%, #5acbad 30%) !important;
}

body.light-theme #content-samples {
  --samples-table-head-bg: color-mix(in srgb, #f6f9fd 92%, #bac6d5 8%);
}

/* Dark theme: neutral gray borderlines (remove blue tint) */
body:not(.light-theme) {
  --chrome-edge-line: color-mix(in srgb, #96a1b1 24%, var(--border) 76%);
  --chrome-edge-inset: color-mix(in srgb, #96a1b1 12%, transparent);
  --samples-sep: color-mix(in srgb, #8f9aaa 10%, var(--border) 90%);
  --samples-sep-soft: color-mix(in srgb, #8f9aaa 5%, var(--border) 95%);
}

body:not(.light-theme) #content-samples {
  --samples-table-head-bg: color-mix(in srgb, var(--surface) 90%, #9aa4b2 10%);
}

body:not(.light-theme) .report-generated-panel,
body:not(.light-theme) .report-generated-header,
body:not(.light-theme) .report-generated-search-shell,
body:not(.light-theme) .report-generated-search-frame,
body:not(.light-theme) .report-generated-row,
body:not(.light-theme) .report-floating-strip,
body:not(.light-theme) .report-command-bar,
body:not(.light-theme) .report-config-card {
  border-color: color-mix(in srgb, #8f9aaa 24%, var(--border) 76%) !important;
}

body:not(.light-theme) .report-section-card,
body:not(.light-theme) .report-tab-wrap .rpt-findings-shell {
  border-left-color: color-mix(in srgb, #8f9aaa 24%, var(--border) 76%) !important;
  border-right-color: color-mix(in srgb, #8f9aaa 24%, var(--border) 76%) !important;
}

body:not(.light-theme) .report-section-card:hover,
body:not(.light-theme) .report-section-card:focus-within {
  border-left-color: color-mix(in srgb, #8f9aaa 30%, var(--border) 70%) !important;
  border-right-color: color-mix(in srgb, #8f9aaa 30%, var(--border) 70%) !important;
}

body:not(.light-theme) .report-section-card .rpt-field,
body:not(.light-theme) .report-section-card .rpt-field:hover,
body:not(.light-theme) .report-section-card .rpt-field:focus-within {
  border-color: color-mix(in srgb, #8f9aaa 22%, var(--border) 78%) !important;
  box-shadow: none !important;
}

body:not(.light-theme) .section-include-toggle .form-check-input {
  border-color: color-mix(in srgb, #8f9aaa 26%, var(--border) 74%) !important;
}

body:not(.light-theme) #content-samples .samples-project-slim-row.selected {
  border-left-color: var(--accent-blue) !important;
}

/* Report hover safeguard: keep subsection glow in Clinical Report Generation */
#content-report .report-section-card {
  transition: border-left-color .14s ease, border-right-color .14s ease, box-shadow .16s ease;
}

#content-report .report-section-card:hover,
#content-report .report-section-card:focus-within {
  border-left-color: color-mix(in srgb, var(--section-accent, var(--accent-blue)) 82%, var(--border) 18%) !important;
  border-right-color: color-mix(in srgb, var(--section-accent, var(--accent-blue)) 82%, var(--border) 18%) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--section-accent, var(--accent-blue)) 24%, transparent),
    0 0 18px color-mix(in srgb, var(--section-accent, var(--accent-blue)) 16%, transparent) !important;
}

#content-report .report-section-card .rpt-field:hover,
#content-report .report-section-card .rpt-field:focus-within {
  border-color: color-mix(in srgb, var(--section-accent, var(--accent-blue)) 60%, var(--border) 40%) !important;
  box-shadow: none !important;
}

body.light-theme #content-report .report-section-card:hover,
body.light-theme #content-report .report-section-card:focus-within {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--section-accent, var(--accent-blue)) 20%, transparent),
    0 6px 16px color-mix(in srgb, var(--section-accent, var(--accent-blue)) 12%, transparent) !important;
}

/* Close buttons: keep still (no hover/press jump) across the app */
:where(
  .filetype-info-close,
  .inspector-close-btn,
  .browser-internal-tab-close,
  .samples-archive-close-btn,
  button[class*="close"],
  button[id*="close"],
  button[id*="Close"],
  button[title*="close"],
  button[title*="Close"],
  button[aria-label*="close"],
  button[aria-label*="Close"]
) {
  transform: none !important;
  will-change: auto !important;
}

:where(
  .filetype-info-close,
  .inspector-close-btn,
  .browser-internal-tab-close,
  .samples-archive-close-btn,
  button[class*="close"],
  button[id*="close"],
  button[id*="Close"],
  button[title*="close"],
  button[title*="Close"],
  button[aria-label*="close"],
  button[aria-label*="Close"]
):hover:not(:disabled),
:where(
  .filetype-info-close,
  .inspector-close-btn,
  .browser-internal-tab-close,
  .samples-archive-close-btn,
  button[class*="close"],
  button[id*="close"],
  button[id*="Close"],
  button[title*="close"],
  button[title*="Close"],
  button[aria-label*="close"],
  button[aria-label*="Close"]
):active:not(:disabled),
:where(
  .filetype-info-close,
  .inspector-close-btn,
  .browser-internal-tab-close,
  .samples-archive-close-btn,
  button[class*="close"],
  button[id*="close"],
  button[id*="Close"],
  button[title*="close"],
  button[title*="Close"],
  button[aria-label*="close"],
  button[aria-label*="Close"]
):focus-visible {
  transform: none !important;
}

:where(
  .filetype-info-close,
  .inspector-close-btn,
  .browser-internal-tab-close,
  .samples-archive-close-btn,
  button[class*="close"],
  button[id*="close"],
  button[id*="Close"],
  button[title*="close"],
  button[title*="Close"],
  button[aria-label*="close"],
  button[aria-label*="Close"]
) .material-symbols-rounded,
:where(
  .filetype-info-close,
  .inspector-close-btn,
  .browser-internal-tab-close,
  .samples-archive-close-btn,
  button[class*="close"],
  button[id*="close"],
  button[id*="Close"],
  button[title*="close"],
  button[title*="Close"],
  button[aria-label*="close"],
  button[aria-label*="Close"]
):hover .material-symbols-rounded,
:where(
  .filetype-info-close,
  .inspector-close-btn,
  .browser-internal-tab-close,
  .samples-archive-close-btn,
  button[class*="close"],
  button[id*="close"],
  button[id*="Close"],
  button[title*="close"],
  button[title*="Close"],
  button[aria-label*="close"],
  button[aria-label*="Close"]
):active .material-symbols-rounded {
  transform: none !important;
}

/* Report tab clear buttons: keep fixed position (no hover/press jump) */
#content-report .report-generated-search-clear,
#content-report .ac-clear-btn,
#content-report .date-clear-btn,
#content-report button[id*="clear"],
#content-report button[id*="Clear"],
#content-report button[title*="clear"],
#content-report button[title*="Clear"],
#content-report button[aria-label*="clear"],
#content-report button[aria-label*="Clear"] {
  will-change: auto !important;
}

#content-report .report-generated-search-clear,
#content-report .report-generated-search-clear:hover,
#content-report .report-generated-search-clear:active,
#content-report .report-generated-search-clear:focus-visible {
  transform: none !important;
}

#content-report .ac-clear-btn,
#content-report .ac-clear-btn:hover,
#content-report .ac-clear-btn:active,
#content-report .ac-clear-btn:focus-visible {
  right: 1px !important;
  transform: translateY(-50%) !important;
}

#content-report .date-clear-btn,
#content-report .date-clear-btn:hover,
#content-report .date-clear-btn:active,
#content-report .date-clear-btn:focus-visible {
  right: 1px !important;
  transform: translateY(-50%) !important;
}

/* Global UX preference: disable text selection across the entire app */
#root-div,
#root-div *,
#root-div *::before,
#root-div *::after {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

/* Console panes must behave like terminal text: selectable, copyable, and pasteable. */
#root-div #sys-wsl-console-render,
#root-div #sys-wsl-console-render *,
#root-div #sys-console-render,
#root-div #sys-console-render *,
#root-div #sys-console-command-input {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}

#root-div #sys-wsl-console-render,
#root-div #sys-wsl-console-render pre,
#root-div #sys-console-render,
#root-div #sys-console-render pre {
  cursor: text;
}

/* ==========================================================================
   Running Jobs v2
   ========================================================================== */
.job-card-v2 {
  background: var(--panel-bg);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  margin-bottom: 12px;
}

.job-card-v2.status-running { border-color: rgba(79,163,209,0.22); }
.job-card-v2.status-done { border-color: rgba(72,187,120,0.22); }
.job-card-v2.status-failed { border-color: rgba(224,82,82,0.22); }
.job-card-v2.status-stopped { border-color: rgba(232,168,56,0.22); }
.job-card-v2.status-queued { border-color: rgba(124,137,165,0.26); }

.jv2-topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 20px;
  background: var(--section-header-bg);
  border-bottom: 1px solid var(--border-color);
}

.jv2-status-ring {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--fg2);
  border: 1.5px solid color-mix(in srgb, var(--fg3) 42%, transparent);
  background: color-mix(in srgb, var(--fg3) 10%, transparent);
}

.jv2-status-ring.running {
  background: rgba(79,163,209,0.10);
  border-color: rgba(79,163,209,0.4);
  color: #4fa3d1;
}

.jv2-status-ring.done {
  background: rgba(72,187,120,0.10);
  border-color: rgba(72,187,120,0.4);
  color: #48bb78;
}

.jv2-status-ring.failed {
  background: rgba(224,82,82,0.10);
  border-color: rgba(224,82,82,0.4);
  color: #e05252;
}

.jv2-status-ring.stopped {
  background: rgba(232,168,56,0.10);
  border-color: rgba(232,168,56,0.4);
  color: #e8a838;
}

.jv2-status-ring.queued {
  background: rgba(124,137,165,0.12);
  border-color: rgba(124,137,165,0.42);
  color: #93a0bb;
}

.jv2-status-ring .material-symbols-rounded {
  font-size: 22px !important;
}

.jv2-title-area {
  flex: 1;
  min-width: 0;
}

.jv2-name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jv2-meta-line {
  display: flex;
  gap: 14px;
  margin-top: 3px;
  flex-wrap: wrap;
}

.jv2-meta-item {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg3);
  display: flex;
  align-items: center;
  gap: 4px;
}

.jv2-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.jv2-status-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 3px 9px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.jv2-status-badge .badge-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
  animation: jv2pulse 1.5s infinite;
}

@keyframes jv2pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.jv2-status-badge.running {
  background: rgba(79,163,209,0.12);
  border: 1px solid rgba(79,163,209,0.3);
  color: #4fa3d1;
}

.jv2-status-badge.done {
  background: rgba(72,187,120,0.12);
  border: 1px solid rgba(72,187,120,0.3);
  color: #48bb78;
}

.jv2-status-badge.failed {
  background: rgba(224,82,82,0.12);
  border: 1px solid rgba(224,82,82,0.3);
  color: #e05252;
}

.jv2-status-badge.stopped {
  background: rgba(232,168,56,0.12);
  border: 1px solid rgba(232,168,56,0.3);
  color: #e8a838;
}

.jv2-status-badge.queued {
  background: rgba(124,137,165,0.14);
  border: 1px solid rgba(124,137,165,0.34);
  color: #93a0bb;
}

.jv2-elapsed {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg2);
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  padding: 3px 9px;
  border-radius: 6px;
  white-space: nowrap;
}

/* Keep Running Jobs actions visually aligned with Analyzed Samples icon buttons */
.jv2-action-btn {
  min-width: 32px !important;
  width: 32px !important;
  height: 30px !important;
  padding: 0 !important;
}

.jv2-action-btn .material-symbols-rounded {
  font-size: 19px;
  line-height: 1;
}

.jv2-body {
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.jv2-paths {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.jv2-path-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg3);
  min-width: 0;
}

.jv2-path-key {
  color: var(--fg3);
  flex-shrink: 0;
  width: 68px;
  font-weight: 600;
}

.jv2-path-val {
  color: var(--fg2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.jv2-pills-samples {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.jv2-sample-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.jv2-sample-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--fg3);
  letter-spacing: 1px;
  text-transform: uppercase;
  flex-shrink: 0;
}

.jv2-sample-chip {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 3px 9px;
  border-radius: 5px;
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  color: var(--fg2);
  white-space: nowrap;
}

.jv2-sample-chip[data-active="1"] {
  background: rgba(79,163,209,0.1);
  border-color: rgba(79,163,209,0.3);
  color: #4fa3d1;
}

.jv2-progress-trio {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

.jv2-progress-block {
  background: var(--muted-surface);
  border: 1px solid var(--border-color);
  border-radius: 9px;
  padding: 11px 13px;
}

.jv2-pb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.jv2-pb-title {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--fg3);
}

.jv2-pb-pct {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
}

.jv2-pb-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  min-width: 0;
}

.jv2-pb-label {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--fg2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}

.jv2-pb-detail {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--fg3);
  flex-shrink: 0;
  text-align: right;
}

.jv2-pb-track {
  height: 3px;
  background: rgba(255,255,255,0.04);
  border-radius: 2px;
  overflow: hidden;
}

.jv2-pb-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.5s ease;
}

.jv2-fill-process { background: linear-gradient(to right, #38b2ac, #4fa3d1); }
.jv2-fill-sample { background: #4fa3d1; }
.jv2-fill-module { background: linear-gradient(to right, #D4537E, #8b6cd8); }
.jv2-fill-error { background: #e05252; }

.jv2-log-details {
  margin-top: 4px;
}

.jv2-log-details summary::-webkit-details-marker {
  display: none;
}

.jv2-log-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 7px 12px;
  background: var(--muted-surface);
  border: 1px solid var(--border-color);
  border-radius: 7px;
  transition: border-color 0.12s;
  user-select: none;
  margin-top: 4px;
}

.jv2-log-toggle:hover {
  border-color: var(--accent);
}

.jv2-log-toggle-left {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: var(--fg2);
  font-weight: 500;
}

.jv2-log-chevron {
  font-size: 10px;
  color: var(--fg3);
  transition: transform 0.2s;
  line-height: 1;
  display: inline-block;
}

.jv2-log-details[open] .jv2-log-chevron {
  transform: rotate(90deg);
}

.jv2-log-updated {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent);
}

.jv2-log-body {
  margin-top: 6px;
  background: #000000;
  border: 1px solid #1b1b1b;
  border-radius: 8px;
  padding: 11px 13px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: #cfd8e3;
  line-height: 1.75;
  max-height: 220px;
  overflow-y: auto;
  white-space: pre-wrap;
}

.jv2-log-body::-webkit-scrollbar {
  width: 3px;
}

.jv2-log-body::-webkit-scrollbar-thumb {
  background: #2a2a2a;
  border-radius: 2px;
}

.jv2-mini {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  margin-bottom: 8px;
}

.jv2-mini.status-done { border-color: rgba(72,187,120,0.2); }
.jv2-mini.status-failed { border-color: rgba(224,82,82,0.2); }
.jv2-mini.status-stopped { border-color: rgba(232,168,56,0.2); }
.jv2-mini.status-queued { border-color: rgba(124,137,165,0.26); }

.jv2-mini-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jv2-mini-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg3);
  flex-shrink: 0;
}

.jobs-history-details {
  margin-top: 10px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--panel-bg);
}

.jobs-history-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 10px;
  user-select: none;
  color: var(--fg2);
}

.jobs-history-summary::-webkit-details-marker {
  display: none;
}

.jobs-history-summary .material-symbols-rounded {
  font-size: 16px;
  line-height: 1;
  color: var(--fg3);
}

.jobs-history-summary-title {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--fg3);
}

.jobs-history-summary-chevron {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.16s ease;
}

.jobs-history-details[open] .jobs-history-summary-chevron {
  transform: rotate(180deg);
}

.jobs-history-details[open] .jobs-history-summary {
  border-bottom: 1px solid var(--border-color);
  border-radius: 10px 10px 0 0;
}

.jobs-history-summary:hover {
  background: color-mix(in srgb, var(--panel-bg) 70%, var(--surface2) 30%);
}

.jobs-history-section {
  padding: 10px 10px 2px;
}

.jobs-history-empty {
  padding: 14px 16px;
  border-style: solid;
  border-color: var(--border-color);
  background: var(--panel-bg);
}

.jobs-history-group-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--fg3);
  margin: 14px 2px 8px;
}

.jobs-history-group-label:first-child {
  margin-top: 2px;
}

.jobs-history-row {
  display: grid;
  grid-template-columns: auto minmax(140px, 1fr) minmax(220px, auto) auto auto;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--panel-bg);
  margin-bottom: 8px;
}

.jobs-history-row.status-done {
  border-color: rgba(72,187,120,0.24);
}

.jobs-history-row.status-failed {
  border-color: rgba(224,82,82,0.24);
}

.jobs-history-row.status-stopped {
  border-color: rgba(232,168,56,0.24);
}

.jobs-history-icon {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color);
  color: var(--fg2);
  background: color-mix(in srgb, var(--fg3) 9%, transparent);
}

.jobs-history-icon .material-symbols-rounded {
  font-size: 14px;
  line-height: 1;
}

.jobs-history-icon.done {
  color: #48bb78;
  border-color: rgba(72,187,120,0.38);
  background: rgba(72,187,120,0.10);
}

.jobs-history-icon.failed {
  color: #e05252;
  border-color: rgba(224,82,82,0.38);
  background: rgba(224,82,82,0.10);
}

.jobs-history-icon.stopped {
  color: #e8a838;
  border-color: rgba(232,168,56,0.38);
  background: rgba(232,168,56,0.10);
}

.jobs-history-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jobs-history-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg3);
  white-space: nowrap;
  min-width: 0;
  max-width: 560px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jobs-history-status {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: 999px;
  padding: 3px 9px;
  border: 1px solid var(--border-color);
  color: var(--fg2);
  background: color-mix(in srgb, var(--fg3) 9%, transparent);
}

.jobs-history-status.done {
  color: #48bb78;
  border-color: rgba(72,187,120,0.35);
  background: rgba(72,187,120,0.11);
}

.jobs-history-status.failed {
  color: #e05252;
  border-color: rgba(224,82,82,0.35);
  background: rgba(224,82,82,0.11);
}

.jobs-history-status.stopped {
  color: #e8a838;
  border-color: rgba(232,168,56,0.35);
  background: rgba(232,168,56,0.11);
}

.jobs-history-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  white-space: nowrap;
  justify-self: end;
}

.jobs-history-icon-btn {
  width: 32px !important;
  min-width: 32px !important;
  height: 30px !important;
  padding: 0 !important;
  border-radius: 7px !important;
}

@media (max-width: 900px) {
  .jv2-progress-trio {
    grid-template-columns: 1fr;
  }

  .jv2-pills-samples {
    flex-direction: column;
    align-items: flex-start;
  }

  .jobs-history-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "icon name actions"
      "icon meta status";
    row-gap: 7px;
  }

  .jobs-history-icon { grid-area: icon; }
  .jobs-history-name { grid-area: name; }
  .jobs-history-meta { grid-area: meta; }
  .jobs-history-status { grid-area: status; justify-self: start; }
  .jobs-history-actions { grid-area: actions; justify-self: end; }
}

/* ── Flat Text Entry Refresh ───────────────────────────────────────────── */
:root {
  --flat-entry-bg: color-mix(in srgb, var(--surface) 82%, var(--input-bg) 18%);
  --flat-entry-bg-focus: color-mix(in srgb, var(--surface) 76%, var(--input-bg) 24%);
  --flat-entry-border: color-mix(in srgb, var(--input-border) 86%, transparent 14%);
  --flat-entry-radius: 12px;
}

.theme-input:not(.appearance-margin-input),
.path-input,
.browser-url-input,
.app-confirm-text-input,
.samples-group-name-input,
.notes-title-input,
.notes-size-input,
.notes-color-input,
.notes-editor-input,
.samples-limit-input-flat,
.srb-caller-limit-input {
  background: var(--flat-entry-bg) !important;
  border: 1px solid var(--flat-entry-border) !important;
  border-radius: var(--flat-entry-radius) !important;
  box-shadow: none !important;
  transition: border-color 0.16s ease, background 0.16s ease !important;
  -webkit-appearance: none;
  appearance: none;
}

.theme-input:not(.appearance-margin-input),
.path-input,
.browser-url-input,
.app-confirm-text-input,
.samples-group-name-input,
.notes-title-input,
.notes-size-input {
  min-height: 25px !important;
  padding: 5px 10px !important;
}

.theme-input:not(.appearance-margin-input):focus,
.path-input:focus,
.browser-url-input:focus,
.app-confirm-text-input:focus,
.samples-group-name-input:focus,
.notes-title-input:focus,
.notes-size-input:focus,
.notes-color-input:focus,
.notes-editor-input:focus,
.samples-limit-input-flat:focus,
.srb-caller-limit-input:focus,
.samples-limit-input-flat:focus-visible,
.srb-caller-limit-input:focus-visible {
  border-color: color-mix(in srgb, var(--accent-blue) 62%, var(--border) 38%) !important;
  background: var(--flat-entry-bg-focus) !important;
  box-shadow: none !important;
}

.notes-title-input {
  font-size: 14px !important;
  font-weight: 700 !important;
  margin-bottom: 10px !important;
}

.notes-editor-input {
  padding: 14px 15px !important;
}

.notes-size-input,
.samples-limit-input-flat,
.srb-caller-limit-input {
  font-family: var(--font-mono) !important;
  text-align: center !important;
}

.notes-color-input {
  min-height: 25px !important;
  padding: 2px 5px !important;
}

.samples-limit-input-flat,
.srb-caller-limit-input {
  width: 52px !important;
  min-width: 52px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 8px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

.notes-search-wrap,
.samples-search-frame,
.report-generated-search-frame,
.color-picker-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 7px 10px;
  background: var(--flat-entry-bg);
  border: 1px solid var(--flat-entry-border);
  border-radius: var(--flat-entry-radius);
  transition: border-color 0.16s ease, background 0.16s ease;
}

.notes-search-wrap,
.samples-search-frame,
.report-generated-search-frame {
  padding-right: 8px;
}

.report-generated-search-frame.single-outline-field {
  padding-top: 10px;
  padding-bottom: 6px;
}

.report-generated-search-frame.single-outline-field .single-outline-label {
  top: -10px;
}

.report-generated-search-frame.single-outline-field:focus-within,
.report-generated-search-frame.single-outline-field:hover {
  border-color: color-mix(in srgb, var(--border2, var(--border)) 44%, var(--border) 56%) !important;
  background: var(--flat-entry-bg-focus) !important;
  box-shadow: none !important;
}

.notes-search-wrap:focus-within,
.samples-search-frame:focus-within,
.report-generated-search-frame:focus-within,
.color-picker-row:focus-within {
  border-color: color-mix(in srgb, var(--border2, var(--border)) 44%, var(--border) 56%);
  background: var(--flat-entry-bg-focus);
}

.notes-search-input,
.samples-search-input-v3,
.report-generated-search-input,
.color-hex-input.appearance-hex-input {
  flex: 1;
  min-width: 0;
  min-height: 22px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.notes-search-input:focus,
.samples-search-input-v3:focus,
.report-generated-search-input:focus,
.color-hex-input.appearance-hex-input:focus {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.notes-search-clear,
.samples-search-clear-v3,
.report-generated-search-clear {
  background: transparent !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  min-height: 22px;
  padding: 0 8px !important;
}

.notes-search-clear:hover,
.samples-search-clear-v3:hover,
.report-generated-search-clear:hover {
  background: color-mix(in srgb, var(--flat-entry-bg-focus) 88%, transparent 12%) !important;
}

.color-picker-card {
  gap: 7px;
}

.color-picker-label,
.notes-toolbar-label {
  font-size: 9px;
  letter-spacing: 0.8px;
}

.color-swatch.appearance-color-input {
  width: 24px !important;
  min-width: 24px;
  height: 24px !important;
  border-radius: 8px !important;
  border: 1px solid color-mix(in srgb, var(--flat-entry-border) 88%, transparent 12%) !important;
}

/* ── Single Outline Fields ─────────────────────────────────────────────── */
.single-outline-field {
  --field-shell-fill: color-mix(in srgb, var(--surface) 84%, var(--input-bg) 16%);
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 29px;
  padding: 9px 12px 6px;
  background: var(--field-shell-fill);
  border: 1px solid color-mix(in srgb, var(--input-border) 88%, transparent 12%);
  border-radius: 12px;
  box-shadow: none !important;
  transition: border-color 0.16s ease, background 0.16s ease;
}

.single-outline-field:focus-within {
  border-color: color-mix(in srgb, var(--accent-blue) 62%, var(--border) 38%) !important;
  --field-shell-fill: color-mix(in srgb, var(--surface) 78%, var(--input-bg) 22%);
  background: var(--field-shell-fill);
}

.single-outline-field:focus-within > .single-outline-label {
  color: var(--accent-blue) !important;
}

.single-outline-label {
  position: absolute;
  top: -9px;
  left: 12px;
  z-index: 1;
  margin: 0;
  padding: 0 8px;
  background: var(--panel-bg);
  color: var(--text-dim) !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.85px;
  line-height: 1.1;
  text-transform: uppercase;
  pointer-events: none;
}

.single-outline-field input:not([type="color"]):not([type="checkbox"]):not([type="radio"]),
.single-outline-field textarea {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 22px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

.single-outline-field input:not([type="color"]):not([type="checkbox"]):not([type="radio"]):focus,
.single-outline-field textarea:focus {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.analysis-main-wrap .analysis-shell-field {
  --field-shell-fill: color-mix(in srgb, var(--surface) 84%, var(--surface2) 16%);
  --material-field-label-bg: color-mix(in srgb, var(--surface) 88%, var(--surface2) 12%);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  min-height: 29px;
  padding: 10px 12px 6px;
  background: var(--field-shell-fill);
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent 18%);
  border-radius: 12px;
  box-shadow: none !important;
  overflow: visible;
  transition: border-color 0.16s ease, background 0.16s ease;
}

.analysis-main-wrap .analysis-shell-field:hover,
.analysis-main-wrap .analysis-shell-field:focus-within {
  border-color: color-mix(in srgb, var(--accent-blue) 34%, var(--border) 66%);
  --field-shell-fill: color-mix(in srgb, var(--surface) 82%, var(--surface2) 18%);
  background: var(--field-shell-fill);
  box-shadow: none !important;
}

.analysis-main-wrap .analysis-shell-field > .field-label {
  z-index: 2;
  background: var(--material-field-label-bg);
}

.analysis-main-wrap .analysis-shell-field > input.analysis-shell-input {
  all: unset;
  box-sizing: border-box;
  display: block;
  flex: 1 1 auto;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 22px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--text) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  caret-color: var(--text) !important;
}

.analysis-main-wrap .analysis-shell-field > input.analysis-shell-input::placeholder {
  color: var(--text-dim) !important;
}

.analysis-main-wrap .analysis-shell-field > input.analysis-shell-input:focus {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  -webkit-box-shadow: none !important;
}

.analysis-main-wrap .analysis-shell-field > input.analysis-shell-input:focus-visible {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  -webkit-box-shadow: none !important;
}

.analysis-project-shell {
  margin-bottom: 18px;
}

.analysis-folder-shell {
  flex: 1 1 auto;
}

.appearance-custom-name-shell {
  flex: 1 1 240px;
  min-width: 240px;
}

.browser-url-shell {
  flex: 1 1 auto;
  min-width: 260px;
}

.notes-title-shell {
  margin-bottom: 10px;
}

.notes-search-wrap.single-outline-field,
.samples-search-frame.single-outline-field,
.report-generated-search-frame.single-outline-field,
.browser-url-shell,
.appearance-color-shell {
  padding-right: 10px;
}

.notes-search-wrap.single-outline-field .notes-search-input,
.samples-search-frame.single-outline-field .samples-search-input-v3,
.report-generated-search-frame.single-outline-field .report-generated-search-input,
.browser-url-shell .browser-url-input,
.appearance-custom-name-shell .appearance-custom-name-input,
.analysis-project-shell .analysis-project-input,
.analysis-folder-shell .path-input,
.notes-title-shell .notes-title-input,
.appearance-color-shell .appearance-hex-input {
  font-size: 12px !important;
  line-height: 1.3 !important;
}

.notes-title-shell .notes-title-input {
  font-size: 14px !important;
  font-weight: 700 !important;
}

/* ── Sample Input True EOF Guard ───────────────────────────────────────── */
.analysis-main-wrap .single-outline-field.analysis-project-shell > input.analysis-project-input,
.analysis-main-wrap .single-outline-field.analysis-folder-shell > input.path-input {
  all: unset;
  box-sizing: border-box;
  display: block;
  flex: 1 1 auto;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 22px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--text) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  caret-color: var(--text) !important;
}

.analysis-main-wrap .single-outline-field.analysis-project-shell > input.analysis-project-input::placeholder,
.analysis-main-wrap .single-outline-field.analysis-folder-shell > input.path-input::placeholder {
  color: var(--text-dim) !important;
}

.analysis-main-wrap .single-outline-field.analysis-project-shell > input.analysis-project-input:focus,
.analysis-main-wrap .single-outline-field.analysis-folder-shell > input.path-input:focus {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ── Topbar User Input Absolute EOF Guard ───────────────────────────────── */
#topbar-user-menu .topbar-user-add-grid .topbar-user-field {
  --material-field-label-bg: var(--topbar-user-menu-bg, var(--surface));
  min-height: 44px !important;
  padding: 13px 12px 7px !important;
  border: 1px solid color-mix(in srgb, var(--accent-blue) 34%, var(--border) 66%) !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--surface) 88%, var(--surface2) 12%) !important;
  box-shadow: none !important;
}

#topbar-user-menu .topbar-user-add-grid .topbar-user-field:focus-within,
#topbar-user-menu .topbar-user-add-grid .topbar-user-field:hover {
  border-color: color-mix(in srgb, var(--accent-blue) 68%, var(--border) 32%) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-blue) 16%, transparent) !important;
}

#topbar-user-menu .topbar-user-add-grid .topbar-user-field > input.topbar-user-input,
#topbar-user-menu .topbar-user-add-grid .topbar-user-field > input.topbar-user-input:focus,
#topbar-user-menu .topbar-user-add-grid .topbar-user-field > input.topbar-user-input:focus-visible {
  all: unset;
  box-sizing: border-box;
  display: block;
  width: 100% !important;
  min-width: 0 !important;
  height: 22px !important;
  min-height: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--text) !important;
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  caret-color: var(--text) !important;
}

body.light-theme #topbar-user-menu .topbar-user-add-grid .topbar-user-field {
  background: #ffffff !important;
  border-color: #cbd7ea !important;
}

body.light-theme #topbar-user-menu .topbar-user-add-grid .topbar-user-field:focus-within,
body.light-theme #topbar-user-menu .topbar-user-add-grid .topbar-user-field:hover {
  border-color: #4f8ddf !important;
}

/* ── Topbar User Input True EOF Guard ──────────────────────────────────── */
#topbar-user-menu .topbar-user-add-grid .topbar-user-field {
  --material-field-label-bg: var(--topbar-user-menu-bg, var(--surface));
  min-height: 44px !important;
  padding: 13px 12px 7px !important;
  border: 1px solid color-mix(in srgb, var(--accent-blue) 34%, var(--border) 66%) !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--surface) 88%, var(--surface2) 12%) !important;
  box-shadow: none !important;
}

#topbar-user-menu .topbar-user-add-grid .topbar-user-field:focus-within,
#topbar-user-menu .topbar-user-add-grid .topbar-user-field:hover {
  border-color: color-mix(in srgb, var(--accent-blue) 68%, var(--border) 32%) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-blue) 16%, transparent) !important;
}

#topbar-user-menu .topbar-user-add-grid .topbar-user-field > input.topbar-user-input,
#topbar-user-menu .topbar-user-add-grid .topbar-user-field > input.topbar-user-input:focus,
#topbar-user-menu .topbar-user-add-grid .topbar-user-field > input.topbar-user-input:focus-visible {
  all: unset;
  box-sizing: border-box;
  display: block;
  width: 100% !important;
  min-width: 0 !important;
  height: 22px !important;
  min-height: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--text) !important;
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  caret-color: var(--text) !important;
}

body.light-theme #topbar-user-menu .topbar-user-add-grid .topbar-user-field {
  background: #ffffff !important;
  border-color: #cbd7ea !important;
}

body.light-theme #topbar-user-menu .topbar-user-add-grid .topbar-user-field:focus-within,
body.light-theme #topbar-user-menu .topbar-user-add-grid .topbar-user-field:hover {
  border-color: #4f8ddf !important;
}

/* Topbar App Users menu: report-style inputs and clearer user colors. */
.topbar-user-menu {
  --topbar-user-menu-bg: color-mix(in srgb, var(--surface) 94%, #06090f 6%);
}

.topbar-user-add-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 8px;
}

.topbar-user-add-grid .topbar-user-field.rpt-field.report-shell-field {
  --section-accent: var(--accent-blue);
  --field-shell-fill: color-mix(in srgb, var(--surface) 86%, var(--surface2) 14%);
  --material-field-label-bg: var(--topbar-user-menu-bg);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  min-height: 38px;
  margin: 0 !important;
  padding: 10px 11px 6px;
  border: 1px solid color-mix(in srgb, var(--section-accent) 26%, var(--border) 74%);
  border-radius: 12px;
  background: var(--field-shell-fill);
  overflow: visible;
  transition: border-color 0.14s ease, background 0.14s ease;
}

.topbar-user-add-grid .topbar-user-field.rpt-field.report-shell-field:hover,
.topbar-user-add-grid .topbar-user-field.rpt-field.report-shell-field:focus-within {
  border-color: color-mix(in srgb, var(--accent-blue) 64%, var(--border) 36%);
  background: color-mix(in srgb, var(--surface2) 48%, var(--surface) 52%);
  box-shadow: none !important;
}

.topbar-user-add-grid .topbar-user-field > .field-label {
  position: absolute;
  top: -8px;
  left: 10px;
  z-index: 2;
  max-width: calc(100% - 20px);
  margin: 0 !important;
  padding: 0 7px;
  overflow: hidden;
  background: var(--material-field-label-bg);
  color: var(--text-dim) !important;
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.7px;
  line-height: 1.2;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.topbar-user-add-grid .topbar-user-field:focus-within > .field-label {
  color: var(--accent-blue) !important;
}

.topbar-user-add-grid .topbar-user-field > .topbar-user-input.report-shell-input,
.topbar-user-add-grid .topbar-user-field > input.topbar-user-input {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 20px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--text) !important;
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  outline: none !important;
  box-shadow: none !important;
}

.topbar-user-add-grid .topbar-user-field > .topbar-user-input:focus,
.topbar-user-add-grid .topbar-user-field > input.topbar-user-input:focus {
  outline: none !important;
  box-shadow: none !important;
}

.topbar-user-add-btn {
  min-width: 86px;
  min-height: 38px;
  align-self: stretch;
  border-radius: 10px !important;
}

.topbar-user {
  border-color: color-mix(in srgb, var(--user-start, #ffffff) 36%, #ffffff 16%, transparent);
}

.topbar-user-row {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--user-start, var(--border)) 22%, var(--border) 78%);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--user-start, transparent) 12%, transparent), transparent 58%),
    color-mix(in srgb, var(--surface2) 86%, transparent);
}

.topbar-user-row::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--user-gradient, var(--accent-blue));
}

.topbar-user-row:hover {
  border-color: color-mix(in srgb, var(--user-start, var(--accent-blue)) 54%, var(--border) 46%);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--user-start, transparent) 18%, transparent), transparent 64%),
    color-mix(in srgb, var(--surface2) 96%, var(--surface) 4%);
}

.topbar-user-row.active {
  border-color: color-mix(in srgb, var(--user-start, var(--accent-blue)) 70%, var(--border) 30%);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--user-end, var(--accent-blue)) 34%, transparent),
    0 0 0 1px color-mix(in srgb, var(--user-start, var(--accent-blue)) 18%, transparent);
}

.topbar-user-avatar {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.24) inset,
    0 0 0 2px color-mix(in srgb, var(--user-start, #ffffff) 26%, transparent);
}

.topbar-user-row.active .topbar-user-avatar {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.3) inset,
    0 0 0 2px color-mix(in srgb, var(--user-start, #ffffff) 42%, transparent),
    0 7px 16px color-mix(in srgb, var(--user-end, #000000) 28%, transparent);
}

.topbar-user-active-tag {
  color: color-mix(in srgb, var(--user-start, var(--accent-blue)) 76%, #ffffff 24%);
}

body.light-theme .topbar-user-menu {
  --topbar-user-menu-bg: #ffffff;
}

body.light-theme .topbar-user-add-grid .topbar-user-field.rpt-field.report-shell-field {
  --field-shell-fill: #ffffff;
  border-color: #cbd7ea;
}

body.light-theme .topbar-user-add-grid .topbar-user-field.rpt-field.report-shell-field:hover,
body.light-theme .topbar-user-add-grid .topbar-user-field.rpt-field.report-shell-field:focus-within {
  border-color: #4f8ddf;
  background: #f8fbff;
}

/* Topbar app user polish: wider menu, single-outline name fields. */
.status-indicator.status-indicator-ready {
  width: 7px;
  height: 7px;
  background: var(--accent-green);
  box-shadow: 0 0 5px color-mix(in srgb, var(--accent-green) 62%, transparent);
  animation: topbar-ready-blink-small 1.05s ease-in-out infinite;
}

@keyframes topbar-ready-blink-small {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 5px color-mix(in srgb, var(--accent-green) 62%, transparent);
  }
  50% {
    opacity: 0.42;
    box-shadow: 0 0 2px color-mix(in srgb, var(--accent-green) 38%, transparent);
  }
}

#topbar-user-menu.topbar-user-menu {
  width: 372px;
  max-width: min(94vw, 372px);
  padding: 14px;
  border-radius: 12px;
}

#topbar-user-menu .topbar-user-add-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 98px;
  gap: 10px;
}

#topbar-user-menu .topbar-user-add-grid .topbar-user-field.rpt-field.report-shell-field {
  min-height: 44px;
  padding: 13px 12px 7px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--accent-blue) 34%, var(--border) 66%);
  background: color-mix(in srgb, var(--surface) 88%, var(--surface2) 12%);
  box-shadow: none !important;
}

#topbar-user-menu .topbar-user-add-grid .topbar-user-field.rpt-field.report-shell-field:hover,
#topbar-user-menu .topbar-user-add-grid .topbar-user-field.rpt-field.report-shell-field:focus-within {
  border-color: color-mix(in srgb, var(--accent-blue) 68%, var(--border) 32%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-blue) 16%, transparent) !important;
}

#topbar-user-menu .topbar-user-add-grid .topbar-user-field > input.topbar-user-input,
#topbar-user-menu .topbar-user-add-grid .topbar-user-field > input.topbar-user-input.rpt-input,
#topbar-user-menu .topbar-user-add-grid .topbar-user-field > input.topbar-user-input.report-shell-input {
  height: 22px !important;
  min-height: 22px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

#topbar-user-menu .topbar-user-add-grid .topbar-user-field > input.topbar-user-input:focus,
#topbar-user-menu .topbar-user-add-grid .topbar-user-field > input.topbar-user-input:focus-visible {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

#topbar-user-menu .topbar-user-add-btn {
  min-width: 98px;
  min-height: 44px;
  border-radius: 10px !important;
}

body.light-theme #topbar-user-menu .topbar-user-add-grid .topbar-user-field.rpt-field.report-shell-field {
  background: #ffffff;
  border-color: #cbd7ea;
}

body.light-theme #topbar-user-menu .topbar-user-add-grid .topbar-user-field.rpt-field.report-shell-field:hover,
body.light-theme #topbar-user-menu .topbar-user-add-grid .topbar-user-field.rpt-field.report-shell-field:focus-within {
  border-color: #4f8ddf;
}

/* ── Text Input Clear X True EOF Guard ─────────────────────────────────── */
#content-samples .samples-search-frame.single-outline-field,
#content-notes .samples-search-frame.single-outline-field {
  padding-right: 34px !important;
}

#content-samples .samples-search-frame.single-outline-field .samples-search-clear-v3,
#content-notes .samples-search-frame.single-outline-field .samples-search-clear-v3 {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--surface2) 82%, var(--surface) 18%) !important;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent 12%) !important;
  color: var(--text-dim) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  outline: none !important;
  transform: translateY(-50%) !important;
  z-index: 3 !important;
}

#content-samples .samples-search-frame.single-outline-field .samples-search-clear-v3:hover,
#content-samples .samples-search-frame.single-outline-field .samples-search-clear-v3:active,
#content-samples .samples-search-frame.single-outline-field .samples-search-clear-v3:focus-visible,
#content-notes .samples-search-frame.single-outline-field .samples-search-clear-v3:hover,
#content-notes .samples-search-frame.single-outline-field .samples-search-clear-v3:active,
#content-notes .samples-search-frame.single-outline-field .samples-search-clear-v3:focus-visible {
  color: var(--accent-red) !important;
  background: rgba(224,82,82,0.1) !important;
  border-color: rgba(224,82,82,0.38) !important;
  transform: translateY(-50%) !important;
}

.analysis-main-wrap .rpt-field.report-shell-field.analysis-project-shell,
.analysis-main-wrap .rpt-field.report-shell-field.analysis-folder-shell {
  padding-right: 38px !important;
}

.analysis-main-wrap .analysis-input-clear-btn {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--surface2) 82%, var(--surface) 18%) !important;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent 12%) !important;
  color: var(--text-dim) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  outline: none !important;
  transform: translateY(-50%) !important;
  z-index: 3 !important;
}

.analysis-main-wrap .analysis-input-clear-btn:hover,
.analysis-main-wrap .analysis-input-clear-btn:active,
.analysis-main-wrap .analysis-input-clear-btn:focus-visible {
  color: var(--accent-red) !important;
  background: rgba(224,82,82,0.1) !important;
  border-color: rgba(224,82,82,0.38) !important;
  transform: translateY(-50%) !important;
}

/* ── Text Input Clear X Final Guard ────────────────────────────────────── */
#content-samples .samples-search-frame.single-outline-field,
#content-notes .samples-search-frame.single-outline-field {
  padding-right: 34px !important;
}

#content-samples .samples-search-frame.single-outline-field .samples-search-clear-v3,
#content-notes .samples-search-frame.single-outline-field .samples-search-clear-v3 {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--surface2) 82%, var(--surface) 18%) !important;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent 12%) !important;
  color: var(--text-dim) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  outline: none !important;
  transform: translateY(-50%) !important;
  z-index: 3 !important;
}

#content-samples .samples-search-frame.single-outline-field .samples-search-clear-v3:hover,
#content-samples .samples-search-frame.single-outline-field .samples-search-clear-v3:active,
#content-samples .samples-search-frame.single-outline-field .samples-search-clear-v3:focus-visible,
#content-notes .samples-search-frame.single-outline-field .samples-search-clear-v3:hover,
#content-notes .samples-search-frame.single-outline-field .samples-search-clear-v3:active,
#content-notes .samples-search-frame.single-outline-field .samples-search-clear-v3:focus-visible {
  color: var(--accent-red) !important;
  background: rgba(224,82,82,0.1) !important;
  border-color: rgba(224,82,82,0.38) !important;
  transform: translateY(-50%) !important;
}

.analysis-main-wrap .rpt-field.report-shell-field.analysis-project-shell,
.analysis-main-wrap .rpt-field.report-shell-field.analysis-folder-shell {
  padding-right: 38px !important;
}

.analysis-main-wrap .analysis-input-clear-btn {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--surface2) 82%, var(--surface) 18%) !important;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent 12%) !important;
  color: var(--text-dim) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  outline: none !important;
  transform: translateY(-50%) !important;
  z-index: 3 !important;
}

.analysis-main-wrap .analysis-input-clear-btn:hover,
.analysis-main-wrap .analysis-input-clear-btn:active,
.analysis-main-wrap .analysis-input-clear-btn:focus-visible {
  color: var(--accent-red) !important;
  background: rgba(224,82,82,0.1) !important;
  border-color: rgba(224,82,82,0.38) !important;
  transform: translateY(-50%) !important;
}

/* ── X Clear Buttons For Text Inputs ───────────────────────────────────── */
#content-samples .samples-search-frame.single-outline-field,
#content-notes .samples-search-frame.single-outline-field {
  padding-right: 34px !important;
}

#content-samples .samples-search-frame.single-outline-field .samples-search-clear-v3,
#content-notes .samples-search-frame.single-outline-field .samples-search-clear-v3 {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--surface2) 82%, var(--surface) 18%) !important;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent 12%) !important;
  color: var(--text-dim) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  outline: none !important;
  transform: translateY(-50%) !important;
  z-index: 3 !important;
}

#content-samples .samples-search-frame.single-outline-field .samples-search-clear-v3:hover,
#content-samples .samples-search-frame.single-outline-field .samples-search-clear-v3:active,
#content-samples .samples-search-frame.single-outline-field .samples-search-clear-v3:focus-visible,
#content-notes .samples-search-frame.single-outline-field .samples-search-clear-v3:hover,
#content-notes .samples-search-frame.single-outline-field .samples-search-clear-v3:active,
#content-notes .samples-search-frame.single-outline-field .samples-search-clear-v3:focus-visible {
  color: var(--accent-red) !important;
  background: rgba(224,82,82,0.1) !important;
  border-color: rgba(224,82,82,0.38) !important;
  transform: translateY(-50%) !important;
}

.analysis-main-wrap .rpt-field.report-shell-field.analysis-project-shell,
.analysis-main-wrap .rpt-field.report-shell-field.analysis-folder-shell {
  padding-right: 38px !important;
}

.analysis-main-wrap .rpt-field.report-shell-field.analysis-project-shell > input.rpt-input.report-shell-input,
.analysis-main-wrap .rpt-field.report-shell-field.analysis-folder-shell > input.rpt-input.report-shell-input {
  padding-right: 0 !important;
}

.analysis-main-wrap .analysis-input-clear-btn {
  right: 12px !important;
  top: 50% !important;
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--surface2) 82%, var(--surface) 18%) !important;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent 12%) !important;
  color: var(--text-dim) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  outline: none !important;
  transform: translateY(-50%) !important;
  z-index: 3 !important;
}

.analysis-main-wrap .analysis-input-clear-btn:hover,
.analysis-main-wrap .analysis-input-clear-btn:active,
.analysis-main-wrap .analysis-input-clear-btn:focus-visible {
  color: var(--accent-red) !important;
  background: rgba(224,82,82,0.1) !important;
  border-color: rgba(224,82,82,0.38) !important;
  transform: translateY(-50%) !important;
}

/* Notes toolbar selects: keep text readable despite global select padding. */
#content-notes #tb-font,
#content-notes #tb-size {
  box-sizing: border-box !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 4px 32px 4px 10px !important;
  line-height: 1.25 !important;
  font-size: 12px !important;
  font-family: var(--font-sans) !important;
  color: var(--text) !important;
  background-color: color-mix(in srgb, var(--surface) 84%, var(--input-bg) 16%) !important;
  border: 1px solid color-mix(in srgb, var(--input-border) 88%, transparent 12%) !important;
  border-radius: 6px !important;
}

#content-notes #tb-font {
  width: 176px !important;
  min-width: 176px !important;
}

#content-notes #tb-size {
  width: 76px !important;
  min-width: 76px !important;
  padding-right: 30px !important;
}

#content-notes #tb-font:focus,
#content-notes #tb-size:focus {
  background-color: color-mix(in srgb, var(--surface) 78%, var(--input-bg) 22%) !important;
  border-color: color-mix(in srgb, var(--accent-blue) 62%, var(--border) 38%) !important;
  box-shadow: none !important;
}

#content-notes #tb-font option,
#content-notes #tb-size option {
  background: var(--panel-bg) !important;
  color: var(--text) !important;
}

/* ── Notes Title True EOF Guard ────────────────────────────────────────── */
.notes-title-shell > input.notes-title-input {
  all: unset;
  box-sizing: border-box;
  display: block;
  flex: 1 1 auto;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 22px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--text) !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  caret-color: var(--text) !important;
}

.notes-title-shell > input.notes-title-input::placeholder {
  color: var(--text-dim) !important;
}

.notes-title-shell > input.notes-title-input:focus,
.notes-title-shell > input.notes-title-input:focus-visible {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ── Notes Tab Final Input Cleanup ─────────────────────────────────────── */
.notes-tab-wrap .notes-search-wrap.single-outline-field,
.notes-tab-wrap .notes-title-shell.single-outline-field {
  --field-shell-fill: color-mix(in srgb, var(--surface) 84%, var(--input-bg) 16%);
  background: var(--field-shell-fill) !important;
  border-color: color-mix(in srgb, var(--input-border) 88%, transparent 12%) !important;
  box-shadow: none !important;
}

.notes-tab-wrap .notes-search-wrap.single-outline-field:focus-within,
.notes-tab-wrap .notes-title-shell.single-outline-field:focus-within {
  border-color: color-mix(in srgb, var(--accent-blue) 62%, var(--border) 38%) !important;
  background: color-mix(in srgb, var(--surface) 78%, var(--input-bg) 22%) !important;
  box-shadow: none !important;
}

.notes-tab-wrap .notes-search-wrap.single-outline-field .notes-search-input,
.notes-tab-wrap .notes-search-wrap.single-outline-field .notes-search-input:focus,
.notes-tab-wrap .notes-search-wrap.single-outline-field .notes-search-input:focus-visible,
.notes-tab-wrap .notes-title-shell > input.notes-title-input,
.notes-tab-wrap .notes-title-shell > input.notes-title-input:focus,
.notes-tab-wrap .notes-title-shell > input.notes-title-input:focus-visible {
  background: transparent !important;
  border: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

.notes-tab-wrap button.notes-font-dropdown {
  background: color-mix(in srgb, var(--surface) 84%, var(--input-bg) 16%) !important;
  border: 1px solid color-mix(in srgb, var(--input-border) 88%, transparent 12%) !important;
  border-radius: 12px !important;
  min-height: 29px !important;
  width: 100% !important;
  padding: 0 10px !important;
  box-shadow: none !important;
  outline: none !important;
}

.notes-tab-wrap button.notes-font-dropdown:hover,
.notes-tab-wrap button.notes-font-dropdown:focus,
.notes-tab-wrap button.notes-font-dropdown:focus-visible,
.notes-tab-wrap button.notes-font-dropdown.is-focused {
  background: color-mix(in srgb, var(--surface) 78%, var(--input-bg) 22%) !important;
  border-color: color-mix(in srgb, var(--accent-blue) 62%, var(--border) 38%) !important;
  box-shadow: none !important;
  outline: none !important;
}

.notes-tab-wrap button.notes-font-dropdown,
.notes-tab-wrap button.notes-font-dropdown * {
  color: var(--text) !important;
}

.notes-tab-wrap .notes-size-input,
.notes-tab-wrap .notes-color-input {
  width: 100% !important;
  min-height: 29px !important;
  background: color-mix(in srgb, var(--surface) 84%, var(--input-bg) 16%) !important;
  border: 1px solid color-mix(in srgb, var(--input-border) 88%, transparent 12%) !important;
  border-radius: 12px !important;
  color: var(--text) !important;
  box-shadow: none !important;
  outline: none !important;
}

.notes-tab-wrap .notes-size-input {
  padding: 0 10px !important;
  font-family: var(--font-mono) !important;
  text-align: center !important;
}

.notes-tab-wrap .notes-color-input {
  padding: 2px !important;
}

.notes-tab-wrap .notes-size-input:focus,
.notes-tab-wrap .notes-size-input:focus-visible,
.notes-tab-wrap .notes-color-input:focus,
.notes-tab-wrap .notes-color-input:focus-visible {
  background: color-mix(in srgb, var(--surface) 78%, var(--input-bg) 22%) !important;
  border-color: color-mix(in srgb, var(--border2, var(--border)) 44%, var(--border) 56%) !important;
  box-shadow: none !important;
  outline: none !important;
}

.notes-tab-wrap .notes-editor-input {
  background: color-mix(in srgb, var(--surface) 86%, var(--surface2) 14%) !important;
  border: 1px solid color-mix(in srgb, var(--input-border) 88%, transparent 12%) !important;
  border-radius: 12px !important;
  color: var(--text) !important;
  box-shadow: none !important;
  outline: none !important;
}

.notes-tab-wrap .notes-editor-input:focus,
.notes-tab-wrap .notes-editor-input:focus-visible {
  background: color-mix(in srgb, var(--surface) 82%, var(--surface2) 18%) !important;
  border-color: color-mix(in srgb, var(--border2, var(--border)) 44%, var(--border) 56%) !important;
  box-shadow: none !important;
  outline: none !important;
}

.notes-tab-wrap .notes-search-input::selection,
.notes-tab-wrap .notes-title-input::selection,
.notes-tab-wrap .notes-size-input::selection,
.notes-tab-wrap .notes-editor-input::selection {
  background: transparent !important;
  color: var(--text) !important;
}

.notes-tab-wrap .notes-search-input::-moz-selection,
.notes-tab-wrap .notes-title-input::-moz-selection,
.notes-tab-wrap .notes-size-input::-moz-selection,
.notes-tab-wrap .notes-editor-input::-moz-selection {
  background: transparent !important;
  color: var(--text) !important;
}

/* ── Report Command Bar Final Neutral Cleanup ───────────────────────────── */
#content-report .report-command-bar input::selection,
#content-report .report-command-bar textarea::selection,
#content-report .report-command-bar button::selection,
#content-report .report-command-bar .report-command-input::selection {
  background: transparent !important;
  color: var(--text) !important;
}

#content-report .report-command-bar input::-moz-selection,
#content-report .report-command-bar textarea::-moz-selection,
#content-report .report-command-bar button::-moz-selection,
#content-report .report-command-bar .report-command-input::-moz-selection {
  background: transparent !important;
  color: var(--text) !important;
}

#content-report .report-command-bar .field-label,
#content-report .report-command-bar .report-config-card-label,
#content-report .report-command-bar .single-outline-label {
  background: var(--field-shell-fill, var(--surface)) !important;
}

/* ── Generated Reports Search Final Cleanup ─────────────────────────────── */
#content-report .report-generated-search-frame.single-outline-field,
#content-report .report-generated-search-frame.single-outline-field:hover,
#content-report .report-generated-search-frame.single-outline-field:focus-within {
  min-height: 44px !important;
  padding-top: 15px !important;
  padding-bottom: 6px !important;
  border-color: color-mix(in srgb, var(--border2, var(--border)) 44%, var(--border) 56%) !important;
  box-shadow: none !important;
  outline: none !important;
}

#content-report .report-generated-search-frame.single-outline-field .single-outline-label {
  top: -11px !important;
  left: 10px !important;
  padding: 0 10px !important;
  background: var(--panel-bg) !important;
}

#content-report .report-generated-search-frame.single-outline-field .report-generated-search-input,
#content-report .report-generated-search-frame.single-outline-field .report-generated-search-input:focus,
#content-report .report-generated-search-frame.single-outline-field .report-generated-search-input:focus-visible {
  all: unset;
  box-sizing: border-box;
  display: block;
  flex: 1 1 auto;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 22px !important;
  margin: 1px 0 0 !important;
  padding: 0 26px 0 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--text) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
}

#content-report .report-generated-search-frame.single-outline-field .report-generated-search-clear {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--surface2) 82%, var(--surface) 18%) !important;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent 12%) !important;
  color: var(--text-dim) !important;
  font-size: 12px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  outline: none !important;
  z-index: 2 !important;
}

#content-report .report-generated-search-frame.single-outline-field .report-generated-search-clear:hover,
#content-report .report-generated-search-frame.single-outline-field .report-generated-search-clear:focus-visible {
  color: var(--accent-red) !important;
  background: rgba(224,82,82,0.1) !important;
  border-color: rgba(224,82,82,0.38) !important;
}

/* ── Report Filename Actual EOF Guard ──────────────────────────────────── */
#content-report .report-command-cell.report-command-filename .report-command-input,
#content-report .report-command-cell.report-command-filename input.rpt-input.report-command-input,
#content-report .report-command-cell.report-command-filename input.report-command-input {
  all: unset;
  box-sizing: border-box;
  display: block;
  flex: 1 1 auto;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 24px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  outline: none !important;
  color: var(--text) !important;
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  caret-color: var(--text) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

#content-report .report-command-cell.report-command-filename .report-command-input::placeholder,
#content-report .report-command-cell.report-command-filename input.rpt-input.report-command-input::placeholder,
#content-report .report-command-cell.report-command-filename input.report-command-input::placeholder {
  color: var(--text-dim) !important;
}

#content-report .report-command-cell.report-command-filename .report-command-input:focus,
#content-report .report-command-cell.report-command-filename .report-command-input:focus-visible,
#content-report .report-command-cell.report-command-filename input.rpt-input.report-command-input:focus,
#content-report .report-command-cell.report-command-filename input.rpt-input.report-command-input:focus-visible,
#content-report .report-command-cell.report-command-filename input.report-command-input:focus,
#content-report .report-command-cell.report-command-filename input.report-command-input:focus-visible {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  outline: none !important;
}

/* ── Report Filename True EOF Guard ────────────────────────────────────── */
#content-report .report-command-cell.report-command-filename .report-command-input,
#content-report .report-command-cell.report-command-filename input.rpt-input.report-command-input,
#content-report .report-command-cell.report-command-filename input.report-command-input {
  all: unset;
  box-sizing: border-box;
  display: block;
  flex: 1 1 auto;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 24px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  outline: none !important;
  color: var(--text) !important;
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  caret-color: var(--text) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

#content-report .report-command-cell.report-command-filename .report-command-input::placeholder,
#content-report .report-command-cell.report-command-filename input.rpt-input.report-command-input::placeholder,
#content-report .report-command-cell.report-command-filename input.report-command-input::placeholder {
  color: var(--text-dim) !important;
}

#content-report .report-command-cell.report-command-filename .report-command-input:focus,
#content-report .report-command-cell.report-command-filename .report-command-input:focus-visible,
#content-report .report-command-cell.report-command-filename input.rpt-input.report-command-input:focus,
#content-report .report-command-cell.report-command-filename input.rpt-input.report-command-input:focus-visible,
#content-report .report-command-cell.report-command-filename input.report-command-input:focus,
#content-report .report-command-cell.report-command-filename input.report-command-input:focus-visible {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  outline: none !important;
}

/* ── Sample Inputs Use Report Field Styling ────────────────────────────── */
.analysis-main-wrap .rpt-field.report-shell-field.analysis-project-shell,
.analysis-main-wrap .rpt-field.report-shell-field.analysis-folder-shell {
  --field-shell-fill: color-mix(in srgb, var(--surface) 84%, var(--surface2) 16%);
  --material-field-label-bg: color-mix(in srgb, var(--surface) 88%, var(--surface2) 12%);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--border) 28%, var(--border) 72%);
  border-radius: 12px;
  background: var(--field-shell-fill);
  padding: 10px 12px 6px;
  transition: border-color 0.14s ease, background 0.14s ease;
  overflow: visible;
  box-shadow: none !important;
}

.analysis-main-wrap .rpt-field.report-shell-field.analysis-project-shell:hover,
.analysis-main-wrap .rpt-field.report-shell-field.analysis-project-shell:focus-within,
.analysis-main-wrap .rpt-field.report-shell-field.analysis-folder-shell:hover,
.analysis-main-wrap .rpt-field.report-shell-field.analysis-folder-shell:focus-within {
  border-color: color-mix(in srgb, var(--accent-blue) 62%, var(--border) 38%);
  box-shadow: none !important;
}

.analysis-main-wrap .rpt-field.report-shell-field.analysis-project-shell > .field-label,
.analysis-main-wrap .rpt-field.report-shell-field.analysis-folder-shell > .field-label {
  z-index: 2;
  background: var(--material-field-label-bg);
}

.analysis-main-wrap .rpt-field.report-shell-field.analysis-project-shell:focus-within > .field-label,
.analysis-main-wrap .rpt-field.report-shell-field.analysis-folder-shell:focus-within > .field-label {
  color: var(--accent-blue) !important;
}

.analysis-main-wrap .rpt-field.report-shell-field.analysis-project-shell > .report-shell-input,
.analysis-main-wrap .rpt-field.report-shell-field.analysis-project-shell > input:not(.date-native-input),
.analysis-main-wrap .rpt-field.report-shell-field.analysis-folder-shell > .report-shell-input,
.analysis-main-wrap .rpt-field.report-shell-field.analysis-folder-shell > input:not(.date-native-input) {
  box-sizing: border-box;
  display: block;
  flex: 1 1 auto;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 24px !important;
  padding: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--text) !important;
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  caret-color: var(--text) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.analysis-main-wrap .rpt-field.report-shell-field.analysis-project-shell > .report-shell-input::placeholder,
.analysis-main-wrap .rpt-field.report-shell-field.analysis-project-shell > input:not(.date-native-input)::placeholder,
.analysis-main-wrap .rpt-field.report-shell-field.analysis-folder-shell > .report-shell-input::placeholder,
.analysis-main-wrap .rpt-field.report-shell-field.analysis-folder-shell > input:not(.date-native-input)::placeholder {
  color: var(--text-dim) !important;
}

.analysis-main-wrap .rpt-field.report-shell-field.analysis-project-shell > .report-shell-input:focus,
.analysis-main-wrap .rpt-field.report-shell-field.analysis-project-shell > .report-shell-input:focus-visible,
.analysis-main-wrap .rpt-field.report-shell-field.analysis-project-shell > input:not(.date-native-input):focus,
.analysis-main-wrap .rpt-field.report-shell-field.analysis-project-shell > input:not(.date-native-input):focus-visible,
.analysis-main-wrap .rpt-field.report-shell-field.analysis-folder-shell > .report-shell-input:focus,
.analysis-main-wrap .rpt-field.report-shell-field.analysis-folder-shell > .report-shell-input:focus-visible,
.analysis-main-wrap .rpt-field.report-shell-field.analysis-folder-shell > input:not(.date-native-input):focus,
.analysis-main-wrap .rpt-field.report-shell-field.analysis-folder-shell > input:not(.date-native-input):focus-visible {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ── Sample Inputs Raw Input Targeting Fix ─────────────────────────────── */
.analysis-main-wrap .rpt-field.report-shell-field.analysis-project-shell > input.rpt-input.report-shell-input,
.analysis-main-wrap .rpt-field.report-shell-field.analysis-folder-shell > input.rpt-input.report-shell-input {
  all: unset;
  box-sizing: border-box;
  display: block;
  flex: 1 1 auto;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 24px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--text) !important;
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  caret-color: var(--text) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.analysis-main-wrap .rpt-field.report-shell-field.analysis-project-shell > input.rpt-input.report-shell-input::placeholder,
.analysis-main-wrap .rpt-field.report-shell-field.analysis-folder-shell > input.rpt-input.report-shell-input::placeholder {
  color: var(--text-dim) !important;
}

.analysis-main-wrap .rpt-field.report-shell-field.analysis-project-shell > input.rpt-input.report-shell-input:focus,
.analysis-main-wrap .rpt-field.report-shell-field.analysis-project-shell > input.rpt-input.report-shell-input:focus-visible,
.analysis-main-wrap .rpt-field.report-shell-field.analysis-folder-shell > input.rpt-input.report-shell-input:focus,
.analysis-main-wrap .rpt-field.report-shell-field.analysis-folder-shell > input.rpt-input.report-shell-input:focus-visible {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ── Sample Inputs Descendant Raw Input Fix ────────────────────────────── */
.analysis-main-wrap .rpt-field.report-shell-field.analysis-project-shell input:not(.date-native-input),
.analysis-main-wrap .rpt-field.report-shell-field.analysis-folder-shell input:not(.date-native-input) {
  all: unset;
  box-sizing: border-box;
  display: block;
  flex: 1 1 auto;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 24px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--text) !important;
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  caret-color: var(--text) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.analysis-main-wrap .rpt-field.report-shell-field.analysis-project-shell input:not(.date-native-input)::placeholder,
.analysis-main-wrap .rpt-field.report-shell-field.analysis-folder-shell input:not(.date-native-input)::placeholder {
  color: var(--text-dim) !important;
}

.analysis-main-wrap .rpt-field.report-shell-field.analysis-project-shell input:not(.date-native-input):focus,
.analysis-main-wrap .rpt-field.report-shell-field.analysis-project-shell input:not(.date-native-input):focus-visible,
.analysis-main-wrap .rpt-field.report-shell-field.analysis-folder-shell input:not(.date-native-input):focus,
.analysis-main-wrap .rpt-field.report-shell-field.analysis-folder-shell input:not(.date-native-input):focus-visible {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ── Report Filename Raw Input Fix ─────────────────────────────────────── */
#content-report .report-command-cell.report-command-filename input.report-command-input {
  all: unset;
  box-sizing: border-box;
  display: block;
  flex: 1 1 auto;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 24px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  outline: none !important;
  color: var(--text) !important;
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  caret-color: var(--text) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

#content-report .report-command-cell.report-command-filename input.report-command-input::placeholder {
  color: var(--text-dim) !important;
}

#content-report .report-command-cell.report-command-filename input.report-command-input:focus,
#content-report .report-command-cell.report-command-filename input.report-command-input:focus-visible {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  outline: none !important;
}

/* ── App-Wide Text Field Focus Cleanup ─────────────────────────────────── */
.single-outline-field:focus-within,
.analysis-main-wrap .analysis-shell-field:focus-within,
.field-group:focus-within,
.report-section-card .rpt-field:focus-within,
.report-command-cell:focus-within,
.notes-search-wrap:focus-within,
.samples-search-frame:focus-within,
.report-generated-search-frame:focus-within,
.color-picker-row:focus-within,
.appearance-margin-stepper:focus-within {
  border-color: color-mix(in srgb, var(--accent-blue) 62%, var(--border) 38%) !important;
  box-shadow: none !important;
}

input:focus,
input:focus-visible,
textarea:focus,
textarea:focus-visible,
select:focus,
select:focus-visible,
.theme-input:focus,
.path-input:focus,
.rpt-input:focus,
.browser-url-input:focus,
.app-confirm-text-input:focus,
.notes-search-input:focus,
.notes-title-input:focus,
.notes-editor-input:focus,
.report-generated-search-input:focus,
.color-hex-input.appearance-hex-input:focus,
.samples-group-name-input:focus,
.srb-caller-limit-input:focus,
.srb-caller-limit-input:focus-visible {
  border-color: color-mix(in srgb, var(--border2, var(--border)) 44%, var(--border) 56%) !important;
  outline: none !important;
  box-shadow: none !important;
}

.single-outline-field > input:not([type="color"]):not([type="checkbox"]):not([type="radio"]),
.single-outline-field > textarea,
.analysis-main-wrap .analysis-shell-field > input.analysis-shell-input,
.report-command-cell.report-command-filename > input.report-command-input,
.notes-title-shell > input.notes-title-input,
.browser-url-shell > input.browser-url-input,
.appearance-custom-name-shell > input,
.appearance-margin-stepper > input.appearance-margin-input,
.sys-console-command-shell > input.sys-console-command-input,
.report-section-card .rpt-field.report-shell-field > input:not(.date-native-input),
.report-section-card .rpt-field.report-shell-field .autocomplete-wrapper input:not(.date-native-input),
.report-section-card .rpt-field.report-shell-field .date-field-wrapper input.date-display-input:not(.date-native-input),
.report-section-card .rpt-field.report-shell-field textarea {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  outline: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.single-outline-field > input:not([type="color"]):not([type="checkbox"]):not([type="radio"]):focus,
.single-outline-field > input:not([type="color"]):not([type="checkbox"]):not([type="radio"]):focus-visible,
.single-outline-field > textarea:focus,
.single-outline-field > textarea:focus-visible,
.analysis-main-wrap .analysis-shell-field > input.analysis-shell-input:focus,
.analysis-main-wrap .analysis-shell-field > input.analysis-shell-input:focus-visible,
.report-command-cell.report-command-filename > input.report-command-input:focus,
.report-command-cell.report-command-filename > input.report-command-input:focus-visible,
.notes-title-shell > input.notes-title-input:focus,
.notes-title-shell > input.notes-title-input:focus-visible,
.browser-url-shell > input.browser-url-input:focus,
.browser-url-shell > input.browser-url-input:focus-visible,
.appearance-custom-name-shell > input:focus,
.appearance-custom-name-shell > input:focus-visible,
.appearance-margin-stepper > input.appearance-margin-input:focus,
.appearance-margin-stepper > input.appearance-margin-input:focus-visible,
.sys-console-command-shell > input.sys-console-command-input:focus,
.sys-console-command-shell > input.sys-console-command-input:focus-visible,
.report-section-card .rpt-field.report-shell-field > input:not(.date-native-input):focus,
.report-section-card .rpt-field.report-shell-field > input:not(.date-native-input):focus-visible,
.report-section-card .rpt-field.report-shell-field .autocomplete-wrapper input:not(.date-native-input):focus,
.report-section-card .rpt-field.report-shell-field .autocomplete-wrapper input:not(.date-native-input):focus-visible,
.report-section-card .rpt-field.report-shell-field .date-field-wrapper input.date-display-input:not(.date-native-input):focus,
.report-section-card .rpt-field.report-shell-field .date-field-wrapper input.date-display-input:not(.date-native-input):focus-visible,
.report-section-card .rpt-field.report-shell-field textarea:focus,
.report-section-card .rpt-field.report-shell-field textarea:focus-visible {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  outline: none !important;
}

/* ── Sample Input Absolute Final Guard ─────────────────────────────────── */
.analysis-main-wrap .single-outline-field.analysis-project-shell > input.analysis-project-input,
.analysis-main-wrap .single-outline-field.analysis-folder-shell > input.path-input {
  all: unset;
  box-sizing: border-box;
  display: block;
  flex: 1 1 auto;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 22px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--text) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  caret-color: var(--text) !important;
}

.analysis-main-wrap .single-outline-field.analysis-project-shell > input.analysis-project-input::placeholder,
.analysis-main-wrap .single-outline-field.analysis-folder-shell > input.path-input::placeholder {
  color: var(--text-dim) !important;
}

.analysis-main-wrap .single-outline-field.analysis-project-shell > input.analysis-project-input:focus,
.analysis-main-wrap .single-outline-field.analysis-folder-shell > input.path-input:focus {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ── Sample Input Final Guard ──────────────────────────────────────────── */
.analysis-project-shell > input.analysis-project-input,
.analysis-folder-shell > input.path-input {
  all: unset;
  box-sizing: border-box;
  display: block;
  flex: 1 1 auto;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 22px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--text) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  caret-color: var(--text) !important;
}

.analysis-project-shell > input.analysis-project-input::placeholder,
.analysis-folder-shell > input.path-input::placeholder {
  color: var(--text-dim) !important;
}

.analysis-project-shell > input.analysis-project-input:focus,
.analysis-folder-shell > input.path-input:focus {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ── Native Input Guard For Shell Fields ───────────────────────────────── */
.single-outline-field > input:not([type="color"]):not([type="checkbox"]):not([type="radio"]),
.single-outline-field > textarea,
.report-command-cell.report-command-filename > input.report-command-input,
.appearance-margin-stepper > input.appearance-margin-input {
  box-sizing: border-box;
  display: block;
  flex: 1 1 auto;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

.single-outline-field > input:not([type="color"]):not([type="checkbox"]):not([type="radio"]),
.report-command-cell.report-command-filename > input.report-command-input {
  min-height: 22px !important;
  height: auto !important;
  padding: 0 !important;
}

.single-outline-field > textarea {
  padding: 0 !important;
}

.single-outline-field > input:not([type="color"]):not([type="checkbox"]):not([type="radio"]):focus,
.single-outline-field > textarea:focus,
.report-command-cell.report-command-filename > input.report-command-input:focus,
.appearance-margin-stepper > input.appearance-margin-input:focus {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.appearance-margin-stepper {
  transition: border-color 0.16s ease, background 0.16s ease;
}

.appearance-margin-stepper:focus-within {
  border-color: color-mix(in srgb, var(--accent-blue) 62%, var(--border) 38%) !important;
}

.appearance-margin-stepper > input.appearance-margin-input {
  width: 70px !important;
  min-width: 70px !important;
  max-width: 70px !important;
  min-height: 22px !important;
  height: auto !important;
  padding: 0 4px !important;
  text-align: center !important;
}

.sys-console-command-shell > input.sys-console-command-input {
  font-family: var(--font-mono) !important;
}

/* ── Sample Input Shell Guard ──────────────────────────────────────────── */
.analysis-project-shell > input.analysis-project-input,
.analysis-folder-shell > input.path-input {
  all: unset;
  box-sizing: border-box;
  display: block;
  flex: 1 1 auto;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 22px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--text) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  caret-color: var(--text) !important;
}

.analysis-project-shell > input.analysis-project-input::placeholder,
.analysis-folder-shell > input.path-input::placeholder {
  color: var(--text-dim) !important;
}

.analysis-project-shell > input.analysis-project-input:focus,
.analysis-folder-shell > input.path-input:focus {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Make inner controls visually merge with the outer shell, but keep blue focus. */
#content-report .field-group,
#content-report .report-command-cell,
.single-outline-field {
  --field-inner-fill: var(--field-shell-fill, var(--material-field-bg, var(--surface)));
}

/* Match the search-field floating title highlight across report inputs. */
#content-report .report-section-card .rpt-field:focus-within > .field-label,
#content-report .rpt-field.field-group:focus-within > .field-label,
#content-report .report-command-cell:focus-within > .field-label,
#content-report .report-command-cell:focus-within > .report-config-card-label {
  color: var(--accent-blue) !important;
}

/* Give report tab shells the same focused fill shift as the single-outline search fields. */
#content-report .report-section-card .rpt-field:focus-within,
#content-report .rpt-field.field-group:focus-within,
#content-report .report-command-cell:focus-within {
  border-color: color-mix(in srgb, var(--accent-blue) 62%, var(--border) 38%) !important;
  --field-shell-fill: color-mix(in srgb, var(--surface) 78%, var(--input-bg) 22%);
  --material-field-bg: var(--field-shell-fill);
  background: var(--field-shell-fill) !important;
  box-shadow: none !important;
}

#content-report .rpt-field.field-group input.field-input:not(.date-native-input),
#content-report .rpt-field.field-group textarea.field-textarea,
#content-report .rpt-field.field-group button.rpt-dark-dropdown.field-input,
#content-report .rpt-field.field-group .autocomplete-wrapper,
#content-report .rpt-field.field-group .date-field-wrapper,
#content-report .report-command-cell .report-command-input {
  background: transparent !important;
  border-color: transparent !important;
  border-style: solid !important;
  border-width: 1px !important;
  border-radius: 10px !important;
}

.single-outline-field input:not([type="color"]):not([type="checkbox"]):not([type="radio"]),
.single-outline-field textarea {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}

#content-report .rpt-field.field-group input.field-input:not(.date-native-input):focus,
#content-report .rpt-field.field-group textarea.field-textarea:focus,
#content-report .rpt-field.field-group button.rpt-dark-dropdown.field-input:focus,
#content-report .rpt-field.field-group .autocomplete-wrapper:focus-within > input.field-input,
#content-report .rpt-field.field-group .date-field-wrapper:focus-within > input.field-input:not(.date-native-input),
#content-report .report-command-cell .report-command-input:focus,
#content-report .report-command-cell .report-command-input.is-focused,
.single-outline-field input:not([type="color"]):not([type="checkbox"]):not([type="radio"]):focus,
.single-outline-field textarea:focus {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* ── App Scrollbars ────────────────────────────────────────────────────── */
#root-div,
#root-div * {
  scrollbar-color: var(--border) transparent;
}

#root-div *::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

#root-div *::-webkit-scrollbar-track {
  background: transparent;
}

#root-div *::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--border) 88%, var(--surface2) 12%);
  border-radius: 999px;
}

#root-div *::-webkit-scrollbar-corner {
  background: transparent;
}

/* Report narrative textareas: keep scroll behavior but hide the native inner bar. */
#content-report .field-textarea {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#content-report .field-textarea::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.notes-search-wrap.single-outline-field .notes-search-clear,
.samples-search-frame.single-outline-field .samples-search-clear-v3,
.report-generated-search-frame.single-outline-field .report-generated-search-clear {
  min-height: 22px;
  padding: 0 8px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.notes-search-wrap.single-outline-field .notes-search-clear:hover,
.samples-search-frame.single-outline-field .samples-search-clear-v3:hover,
.report-generated-search-frame.single-outline-field .report-generated-search-clear:hover {
  background: color-mix(in srgb, var(--surface2) 84%, transparent 16%) !important;
}

.appearance-color-shell .appearance-color-input {
  width: 22px !important;
  min-width: 22px;
  height: 22px !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 7px !important;
  flex-shrink: 0;
}

.appearance-color-shell .appearance-hex-input {
  font-family: var(--font-mono) !important;
}

.color-picker-card {
  background: transparent;
  border: none;
  padding: 0;
  gap: 0;
}

/* ── Report Single Border Guard ────────────────────────────────────────── */
#content-report .rpt-field.field-group > input.rpt-input.field-input,
#content-report .rpt-field.field-group > textarea.field-textarea,
#content-report .rpt-field.field-group .autocomplete-wrapper > input.rpt-input.field-input,
#content-report .rpt-field.field-group .date-field-wrapper > input.field-input,
#content-report .rpt-field.field-group button.rpt-dark-dropdown.field-input {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  box-shadow: none !important;
  outline: none !important;
}

#content-report .rpt-field.field-group > input.rpt-input.field-input,
#content-report .rpt-field.field-group > textarea.field-textarea,
#content-report .rpt-field.field-group button.rpt-dark-dropdown.field-input {
  padding: 0 !important;
}

#content-report .rpt-field.field-group .autocomplete-wrapper > input.rpt-input.field-input {
  padding: 0 24px 0 0 !important;
}

#content-report .rpt-field.field-group .date-field-wrapper > input.field-input {
  padding: 0 194px 0 0 !important;
}

/* Hard reset the inner text control so only the shell outline is visible. */
#content-report .rpt-field.field-group input.field-input:not(.date-native-input),
#content-report .rpt-field.field-group textarea.field-textarea {
  all: unset;
  box-sizing: border-box;
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  color: var(--text) !important;
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  caret-color: var(--text) !important;
  background: transparent !important;
  border: 1px solid var(--field-shell-fill, transparent) !important;
  box-shadow: none !important;
  outline: none !important;
}

.single-outline-field input:not([type="color"]):not([type="checkbox"]):not([type="radio"]),
.single-outline-field textarea {
  all: unset;
  box-sizing: border-box;
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  color: var(--text) !important;
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  caret-color: var(--text) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

#content-report .rpt-field.field-group textarea.field-textarea,
.single-outline-field textarea {
  resize: vertical;
}

#content-report .rpt-field.field-group > input.rpt-input.field-input,
#content-report .rpt-field.field-group > textarea.field-textarea {
  padding: 0 !important;
  min-height: 24px !important;
}

#content-report .rpt-field.field-group .autocomplete-wrapper,
#content-report .rpt-field.field-group .date-field-wrapper,
.single-outline-field .autocomplete-wrapper,
.single-outline-field .date-field-wrapper {
  background: var(--field-shell-fill, transparent) !important;
}

#content-report .rpt-field.field-group .autocomplete-wrapper > input.rpt-input.field-input {
  padding: 0 24px 0 0 !important;
  min-height: 24px !important;
}

#content-report .rpt-field.field-group .date-field-wrapper > input.field-input:not(.date-native-input) {
  padding: 0 194px 0 0 !important;
  min-height: 24px !important;
}

/* Plain report text inputs use the same compact X clear control. */
#content-report .report-clearable-field {
  padding-right: 38px !important;
}

#content-report .report-clearable-field > input.report-shell-input,
#content-report .report-clearable-field > textarea.report-shell-input {
  padding-right: 0 !important;
}

#content-report .report-command-filename {
  position: relative;
  padding-right: 38px !important;
}

#content-report .report-command-filename-input {
  padding-right: 0 !important;
}

#content-report .rpt-clear-btn,
#content-report .rpt-clear-btn:hover,
#content-report .rpt-clear-btn:active,
#content-report .rpt-clear-btn:focus-visible {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--surface2) 82%, var(--surface) 18%) !important;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent 12%) !important;
  color: var(--text-dim) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  outline: none !important;
  transform: translateY(-50%) !important;
  z-index: 4 !important;
}

#content-report .rpt-clear-btn:hover,
#content-report .rpt-clear-btn:active,
#content-report .rpt-clear-btn:focus-visible {
  color: var(--accent-red) !important;
  background: rgba(224,82,82,0.1) !important;
  border-color: rgba(224,82,82,0.38) !important;
}

#content-report .rpt-textarea-clear-btn,
#content-report .rpt-textarea-clear-btn:hover,
#content-report .rpt-textarea-clear-btn:active,
#content-report .rpt-textarea-clear-btn:focus-visible {
  top: 21px !important;
  transform: none !important;
}

/* ── Text Input Clear X True EOF Guard ─────────────────────────────────── */
#content-samples .samples-search-frame.single-outline-field,
#content-notes .samples-search-frame.single-outline-field {
  padding-right: 34px !important;
}

#content-samples .samples-search-frame.single-outline-field .samples-search-clear-v3,
#content-notes .samples-search-frame.single-outline-field .samples-search-clear-v3 {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--surface2) 82%, var(--surface) 18%) !important;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent 12%) !important;
  color: var(--text-dim) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  outline: none !important;
  transform: translateY(-50%) !important;
  z-index: 3 !important;
}

#content-samples .samples-search-frame.single-outline-field .samples-search-clear-v3:hover,
#content-samples .samples-search-frame.single-outline-field .samples-search-clear-v3:active,
#content-samples .samples-search-frame.single-outline-field .samples-search-clear-v3:focus-visible,
#content-notes .samples-search-frame.single-outline-field .samples-search-clear-v3:hover,
#content-notes .samples-search-frame.single-outline-field .samples-search-clear-v3:active,
#content-notes .samples-search-frame.single-outline-field .samples-search-clear-v3:focus-visible {
  color: var(--accent-red) !important;
  background: rgba(224,82,82,0.1) !important;
  border-color: rgba(224,82,82,0.38) !important;
  transform: translateY(-50%) !important;
}

.analysis-main-wrap .rpt-field.report-shell-field.analysis-project-shell,
.analysis-main-wrap .rpt-field.report-shell-field.analysis-folder-shell {
  padding-right: 38px !important;
}

.analysis-main-wrap .analysis-input-clear-btn {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--surface2) 82%, var(--surface) 18%) !important;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent 12%) !important;
  color: var(--text-dim) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  outline: none !important;
  transform: translateY(-50%) !important;
  z-index: 3 !important;
}

.analysis-main-wrap .analysis-input-clear-btn:hover,
.analysis-main-wrap .analysis-input-clear-btn:active,
.analysis-main-wrap .analysis-input-clear-btn:focus-visible {
  color: var(--accent-red) !important;
  background: rgba(224,82,82,0.1) !important;
  border-color: rgba(224,82,82,0.38) !important;
  transform: translateY(-50%) !important;
}

/* Keep the folder path input visually centered below the file-type chips. */
.analysis-main-wrap .analysis-input-path-row {
  margin-top: 34px !important;
}

.analysis-main-wrap .rpt-field.report-shell-field.analysis-folder-shell > .field-label {
  top: -3px !important;
}

#content-samples .samples-search-shell-v2 {
  margin-top: 18px !important;
}

.notes-title-shell .notes-title-input {
  font-size: 14px !important;
  font-weight: 700 !important;
}

/* ── Sample Input True EOF Guard ───────────────────────────────────────── */
.analysis-main-wrap .single-outline-field.analysis-project-shell > input.analysis-project-input,
.analysis-main-wrap .single-outline-field.analysis-folder-shell > input.path-input {
  all: unset;
  box-sizing: border-box;
  display: block;
  flex: 1 1 auto;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 22px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--text) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  caret-color: var(--text) !important;
}

.analysis-main-wrap .single-outline-field.analysis-project-shell > input.analysis-project-input::placeholder,
.analysis-main-wrap .single-outline-field.analysis-folder-shell > input.path-input::placeholder {
  color: var(--text-dim) !important;
}

.analysis-main-wrap .single-outline-field.analysis-project-shell > input.analysis-project-input:focus,
.analysis-main-wrap .single-outline-field.analysis-folder-shell > input.path-input:focus {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ── Topbar User Input Absolute EOF Guard ───────────────────────────────── */
#topbar-user-menu .topbar-user-add-grid .topbar-user-field {
  --material-field-label-bg: var(--topbar-user-menu-bg, var(--surface));
  min-height: 44px !important;
  padding: 13px 12px 7px !important;
  border: 1px solid color-mix(in srgb, var(--accent-blue) 34%, var(--border) 66%) !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--surface) 88%, var(--surface2) 12%) !important;
  box-shadow: none !important;
}

#topbar-user-menu .topbar-user-add-grid .topbar-user-field:focus-within,
#topbar-user-menu .topbar-user-add-grid .topbar-user-field:hover {
  border-color: color-mix(in srgb, var(--accent-blue) 68%, var(--border) 32%) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-blue) 16%, transparent) !important;
}

#topbar-user-menu .topbar-user-add-grid .topbar-user-field > input.topbar-user-input,
#topbar-user-menu .topbar-user-add-grid .topbar-user-field > input.topbar-user-input:focus,
#topbar-user-menu .topbar-user-add-grid .topbar-user-field > input.topbar-user-input:focus-visible {
  all: unset;
  box-sizing: border-box;
  display: block;
  width: 100% !important;
  min-width: 0 !important;
  height: 22px !important;
  min-height: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--text) !important;
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  caret-color: var(--text) !important;
}

body.light-theme #topbar-user-menu .topbar-user-add-grid .topbar-user-field {
  background: #ffffff !important;
  border-color: #cbd7ea !important;
}

body.light-theme #topbar-user-menu .topbar-user-add-grid .topbar-user-field:focus-within,
body.light-theme #topbar-user-menu .topbar-user-add-grid .topbar-user-field:hover {
  border-color: #4f8ddf !important;
}