:root {
  --sq-font-family: var(--bs-body-font-family, "Segoe UI", sans-serif);
  --sq-font-size-xs: clamp(0.76rem, 0.74rem + 0.12vw, 0.82rem);
  --sq-font-size-sm: clamp(0.86rem, 0.83rem + 0.16vw, 0.93rem);
  --sq-font-size-md: clamp(0.96rem, 0.93rem + 0.22vw, 1rem);
  --sq-font-size-lg: clamp(1.04rem, 1rem + 0.36vw, 1.16rem);
  --sq-font-size-xl: clamp(1.18rem, 1.09rem + 0.58vw, 1.4rem);
  --sq-font-size-2xl: clamp(1.5rem, 1.28rem + 1.08vw, 1.95rem);
  --sq-font-size-3xl: clamp(1.82rem, 1.48rem + 1.6vw, 2.3rem);
  --sq-weight-regular: 400;
  --sq-weight-medium: 500;
  --sq-weight-semibold: 600;
  --sq-weight-bold: 700;
  --sq-bg: #fffdf8;
  --sq-panel: #fff7eb;
  --sq-card: #ffffff;
  --sq-ink: #19323c;
  --sq-muted: #60757d;
  --sq-line: #eadfca;
  --sq-primary: #0f766e;
  --sq-primary-soft: #d7f3ed;
  --sq-secondary: #f59e0b;
  --sq-secondary-soft: #fff0cf;
  --sq-danger: #c0392b;
  --sq-danger-soft: #fde6e2;
  --sq-success: #1d8348;
  --sq-success-soft: #dff4e8;
  --sq-shadow: 0 18px 40px rgba(25, 50, 60, 0.08);
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  background:
    radial-gradient(circle at top right, rgba(245, 158, 11, 0.12), transparent 28%),
    linear-gradient(180deg, #fffdf8 0%, #fff8ef 100%);
  color: var(--sq-ink);
  font-family: var(--sq-font-family);
  font-size: var(--sq-font-size-md);
  font-weight: var(--sq-weight-regular);
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6,
.accordion-button,
.btn,
.form-label,
.badge,
th {
  font-family: var(--sq-font-family);
}

h1 {
  font-size: var(--sq-font-size-3xl);
  font-weight: var(--sq-weight-semibold);
}

h2 {
  font-size: var(--sq-font-size-2xl);
  font-weight: var(--sq-weight-semibold);
}

h3 {
  font-size: clamp(1.34rem, 1.18rem + 0.86vw, 1.72rem);
  font-weight: var(--sq-weight-semibold);
}

h4 {
  font-size: var(--sq-font-size-xl);
  font-weight: var(--sq-weight-semibold);
}

h5 {
  font-size: var(--sq-font-size-lg);
  font-weight: var(--sq-weight-semibold);
}

h6 {
  font-size: var(--sq-font-size-md);
  font-weight: var(--sq-weight-semibold);
}

p,
li,
label,
input,
select,
textarea,
.form-control,
.form-select,
.dash-table-tooltip,
.ag-root-wrapper,
.ag-cell,
.ag-header-cell-text {
  font-size: var(--sq-font-size-md);
}

small,
.small,
.text-muted,
.form-text {
  font-size: var(--sq-font-size-sm) !important;
}

.btn {
  font-size: var(--sq-font-size-sm);
  font-weight: var(--sq-weight-semibold);
  letter-spacing: 0.01em;
}

.form-label {
  font-size: var(--sq-font-size-sm);
  font-weight: var(--sq-weight-semibold);
}

.sq-module-hero {
  background: linear-gradient(135deg, rgba(15, 118, 110, 0.08), rgba(245, 158, 11, 0.1));
  border: 1px solid rgba(15, 118, 110, 0.14);
  border-radius: 24px;
  box-shadow: var(--sq-shadow);
  padding: 1.2rem 1.2rem 1.05rem;
}

.sq-module-eyebrow {
  color: var(--sq-primary);
  font-size: var(--sq-font-size-xs);
  font-weight: var(--sq-weight-bold);
  letter-spacing: 0.08em;
  margin-bottom: 0.45rem;
  text-transform: uppercase;
}

.sq-module-hero-top {
  align-items: flex-start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.sq-module-title {
  color: var(--sq-ink);
  font-size: var(--sq-font-size-2xl);
  font-weight: var(--sq-weight-semibold);
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: 0.4rem;
}

.sq-module-summary {
  color: var(--sq-muted);
  font-size: var(--sq-font-size-md);
  margin-bottom: 0;
  max-width: 48rem;
}

.sq-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: flex-end;
}

.sq-badge {
  border-radius: 999px;
  display: inline-flex;
  font-size: var(--sq-font-size-xs);
  font-weight: var(--sq-weight-bold);
  letter-spacing: 0.02em;
  padding: 0.34rem 0.72rem;
  white-space: nowrap;
}

.sq-badge-default,
.sq-badge-review {
  background: #eef2ff;
  color: #3f51b5;
}

.sq-badge-recommended {
  background: var(--sq-primary-soft);
  color: var(--sq-primary);
}

.sq-badge-automatic {
  background: #ecfeff;
  color: #0f766e;
}

.sq-badge-required {
  background: var(--sq-secondary-soft);
  color: #a16207;
}

.sq-badge-optional {
  background: #f3f4f6;
  color: #4b5563;
}

.sq-badge-results,
.sq-badge-ready {
  background: var(--sq-success-soft);
  color: var(--sq-success);
}

.sq-step-overview {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-top: 1.1rem;
}

.sq-step-chip {
  -webkit-appearance: none;
  align-items: center;
  appearance: none;
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(15, 118, 110, 0.12);
  border-radius: 18px;
  color: var(--sq-ink);
  cursor: pointer;
  display: flex;
  gap: 0.7rem;
  outline: none;
  padding: 0.75rem 0.9rem;
  text-align: left;
  transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
  width: 100%;
}

.sq-step-chip:hover {
  border-color: rgba(15, 118, 110, 0.28);
  transform: translateY(-1px);
}

.sq-step-chip:focus-visible {
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.18);
}

.sq-step-chip-state {
  color: var(--sq-muted);
  font-size: var(--sq-font-size-sm);
  font-weight: var(--sq-weight-bold);
  min-width: 0.9rem;
}

.sq-step-chip-number {
  align-items: center;
  background: var(--sq-ink);
  border-radius: 999px;
  color: white;
  display: inline-flex;
  font-size: var(--sq-font-size-sm);
  font-weight: var(--sq-weight-bold);
  height: 1.9rem;
  justify-content: center;
  width: 1.9rem;
}

.sq-step-chip-label {
  color: var(--sq-ink);
  font-size: var(--sq-font-size-sm);
  font-weight: var(--sq-weight-semibold);
}

.sq-step-chip-pending {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(96, 117, 125, 0.18);
}

.sq-step-chip-pending .sq-step-chip-number {
  background: #8a9aa0;
}

.sq-step-chip-pending .sq-step-chip-label,
.sq-step-chip-pending .sq-step-chip-state {
  color: var(--sq-muted);
}

.sq-step-chip-active {
  background: var(--sq-primary-soft);
  border-color: rgba(15, 118, 110, 0.35);
  box-shadow: 0 10px 24px rgba(15, 118, 110, 0.12);
}

.sq-step-chip-active .sq-step-chip-number {
  background: var(--sq-primary);
}

.sq-step-chip-active .sq-step-chip-state,
.sq-step-chip-active .sq-step-chip-label {
  color: var(--sq-primary);
}

.sq-step-chip-done {
  background: var(--sq-success-soft);
  border-color: rgba(29, 131, 72, 0.28);
}

.sq-step-chip-done .sq-step-chip-number {
  background: var(--sq-success);
}

.sq-step-chip-done .sq-step-chip-state,
.sq-step-chip-done .sq-step-chip-label {
  color: var(--sq-success);
}

.sq-step-card.card {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--sq-line);
  border-radius: 22px;
  box-shadow: var(--sq-shadow);
}

.sq-step-header {
  align-items: flex-start;
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.sq-step-index {
  align-items: center;
  background: linear-gradient(180deg, var(--sq-primary), #115e59);
  border-radius: 18px;
  color: #fff;
  display: inline-flex;
  font-size: var(--sq-font-size-md);
  font-weight: var(--sq-weight-bold);
  height: 3rem;
  justify-content: center;
  min-width: 3rem;
}

.sq-step-title-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: 0.25rem;
}

.sq-step-title {
  font-size: var(--sq-font-size-lg);
  font-weight: var(--sq-weight-semibold);
  margin-bottom: 0;
}

.sq-step-description {
  color: var(--sq-muted);
  font-size: var(--sq-font-size-md);
  margin-bottom: 0;
}

.sq-step-body {
  color: var(--sq-ink);
}

.sq-form-hint {
  color: var(--sq-muted);
  font-size: var(--sq-font-size-sm);
  margin-top: 0.35rem;
}

.sq-callout {
  align-items: flex-start;
  border: 1px solid transparent;
  border-radius: 18px;
  display: flex;
  gap: 0.85rem;
  padding: 0.95rem 1rem;
}

.sq-callout-info {
  background: #eef9ff;
  border-color: #c6ecff;
}

.sq-callout-success {
  background: var(--sq-success-soft);
  border-color: #c5e8d3;
}

.sq-callout-warning {
  background: #fff7df;
  border-color: #f5df9b;
}

.sq-callout-danger {
  background: var(--sq-danger-soft);
  border-color: #f2c4bc;
}

.sq-callout-icon {
  font-size: var(--sq-font-size-md);
  margin-top: 0.15rem;
}

.sq-callout-title {
  font-size: var(--sq-font-size-md);
  font-weight: var(--sq-weight-semibold);
  margin-bottom: 0.2rem;
}

.sq-callout-body {
  color: var(--sq-muted);
  font-size: var(--sq-font-size-sm);
  line-height: 1.45;
}

.sq-cta {
  border-radius: 14px;
  font-size: var(--sq-font-size-sm);
  font-weight: var(--sq-weight-semibold);
  min-height: 2.85rem;
  padding: 0.66rem 1rem;
}

.sq-cta-primary.btn-primary {
  background: linear-gradient(135deg, var(--sq-primary), #115e59);
  border-color: #115e59;
}

.sq-cta-primary.btn-primary:hover,
.sq-cta-primary.btn-primary:focus {
  background: linear-gradient(135deg, #115e59, #0f766e);
  border-color: #0f766e;
}

.sq-cta-secondary.btn-outline-secondary {
  border-color: #d4a644;
  color: #9a6903;
}

.sq-cta-secondary.btn-outline-secondary:hover,
.sq-cta-secondary.btn-outline-secondary:focus {
  background: var(--sq-secondary-soft);
  border-color: #d4a644;
  color: #8a5f03;
}

.sq-cta:disabled,
.sq-cta.btn:disabled,
.sq-cta.btn.disabled {
  background: #b8d5d1 !important;
  border-color: #b8d5d1 !important;
  box-shadow: none !important;
  color: rgba(25, 50, 60, 0.56) !important;
  cursor: not-allowed;
  opacity: 1 !important;
}

.sq-dropzone {
  align-items: center;
  background: linear-gradient(180deg, #fffdf8, #fff9ef);
  border: 2px dashed #d5c59e;
  border-radius: 18px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  min-height: 7rem;
  padding: 1rem;
  text-align: center;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.sq-dropzone:hover {
  border-color: var(--sq-primary);
  box-shadow: 0 12px 28px rgba(15, 118, 110, 0.12);
  transform: translateY(-1px);
}

.sq-dropzone-title {
  color: var(--sq-ink);
  font-size: var(--sq-font-size-md);
  font-weight: var(--sq-weight-semibold);
  margin-bottom: 0.2rem;
}

.sq-dropzone-note {
  color: var(--sq-muted);
  font-size: var(--sq-font-size-sm);
}

.sq-results-shell-title {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.sq-empty-state {
  background: rgba(255, 255, 255, 0.82);
  border: 1px dashed #d9cdb2;
  border-radius: 20px;
  padding: 1rem 1.1rem;
}

.sq-empty-state-title {
  color: var(--sq-ink);
  font-size: var(--sq-font-size-md);
  font-weight: var(--sq-weight-semibold);
  margin-bottom: 0.25rem;
}

.sq-empty-state-body {
  color: var(--sq-muted);
  font-size: var(--sq-font-size-sm);
  line-height: 1.45;
}

.sq-active-content-hydrated-shell {
  min-height: 4rem;
}

.sq-route-loading-shell {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(234, 223, 202, 0.78);
  border-radius: 8px;
  max-width: 46rem;
  padding: 1rem;
}

.sq-route-loading-bar {
  animation: sq-route-loading-pulse 1.35s ease-in-out infinite;
  background: linear-gradient(90deg, rgba(15, 118, 110, 0.08), rgba(245, 158, 11, 0.16), rgba(15, 118, 110, 0.08));
  border-radius: 999px;
  height: 0.72rem;
  margin-bottom: 0.58rem;
}

.sq-route-loading-bar-wide {
  width: min(100%, 34rem);
}

.sq-route-loading-bar-mid {
  width: min(76%, 24rem);
}

.sq-route-loading-copy {
  margin-top: 0.9rem;
}

.sq-route-loading-eyebrow {
  color: var(--sq-primary);
  font-size: var(--sq-font-size-xs);
  font-weight: var(--sq-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sq-route-loading-title {
  color: var(--sq-ink);
  font-size: var(--sq-font-size-lg);
  font-weight: var(--sq-weight-semibold);
  margin-top: 0.18rem;
}

.sq-route-loading-body {
  color: var(--sq-muted);
  font-size: var(--sq-font-size-sm);
  margin-top: 0.2rem;
}

@keyframes sq-route-loading-pulse {
  0%,
  100% {
    opacity: 0.45;
  }

  50% {
    opacity: 1;
  }
}

.sq-inline-list {
  color: var(--sq-muted);
  font-size: var(--sq-font-size-sm);
  margin-bottom: 0;
  padding-left: 1rem;
}

.sq-inline-list li + li {
  margin-top: 0.2rem;
}

.sq-soft-panel {
  background: var(--sq-panel);
  border: 1px solid var(--sq-line);
  border-radius: 18px;
  padding: 0.95rem 1rem;
}

.sq-mode-chooser {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.sq-mode-option {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--sq-line);
  border-radius: 18px;
  color: var(--sq-ink);
  cursor: pointer;
  font-size: var(--sq-font-size-sm);
  font-weight: var(--sq-weight-semibold);
  margin: 0;
  padding: 0.95rem 1rem;
  text-align: center;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.sq-mode-option:hover {
  border-color: var(--sq-primary);
  box-shadow: 0 12px 28px rgba(15, 118, 110, 0.12);
  transform: translateY(-1px);
}

.sq-mode-option-active {
  background: linear-gradient(135deg, var(--sq-primary-soft), rgba(255, 255, 255, 0.94));
  border-color: var(--sq-primary);
  color: var(--sq-primary);
}

.sq-choice-grid {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.sq-choice-card {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--sq-line);
  border-radius: 20px;
  cursor: pointer;
  margin: 0;
  overflow: hidden;
  padding: 0;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.sq-choice-card:hover {
  border-color: var(--sq-primary);
  box-shadow: 0 14px 30px rgba(15, 118, 110, 0.12);
  transform: translateY(-1px);
}

.sq-choice-card-active {
  background: linear-gradient(180deg, rgba(215, 243, 237, 0.82), rgba(255, 255, 255, 0.98));
  border-color: rgba(15, 118, 110, 0.55);
  box-shadow: 0 18px 36px rgba(15, 118, 110, 0.16);
}

.sq-choice-card-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.sq-choice-thumb-frame {
  background: linear-gradient(180deg, rgba(255, 253, 248, 0.95), rgba(255, 246, 229, 0.95));
  border-bottom: 1px solid rgba(234, 223, 202, 0.9);
  padding: 0.6rem;
}

.sq-choice-thumb-image {
  border-radius: 14px;
  display: block;
  height: 110px;
  object-fit: cover;
  width: 100%;
}

.sq-choice-copy {
  display: grid;
  gap: 0.45rem;
  padding: 0.85rem 0.95rem 1rem;
}

.sq-choice-copy-top {
  align-items: center;
  display: flex;
  gap: 0.55rem;
  justify-content: space-between;
}

.sq-choice-title {
  color: var(--sq-ink);
  font-size: var(--sq-font-size-sm);
  font-weight: var(--sq-weight-semibold);
  line-height: 1.3;
}

.sq-choice-badge {
  background: rgba(15, 118, 110, 0.12);
  border-radius: 999px;
  color: var(--sq-primary);
  font-size: var(--sq-font-size-xs);
  font-weight: var(--sq-weight-bold);
  letter-spacing: 0.02em;
  padding: 0.24rem 0.56rem;
  white-space: nowrap;
}

.sq-choice-description {
  color: var(--sq-muted);
  font-size: var(--sq-font-size-sm);
  line-height: 1.45;
}

.sq-simple-checklist label {
  color: var(--sq-ink);
  display: flex;
  gap: 0.55rem;
  margin-bottom: 0;
}

.sq-simple-checklist input {
  margin-top: 0.2rem;
}

.sq-report-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.sq-report-textarea {
  background: #fffdf8;
  border: 1px solid var(--sq-line);
  border-radius: 18px;
  color: var(--sq-ink);
  font-family: "SFMono-Regular", "Menlo", "Consolas", monospace;
  font-size: var(--sq-font-size-sm);
  line-height: 1.45;
  min-height: 420px;
  padding: 0.95rem 1rem;
  resize: vertical;
}

.sq-data-grid {
  border: 1px solid var(--sq-line);
  border-radius: 16px;
  overflow: hidden;
}

.sq-data-grid .ag-header {
  background: #fff6e5;
}

.sq-data-grid .ag-header-cell-text {
  color: var(--sq-ink);
  font-size: var(--sq-font-size-sm);
  font-weight: var(--sq-weight-semibold);
}

.sq-data-grid .ag-row {
  font-family: var(--sq-font-family);
}

.sq-data-grid .ag-cell {
  align-items: center;
  display: flex;
}

.sq-grid-move-cell {
  color: var(--sq-primary);
  font-size: var(--sq-font-size-xs);
  font-weight: var(--sq-weight-semibold);
}

.sq-tvz-preview-card,
.sq-tvz-console-card {
  min-height: calc(100vh - 220px);
}

.sq-tvz-console-card {
  position: sticky;
  top: 1rem;
}

.sq-tvz-preview-frame {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--sq-line);
  border-radius: 20px;
  overflow: auto;
  padding: 0.4rem;
}

.sq-tvz-preview-frame .js-plotly-plot,
.sq-tvz-preview-frame .plot-container {
  min-height: 420px;
}

.sq-tvz-live-summary {
  display: grid;
  gap: 0.85rem;
}

.sq-tvz-metric-grid {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.sq-tvz-metric-card {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--sq-line);
  border-radius: 18px;
  box-shadow: 0 12px 24px rgba(25, 50, 60, 0.06);
  padding: 0.9rem 1rem;
}

.sq-tvz-metric-label {
  color: var(--sq-muted);
  font-size: var(--sq-font-size-xs);
  font-weight: var(--sq-weight-bold);
  letter-spacing: 0.06em;
  margin-bottom: 0.3rem;
  text-transform: uppercase;
}

.sq-tvz-metric-value {
  color: var(--sq-ink);
  font-size: var(--sq-font-size-lg);
  font-weight: var(--sq-weight-semibold);
  line-height: 1.2;
  margin-bottom: 0.25rem;
}

.sq-tvz-metric-note {
  color: var(--sq-muted);
  font-size: var(--sq-font-size-sm);
  line-height: 1.4;
}

.sq-tvz-deck-selector {
  margin-top: 1rem;
}

.sq-tvz-deck-panel {
  margin-top: 1rem;
}

.sq-tvz-slot-accordion .accordion-item,
.sq-tvz-console-card .accordion-item {
  border: 1px solid var(--sq-line);
  border-radius: 18px !important;
  overflow: hidden;
}

.sq-tvz-slot-accordion .accordion-item + .accordion-item,
.sq-tvz-console-card .accordion-item + .accordion-item {
  margin-top: 0.7rem;
}

.sq-tvz-slot-accordion .accordion-button,
.sq-tvz-console-card .accordion-button {
  background: linear-gradient(180deg, rgba(255, 253, 248, 0.96), rgba(255, 246, 229, 0.98));
  color: var(--sq-ink);
  font-size: var(--sq-font-size-sm);
  font-weight: var(--sq-weight-semibold);
}

.sq-tvz-slot-accordion .accordion-button:not(.collapsed),
.sq-tvz-console-card .accordion-button:not(.collapsed) {
  background: linear-gradient(180deg, rgba(215, 243, 237, 0.94), rgba(255, 255, 255, 0.98));
  color: var(--sq-primary);
  box-shadow: inset 0 -1px 0 rgba(15, 118, 110, 0.08);
}

.sq-tvz-action-bar {
  border-top: 1px solid rgba(234, 223, 202, 0.9);
  margin-top: 1.15rem;
  padding-top: 1rem;
}

.sq-tracepeak-preset-shell {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(15, 118, 110, 0.1);
  border-radius: 18px;
  padding: 1rem 1rem 0.95rem;
}

.sq-tracepeak-status-grid,
.sq-auc-status-grid,
.sq-stats-status-grid {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.sq-tracepeak-metric-card,
.sq-auc-metric-card,
.sq-stats-metric-card {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--sq-line);
  border-radius: 18px;
  box-shadow: 0 12px 24px rgba(25, 50, 60, 0.06);
  padding: 0.95rem 1rem;
}

.sq-tracepeak-metric-label,
.sq-auc-metric-label,
.sq-stats-metric-label {
  color: var(--sq-muted);
  font-size: var(--sq-font-size-xs);
  font-weight: var(--sq-weight-bold);
  letter-spacing: 0.06em;
  margin-bottom: 0.3rem;
  text-transform: uppercase;
}

.sq-tracepeak-metric-value,
.sq-auc-metric-value,
.sq-stats-metric-value {
  color: var(--sq-ink);
  font-size: var(--sq-font-size-lg);
  font-weight: var(--sq-weight-semibold);
  line-height: 1.2;
  margin-bottom: 0.25rem;
}

.sq-tracepeak-metric-note,
.sq-auc-metric-note,
.sq-stats-metric-note {
  color: var(--sq-muted);
  font-size: var(--sq-font-size-sm);
  line-height: 1.42;
}

.sq-tracepeak-tabs {
  margin-top: 0.2rem;
}

.sq-tracepeak-tabs .nav-link,
.sq-auc-tabs .nav-link,
.sq-stats-tabs .nav-link {
  border-radius: 999px !important;
  color: var(--sq-muted);
  font-size: var(--sq-font-size-sm);
  font-weight: var(--sq-weight-semibold);
  margin-right: 0.45rem;
  padding: 0.55rem 0.95rem;
}

.sq-tracepeak-tabs .nav-link.active,
.sq-auc-tabs .nav-link.active,
.sq-stats-tabs .nav-link.active {
  background: var(--sq-primary-soft);
  border-color: rgba(15, 118, 110, 0.18) !important;
  color: var(--sq-primary);
}

.sq-tracepeak-tab-pane,
.sq-auc-tab-pane,
.sq-stats-tab-pane {
  min-height: 10rem;
}

.sq-tracepeak-action-bar,
.sq-auc-action-bar {
  border-top: 1px solid rgba(234, 223, 202, 0.9);
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.1rem;
  padding-top: 1rem;
}

.sq-tracepeak-plot-frame,
.sq-auc-plot-frame,
.sq-auc-table-frame,
.sq-auc-compare-stack,
.sq-tracepeak-table-frame,
.sq-tracepeak-compare-stack,
.sq-stats-plot-frame,
.sq-stats-table-frame {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--sq-line);
  border-radius: 20px;
  box-shadow: 0 12px 24px rgba(25, 50, 60, 0.06);
  padding: 0.7rem;
}

.sq-tracepeak-plot-frame .js-plotly-plot,
.sq-tracepeak-plot-frame .plot-container,
.sq-auc-plot-frame .js-plotly-plot,
.sq-auc-plot-frame .plot-container,
.sq-stats-plot-frame .js-plotly-plot,
.sq-stats-plot-frame .plot-container {
  min-height: 420px;
}

.sq-tracepeak-compare-table,
.sq-auc-compare-table {
  margin-bottom: 0;
}

.sq-tracepeak-compare-table th,
.sq-auc-compare-table th {
  color: var(--sq-muted);
  font-size: var(--sq-font-size-xs);
  font-weight: var(--sq-weight-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.sq-auc-slot-grid {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.sq-auc-slot-card {
  background: rgba(255, 255, 255, 0.92);
  border: 1px dashed rgba(15, 118, 110, 0.22);
  border-radius: 18px;
  box-shadow: 0 12px 24px rgba(25, 50, 60, 0.04);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  min-height: 12rem;
  padding: 1rem;
}

.sq-auc-slot-card.is-filled {
  border-style: solid;
  box-shadow: 0 12px 24px rgba(25, 50, 60, 0.06);
}

.sq-auc-slot-title {
  color: var(--sq-ink);
  font-size: var(--sq-font-size-sm);
  font-weight: var(--sq-weight-bold);
  letter-spacing: 0.02em;
}

.sq-auc-slot-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.32rem;
}

.sq-auc-slot-time {
  color: var(--sq-muted);
  font-size: var(--sq-font-size-xs);
}

.sq-auc-slot-equation {
  color: var(--sq-ink);
  font-size: var(--sq-font-size-md);
  font-weight: var(--sq-weight-semibold);
  line-height: 1.3;
}

.sq-auc-slot-note {
  color: var(--sq-muted);
  font-size: var(--sq-font-size-sm);
  line-height: 1.45;
}

.sq-auc-slot-actions {
  display: flex;
  gap: 0.55rem;
}

.sq-auc-slot-actions .btn {
  flex: 1 1 0;
}

.sq-sidebar-shell {
  background: linear-gradient(180deg, rgba(25, 50, 60, 0.99), rgba(17, 38, 48, 0.99));
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 8px 0 28px rgba(13, 28, 34, 0.18);
  color: #f8fafc;
}

.sq-sidebar-brand {
  color: #f8fafc;
  font-size: clamp(1.28rem, 1.08rem + 0.55vw, 1.55rem);
  font-weight: var(--sq-weight-semibold);
  letter-spacing: -0.02em;
  margin-bottom: 0.2rem;
}

.sq-sidebar-subtitle {
  color: rgba(241, 245, 249, 0.74);
  font-size: var(--sq-font-size-xs);
  line-height: 1.45;
  margin-bottom: 0;
}

.sq-sidebar-divider {
  border-color: rgba(255, 255, 255, 0.12);
  margin: 1rem 0;
}

.sq-sidebar-accordion {
  --bs-accordion-bg: transparent;
  --bs-accordion-color: #f8fafc;
  --bs-accordion-border-color: rgba(255, 255, 255, 0.08);
  --bs-accordion-btn-padding-x: 0.85rem;
  --bs-accordion-btn-padding-y: 0.75rem;
  --bs-accordion-body-padding-x: 0.55rem;
  --bs-accordion-body-padding-y: 0.5rem;
}

.sq-sidebar-accordion .accordion-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 18px;
  margin-bottom: 0.7rem;
  overflow: hidden;
}

.sq-sidebar-accordion .accordion-button {
  background: transparent;
  color: #f8fafc;
  font-size: var(--sq-font-size-sm);
  font-weight: var(--sq-weight-semibold);
  gap: 0.55rem;
  line-height: 1.35;
  padding-left: 0.9rem;
}

.sq-sidebar-accordion .accordion-button:not(.collapsed) {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: none;
  color: #ffffff;
}

.sq-sidebar-accordion .accordion-button:focus {
  border-color: rgba(245, 158, 11, 0.4);
  box-shadow: 0 0 0 0.15rem rgba(245, 158, 11, 0.15);
}

.sq-sidebar-accordion .accordion-button::after {
  filter: brightness(0) invert(1);
  opacity: 0.78;
}

.sq-sidebar-link.nav-link {
  border-radius: 14px;
  color: rgba(241, 245, 249, 0.78);
  font-size: var(--sq-font-size-sm);
  font-weight: var(--sq-weight-medium);
  padding: 0.58rem 0.7rem;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.sq-sidebar-link.nav-link:hover,
.sq-sidebar-link.nav-link:focus {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  transform: translateX(1px);
}

.sq-sidebar-link.nav-link.active {
  background: rgba(245, 158, 11, 0.2);
  color: #ffffff;
  font-weight: var(--sq-weight-semibold);
}

.sq-sidebar-standalone {
  display: grid;
  gap: 0.45rem;
  margin-top: auto;
  padding-top: 1rem;
}

.sq-sidebar-footer {
  color: rgba(241, 245, 249, 0.58);
  font-size: var(--sq-font-size-xs);
  margin-top: 1rem;
}

.sq-sidebar-shell .Select-control,
.sq-sidebar-shell .Select-menu-outer {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--sq-ink);
}

.sq-language-picker {
  min-width: 0;
  position: relative;
  z-index: 20;
}

.sq-language-dropdown,
.sq-language-dropdown.dash-dropdown,
.sq-language-picker .dash-dropdown-wrapper {
  max-width: 100%;
  min-width: 0;
  width: 100%;
}

.sq-language-dropdown.dash-dropdown {
  background: transparent;
  border: none;
  display: block;
  min-height: auto;
  overflow: visible;
}

.sq-sidebar-shell .Select-control,
.sq-language-dropdown .dash-dropdown-trigger {
  border-radius: 12px;
  min-height: 46px;
}

.sq-language-dropdown .dash-dropdown-trigger {
  align-items: center;
  padding-inline: 0.8rem;
}

.sq-language-dropdown .dash-dropdown-grid-container {
  min-width: 0;
}

.sq-sidebar-shell .Select-placeholder,
.sq-sidebar-shell .Select-value-label,
.sq-sidebar-shell .Select--single > .Select-control .Select-value,
.sq-sidebar-shell .Select-input > input,
.sq-language-dropdown .dash-dropdown-value,
.sq-language-dropdown .dash-dropdown-placeholder {
  color: var(--sq-ink) !important;
}

.sq-sidebar-shell .Select-placeholder,
.sq-sidebar-shell .Select-value-label,
.sq-sidebar-shell .Select--single > .Select-control .Select-value,
.sq-language-dropdown .dash-dropdown-value,
.sq-language-dropdown .dash-dropdown-placeholder,
.sq-language-dropdown .dash-dropdown-option,
.sq-sidebar-shell .VirtualizedSelectOption,
.sq-sidebar-shell .VirtualizedSelectFocusedOption {
  line-height: 1.35;
}

.sq-language-dropdown .dash-dropdown-value,
.sq-language-dropdown .dash-dropdown-placeholder {
  min-width: 0;
  overflow: hidden;
  padding-block: 0.2rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sq-sidebar-shell .Select-arrow,
.sq-sidebar-shell .Select-clear-zone,
.sq-sidebar-shell .Select-arrow-zone,
.sq-language-dropdown .dash-dropdown-trigger-icon {
  color: var(--sq-muted);
}

.sq-language-dropdown .dash-dropdown-trigger-icon {
  flex-shrink: 0;
}

.sq-language-dropdown .dash-dropdown-content {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  color: var(--sq-ink);
  max-width: min(22rem, calc(100vw - 2rem));
  min-width: 100%;
  z-index: 2200;
}

.sq-language-dropdown.dash-dropdown:hover,
.sq-language-dropdown.dash-dropdown:focus,
.sq-language-dropdown.dash-dropdown:focus-visible,
.sq-language-dropdown .dash-dropdown-trigger:focus,
.sq-language-dropdown .dash-dropdown-trigger:focus-visible {
  border-color: rgba(15, 118, 110, 0.32);
  color: var(--sq-ink) !important;
  outline: none;
}

.sq-language-dropdown .dash-dropdown-grid-container,
.sq-language-dropdown .dash-dropdown-value,
.sq-language-dropdown .dash-dropdown-value-item,
.sq-language-dropdown .dash-dropdown-trigger-icon {
  color: var(--sq-ink) !important;
}

.sq-language-dropdown .dash-dropdown-value {
  font-weight: 600;
}

.sq-language-dropdown .dash-dropdown-option,
.sq-language-dropdown .dash-dropdown-search,
.sq-sidebar-shell .VirtualizedSelectOption,
.sq-sidebar-shell .VirtualizedSelectFocusedOption {
  background: #ffffff;
  color: var(--sq-ink);
}

.sq-language-dropdown .dash-dropdown-option {
  white-space: normal;
}

.sq-sidebar-shell .VirtualizedSelectFocusedOption {
  background: #f4f7f8;
}

.js-plotly-plot .plotly .legend text,
.js-plotly-plot .plotly .gtitle,
.js-plotly-plot .plotly .xtitle,
.js-plotly-plot .plotly .ytitle,
.js-plotly-plot .plotly .ztitle,
.js-plotly-plot .plotly .infolayer text,
.js-plotly-plot .plotly .hoverlayer text {
  font-family: var(--sq-font-family) !important;
}

.js-plotly-plot .plotly .legend text,
.js-plotly-plot .plotly .hoverlayer text {
  font-size: 12px !important;
}

.sq-pgs-studio {
  --pgs-border: #d9e2ec;
  --pgs-blue: #1f4e79;
  --pgs-surface: #ffffff;
  --pgs-soft: #f7fafc;
  --pgs-teal: #0f766e;
}

.sq-pgs-mode-ribbon,
.sq-pgs-workbench,
.sq-pgs-lower-dock {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

.sq-pgs-mode-ribbon {
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
}

.sq-pgs-mode-pill {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--pgs-border);
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(15, 76, 86, 0.06);
  padding: 0.8rem 0.95rem;
}

.sq-pgs-mode-pill-active {
  background: linear-gradient(135deg, rgba(15, 118, 110, 0.12), rgba(14, 116, 144, 0.08));
  border-color: rgba(15, 118, 110, 0.28);
}

.sq-pgs-mode-title,
.sq-pgs-panel-title,
.sq-pgs-action-title {
  color: var(--sq-ink);
  font-weight: var(--sq-weight-bold);
}

.sq-pgs-mode-title {
  font-size: var(--sq-font-size-sm);
}

.sq-pgs-mode-subtitle,
.sq-pgs-panel-help,
.sq-pgs-action-body,
.sq-pgs-help-muted {
  color: var(--sq-muted);
  font-size: var(--sq-font-size-sm);
}

.sq-pgs-workbench {
  align-items: start;
  grid-template-columns: minmax(15rem, 0.72fr) minmax(24rem, 1.58fr) minmax(18rem, 0.9fr);
}

.sq-pgs-teacher-panel,
.sq-pgs-preview-panel,
.sq-pgs-inspector-panel,
.sq-pgs-dock-card {
  background: var(--pgs-surface);
  border: 1px solid var(--pgs-border);
  border-radius: 22px;
  box-shadow: 0 18px 42px rgba(25, 50, 60, 0.08);
  min-width: 0;
  overflow: hidden;
}

.sq-pgs-teacher-panel,
.sq-pgs-inspector-panel,
.sq-pgs-dock-card {
  padding: 1rem;
}

.sq-pgs-panel-title {
  font-size: var(--sq-font-size-lg);
  line-height: 1.2;
}

.sq-pgs-panel-help {
  margin-top: 0.25rem;
}

.sq-pgs-action-list {
  display: grid;
  gap: 0.65rem;
  margin-top: 1rem;
}

.sq-pgs-action-card,
.sq-pgs-teacher-note,
.sq-pgs-selected-part,
.sq-pgs-selection-card,
.sq-pgs-parts-map {
  background: var(--pgs-soft);
  border: 1px solid var(--pgs-border);
  border-radius: 16px;
  padding: 0.8rem;
}

.sq-pgs-action-card-active {
  background: #ecfdf5;
  border-color: rgba(15, 118, 110, 0.38);
}

.sq-pgs-teacher-note {
  background: #fff7ed;
  border-color: #fed7aa;
  margin-top: 1rem;
}

.sq-pgs-theme-note {
  background: #f0fdfa;
  border: 1px solid #99f6e4;
  border-radius: 14px;
  color: var(--sq-muted);
  font-size: var(--sq-font-size-sm);
  margin-top: 0.65rem;
  padding: 0.7rem 0.8rem;
}

.sq-pgs-theme-note-title {
  color: #115e59;
  font-weight: var(--sq-weight-bold);
  margin-bottom: 0.2rem;
}

.sq-pgs-theme-note-body {
  line-height: 1.45;
}

.sq-pgs-code-chip {
  background: #eef2f7;
  border: 1px solid #d7e2e6;
  border-radius: 999px;
  color: #475569;
  display: inline-flex;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--sq-font-size-xs);
  margin-top: 0.45rem;
  padding: 0.12rem 0.5rem;
}

.sq-pgs-preview-header {
  align-items: center;
  background: #ffffff;
  border-bottom: 1px solid var(--pgs-border);
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: space-between;
  padding: 1rem;
}

.sq-pgs-preview-mode {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.sq-pgs-preview-mode-label,
.sq-pgs-help-title,
.sq-pgs-part-name {
  color: var(--sq-ink);
  font-size: var(--sq-font-size-sm);
  font-weight: var(--sq-weight-semibold);
}

.sq-pgs-direct-edit-help {
  background: #ecfeff;
  border-bottom: 1px solid #bae6fd;
  display: grid;
  gap: 0.35rem;
  padding: 0.75rem 1rem;
}

.sq-pgs-help-row {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.55rem;
}

.sq-pgs-preview-note {
  padding: 1rem;
}

.sq-pgs-preview-stage {
  padding: 0 1rem 1rem;
}

.sq-pgs-graph {
  background: #ffffff;
  border: 1px solid var(--pgs-border);
  border-radius: 16px;
  overflow: hidden;
}

.sq-pgs-print-preview {
  background: #ffffff;
  border: 1px solid var(--pgs-border);
  border-radius: 16px;
  margin-top: 0.85rem;
  padding: 0.5rem;
  width: 100%;
}

.sq-pgs-inspector-panel {
  padding: 0;
}

.sq-pgs-selected-part {
  border-radius: 0;
  border-width: 0 0 1px;
}

.sq-pgs-inspector-panel .nav-tabs {
  padding: 0.75rem 0.75rem 0;
}

.sq-pgs-inspector-panel .tab-content {
  max-height: 54rem;
  overflow: auto;
}

.sq-pgs-lower-dock {
  grid-template-columns: minmax(15rem, 0.85fr) minmax(18rem, 1fr) minmax(18rem, 1.15fr);
}

.sq-pgs-spec-snapshot {
  background: #f8fafc;
  border: 1px solid var(--pgs-border);
  border-radius: 14px;
  font-size: var(--sq-font-size-xs);
  max-height: 16rem;
  overflow: auto;
  padding: 0.75rem;
}

.sq-pgs-parts-grid {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.8rem;
}

.sq-pgs-part-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.55rem;
  justify-content: space-between;
}

@media (max-width: 992px) {
  .sq-module-hero {
    padding: 1rem;
  }

  .sq-tvz-preview-card,
  .sq-tvz-console-card {
    min-height: auto;
  }

  .sq-tvz-console-card {
    position: static;
    top: auto;
  }

  .sq-sidebar-shell {
    box-shadow: 0 14px 32px rgba(13, 28, 34, 0.2);
  }

  .sq-pgs-workbench,
  .sq-pgs-lower-dock {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  #sidebar-collapse {
    position: relative;
    z-index: 1050;
  }

  #page-content {
    margin-left: 0 !important;
    padding: 0.85rem !important;
  }

  .sq-sidebar-shell {
    bottom: auto !important;
    height: auto !important;
    left: auto !important;
    max-height: 60vh;
    max-width: 100%;
    position: static !important;
    top: auto !important;
    width: 100% !important;
  }

  .sq-module-hero-top,
  .sq-results-shell-title {
    align-items: flex-start;
    flex-direction: column;
  }

  .sq-step-header {
    flex-direction: column;
  }

  .sq-step-index {
    min-width: 2.75rem;
  }

  .sq-tvz-metric-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 576px) {
  .sq-tvz-metric-grid {
    grid-template-columns: 1fr;
  }
}