:root {
  --bg: #f5f8fc;
  --panel: #ffffff;
  --text: #0f2740;
  --muted: #5f7388;
  --border: #d9e2ec;
  --primary: #0a6fc2;
  --mark-icon-stroke: #2f3f50;
  --mark-icon-accent: #8ea4ba;
  --action-icon-stroke: #2f3f50;
  --ok: #1f9d55;
  --warn: #d6861a;
  --fail: #c73e1d;
  --row-encoding: #0a6fc2;
  --row-encoding-rgb: 10, 111, 194;
  --row-refine: #d6861a;
  --row-refine-rgb: 214, 134, 26;
  --row-style: #1f9d55;
  --row-style-rgb: 31, 157, 85;
  --font-sans: "Avenir Next Custom", "Avenir Next", "Avenir", "Segoe UI", sans-serif;
  --font-code: "Avenir Next Custom", "Avenir Next", "Avenir", "SFMono-Regular", Menlo, Consolas, monospace;
  --history-card-height: 136px;
  --history-list-padding-y: 6px;
  --history-section-gap: 8px;
  --history-title-height: 20px;
  --history-panel-padding-y: 10px;
}

@font-face {
  font-family: "Avenir Next Custom";
  src: url("../fonts/AvenirNext-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Avenir Next Custom";
  src: url("../fonts/AvenirNext-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Avenir Next Custom";
  src: url("../fonts/AvenirNext-DemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Avenir Next Custom";
  src: url("../fonts/AvenirNext-DemiBold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #fff;
  color: var(--text);
  font-family: var(--font-sans);
}

h1,
h2,
h3,
h4,
h5,
h6,
strong,
b {
  font-weight: 600;
}

button,
input,
select,
textarea {
  font-family: var(--font-sans);
}

body.cards-scroll-locked {
  overflow: hidden;
  overscroll-behavior: none;
}

.topbar {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  position: sticky;
  top: 0;
  z-index: 100;
}

.topbar-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
}

.topbar-title-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}

.topbar h1 {
  margin: 0;
  font-size: 26px;
}

.dataset-cta-btn,
.controls button {
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  border-radius: 8px;
  padding: 8px 12px;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.1;
  cursor: pointer;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
}

.dataset-cta-btn:disabled,
.controls button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.dataset-cta-btn:hover:not(:disabled),
.controls button:hover:not(:disabled) {
  border-color: #b7c8da;
  background: #f8fbff;
}

.dataset-source-name {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  max-width: min(44vw, 420px);
  padding: 0 12px;
  border: 1px solid #d1dce8;
  border-radius: 8px;
  background: #f7fbff;
  color: #365270;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dataset-source-name:empty {
  display: none;
}

body.dataset-modal-open {
  overflow: hidden;
}

.dataset-upload-modal {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(255, 255, 255, 0.74);
  backdrop-filter: blur(2px);
}

.dataset-upload-modal[hidden] {
  display: none;
}

.dataset-upload-dialog {
  width: min(620px, calc(100vw - 36px));
  border: 1px solid #d3deea;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 24px 56px rgba(20, 42, 66, 0.16);
  padding: 18px 18px 16px;
}

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

.dataset-upload-head h2 {
  margin: 0;
  font-size: 20px;
  color: #153451;
}

.dataset-upload-close-btn {
  width: 34px;
  height: 34px;
  border: 1px solid #c4d3e2;
  border-radius: 8px;
  background: #ffffff;
  color: #36506b;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.dataset-upload-close-btn:hover {
  border-color: #9ab4ce;
  background: #f3f8fd;
}

.dataset-upload-dropzone {
  border: 2px dashed #9cb7d2;
  border-radius: 12px;
  min-height: 228px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px 18px;
  text-align: center;
  background: #f8fbff;
  cursor: pointer;
  outline: none;
  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.dataset-upload-dropzone:hover,
.dataset-upload-dropzone:focus-visible {
  border-color: #4f86b8;
  background: #f2f8ff;
  box-shadow: inset 0 0 0 1px rgba(79, 134, 184, 0.18);
}

.dataset-upload-dropzone.is-drag-active {
  border-color: #0a6fc2;
  background: #eaf4ff;
  box-shadow: inset 0 0 0 1px rgba(10, 111, 194, 0.24);
}

.dataset-upload-dropzone.is-drag-invalid {
  border-color: #c73e1d;
  background: #fff4f1;
  box-shadow: inset 0 0 0 1px rgba(199, 62, 29, 0.18);
}

.dataset-upload-dropzone-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #234564;
}

.dataset-upload-dropzone-subtitle {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: #5d768f;
}

.dataset-upload-error {
  margin: 10px 2px 0;
  min-height: 20px;
  font-size: 13px;
  font-weight: 600;
  color: #c73e1d;
  opacity: 0;
}

.dataset-upload-error.is-visible {
  opacity: 1;
}

.example-dataset-dialog {
  max-width: 720px;
}

.example-dataset-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  grid-auto-rows: max-content;
  align-items: start;
  align-content: start;
  gap: 10px;
  min-height: 160px;
  max-height: 340px;
  overflow-y: auto;
  padding: 2px;
}

.example-dataset-item {
  border: 1px solid #c6d7e8;
  border-radius: 8px;
  background: #f8fbff;
  color: #274764;
  min-height: 22px;
  height: auto;
  padding: 4px 8px;
  text-align: left;
  display: flex;
  align-self: start;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  cursor: pointer;
}

.example-dataset-item:hover {
  border-color: #8fb0cf;
  background: #f1f8ff;
}

.example-dataset-item.is-selected {
  border-color: #0a6fc2;
  background: #eaf4ff;
  box-shadow: inset 0 0 0 1px rgba(10, 111, 194, 0.2);
}

.example-dataset-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
}

.example-dataset-badge {
  border-radius: 999px;
  padding: 1px 6px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  background: #dcecff;
  color: #11497f;
  flex: 0 0 auto;
}

.example-dataset-loading,
.example-dataset-empty {
  grid-column: 1 / -1;
  margin: 0;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #c9d9e8;
  border-radius: 10px;
  color: #56718b;
  font-size: 13px;
  font-weight: 600;
}

.example-dataset-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

#datasetFile {
  display: none;
}

@media (max-width: 980px) {
  .topbar-head {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .topbar-title-row {
    width: 100%;
  }
}

.layout {
  padding: 14px 16px 20px;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(380px, 1fr);
  align-items: stretch;
  gap: 14px;
}

.main-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.visualization-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.visualization-row > .view-panel {
  min-width: 0;
}

.current-view-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}

.current-view-tabs {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  margin: 0 0 -1px;
  border-bottom: 1px solid #c9d9e8;
  padding-left: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

.current-export-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}

.current-export-controls.is-hidden {
  display: none;
}

.export-btn {
  border: 1px solid #c2d2e2;
  border-radius: 7px;
  background: #ffffff;
  color: #264763;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.1;
  padding: 5px 8px;
  cursor: pointer;
}

.export-btn:hover:not(:disabled) {
  border-color: #89a9c7;
  background: #edf5fd;
}

.export-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.current-view-tab {
  border: 1px solid #c9d9e8;
  border-bottom-color: #c9d9e8;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(180deg, #f7fbff 0%, #edf4fc 100%);
  color: #34526d;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px 7px;
  line-height: 1.2;
  cursor: pointer;
  margin: 0;
  position: relative;
  bottom: -1px;
}

.current-view-tab:hover {
  border-color: #9bb8d4;
  background: linear-gradient(180deg, #fbfdff 0%, #eef5fd 100%);
}

.current-view-tab.active {
  border-color: #a8bfd6;
  border-bottom-color: #ffffff;
  background: #ffffff;
  color: #1f3f5f;
  z-index: 2;
}

.current-view-stage {
  position: relative;
  height: 380px;
  border: 1px solid #c9d9e8;
  border-radius: 0 10px 10px 10px;
  background: #fff;
  overflow: hidden;
}

.current-pane {
  position: absolute;
  inset: 0;
}

.current-pane.is-hidden {
  display: none;
  opacity: 0;
  pointer-events: none;
}

.view-render-error {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 14px;
  font-size: 12px;
  font-weight: 600;
  color: #8d2f1f;
  background: #fff7f4;
  border: 1px dashed #efb8ad;
  border-radius: 8px;
  text-align: center;
}

.view-panel,
.cards-row,
.history-row {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
}

.cards-row {
  height: 460px;
  min-height: 460px;
  display: flex;
  flex-direction: column;
}

.cards-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
}

.cards-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

.cards-heading-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}

.cards-title-row .action-row-navigator {
  margin-left: 2px;
}

.cards-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.cards-pane {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: contain;
  gap: 8px;
}

.action-row-navigator {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  z-index: 2;
  flex-wrap: nowrap;
}

.action-row-navigator.is-hidden {
  display: none;
}

.action-row-dot {
  --dot-color: #8aa2bb;
  --dot-rgb: 138, 162, 187;
  min-width: 90px;
  height: 32px;
  border: 1px solid rgba(var(--dot-rgb), 0.34);
  border-radius: 999px;
  background: rgba(var(--dot-rgb), 0.1);
  color: #2e4f69;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-sans);
  cursor: pointer;
  padding: 0 12px;
  transition: transform 130ms ease, background 130ms ease, box-shadow 130ms ease, border-color 130ms ease;
}

.action-row-dot.row-refine {
  --dot-color: var(--row-refine);
  --dot-rgb: var(--row-refine-rgb);
}

.action-row-dot.row-encoding {
  --dot-color: var(--row-encoding);
  --dot-rgb: var(--row-encoding-rgb);
}

.action-row-dot.row-style {
  --dot-color: var(--row-style);
  --dot-rgb: var(--row-style-rgb);
}

.action-row-dot.active {
  transform: translateY(-1px);
  background: var(--dot-color);
  border-color: var(--dot-color);
  color: #fff;
  box-shadow: 0 0 0 2px rgba(var(--dot-rgb), 0.2);
}

.action-row-dot.is-locked {
  border-color: rgba(151, 167, 184, 0.45);
  background: rgba(151, 167, 184, 0.16);
  color: #7d8fa2;
  box-shadow: none;
}

.action-row-dot.is-locked:not(.active) {
  transform: none;
}

.action-row-navigator.is-disabled .action-row-dot {
  border-color: rgba(151, 167, 184, 0.45);
  background: rgba(151, 167, 184, 0.2);
  color: #7d8fa2;
  box-shadow: none;
  cursor: not-allowed;
}

.action-row-navigator.is-disabled .action-row-dot:not(.active) {
  background: rgba(151, 167, 184, 0.2);
}

.action-row-navigator.is-disabled .action-row-dot.active {
  transform: translateY(-1px);
  background: var(--row-encoding);
  border-color: var(--row-encoding);
  color: #fff;
  box-shadow: 0 0 0 2px rgba(var(--row-encoding-rgb), 0.18);
}

.phase-nav-btn {
  width: 32px;
  height: 32px;
  border: 1px solid #c5d4e3;
  border-radius: 999px;
  background: #fff;
  color: #35506a;
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
  font-family: var(--font-sans);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.phase-nav-btn:hover:not(:disabled) {
  border-color: #8eaacc;
  background: #edf5fd;
}

.phase-nav-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.track-tabs {
  display: none;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px 0;
}

.track-tabs.is-visible {
  display: flex;
}

.track-tab {
  border: 1px solid #cdd9e6;
  border-radius: 8px;
  background: #f7fbff;
  color: #34526d;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  cursor: pointer;
}

.track-tab:hover {
  border-color: #9ab7d2;
  background: #eef6ff;
}

.track-tab.active {
  border-color: #0a6fc2;
  background: #0a6fc2;
  color: #fff;
}

.add-mark-box {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

.add-mark-box.disabled .add-mark-btn {
  opacity: 0.65;
}

.add-mark-btn {
  border: 1px solid #9fc2e4;
  border-radius: 8px;
  padding: 7px 16px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-sans);
  color: #1f4f79;
  background: #e4f0fc;
  cursor: pointer;
}

.add-mark-btn:hover:not(:disabled) {
  background: #d6e8fa;
}

.add-mark-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.add-mark-box.active .add-mark-btn {
  border-color: #0a6fc2;
  color: #fff;
  background: #0a6fc2;
}

.history-step-btn {
  width: 32px;
  height: 32px;
  border: 1px solid #c5d4e3;
  border-radius: 8px;
  background: #fff;
  color: #35506a;
  font-size: 18px;
  line-height: 1;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.history-step-btn:hover:not(:disabled) {
  border-color: #92afd0;
  background: #eef5fc;
}

.history-step-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.add-mark-hint {
  display: none;
}

.cards-description {
  font-size: 13px;
  line-height: 1.25;
  font-weight: 400;
  color: #1f405f;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recommendation-mode-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.recommendation-mode-controls.is-hidden {
  display: none;
}

.recommendation-mode-btn {
  border: 1px solid #c6d5e5;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  color: #2c4d69;
  background: #fff;
  cursor: pointer;
}

.recommendation-mode-btn.recommendation-mode-activate {
  border-color: #e3b0b6;
  background: #fff4f5;
  color: #7f1f28;
}

.recommendation-mode-btn:hover:not(:disabled) {
  border-color: #d08a93;
  background: #ffe7ea;
  color: #6f1821;
}

.recommendation-mode-btn.recommendation-mode-activate.active {
  border-color: #b33947;
  background: #c84756;
  color: #fff;
}

.recommendation-mode-btn.recommendation-mode-refresh {
  width: 34px;
  height: 34px;
  min-width: 34px;
  padding: 0;
  border-radius: 999px;
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.recommendation-mode-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.history-row {
  height: calc(
    (var(--history-panel-padding-y) * 2) +
    var(--history-title-height) +
    var(--history-section-gap) +
    var(--history-card-height) +
    (var(--history-list-padding-y) * 2) +
    2px +
    4px
  );
  min-height: calc(
    (var(--history-panel-padding-y) * 2) +
    var(--history-title-height) +
    var(--history-section-gap) +
    var(--history-card-height) +
    (var(--history-list-padding-y) * 2) +
    2px +
    4px
  );
  display: flex;
  flex-direction: column;
  gap: var(--history-section-gap);
}

.history-row[hidden] {
  display: none !important;
}

.view-panel h2,
.cards-row h2,
.history-row h2 {
  margin: 0;
  font-size: 15px;
}

.history-title-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-height: var(--history-title-height);
}

.history-hover-meta {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  line-height: 1.2;
  color: #46607a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity 120ms ease;
}

.history-hover-meta.is-visible {
  opacity: 1;
}

.chart-host {
  position: relative;
  min-height: 380px;
  height: 380px;
  border: 1px dashed #ccd7e4;
  border-radius: 8px;
  background: #fcfdff;
  padding: 6px;
  overflow: hidden;
}

.chart-host > .vega-embed {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: top left;
}

.current-view-stage .chart-host,
.current-view-stage .dataset-host {
  min-height: 0;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: #fcfdff;
}

.dataset-host {
  border: 1px dashed #ccd7e4;
  border-radius: 8px;
  background: #fcfdff;
  padding: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  min-width: 0;
}

.dataset-column-selection {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 7;
  pointer-events: none;
}

.dataset-selection-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  pointer-events: auto;
  border: 1px solid #c3d7eb;
  border-radius: 12px;
  padding: 8px 11px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 24px rgba(18, 58, 95, 0.14);
  backdrop-filter: blur(2px);
}

.dataset-apply-btn {
  border: 1px solid #b9d2ea;
  background: #eef6ff;
  color: #1f4f7c;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 18px;
  cursor: pointer;
}

.dataset-apply-btn:hover:not(:disabled) {
  background: #e0efff;
}

.dataset-apply-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.dataset-selection-summary {
  font-size: 10px;
  color: #5e7388;
}

.dataset-column-selection.is-locked .dataset-selection-summary {
  color: #8f4f00;
}

.dataset-table-host {
  min-height: 0;
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.dataset-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 6px;
  font-size: 11px;
  color: #5e7388;
}

.dataset-meta-lock {
  color: #8f4f00;
  font-weight: 600;
}

.dataset-meta-action {
  border: 1px solid #c3d7eb;
  background: #eef6ff;
  color: #1f4f7c;
  border-radius: 7px;
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  padding: 4px 8px;
  cursor: pointer;
}

.dataset-meta-action:hover:not(:disabled) {
  background: #e0efff;
}

.dataset-meta-action:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.dataset-table-wrap {
  overflow-x: auto;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  padding-bottom: 72px;
}

.dataset-table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  background: #fff;
  border: 1px solid #dbe6f2;
}

.dataset-table th,
.dataset-table td {
  border: 1px solid #e2ebf5;
  padding: 3px 5px;
  font-size: 10px;
  color: #24415d;
  text-align: left;
  white-space: nowrap;
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dataset-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f3f8fe;
  color: #1d466e;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  vertical-align: bottom;
  padding: 5px 6px 4px;
  transition: background-color 120ms ease, box-shadow 120ms ease;
}

.dataset-table th:hover {
  background: #e8f3ff;
}

.dataset-table th.is-selected {
  background: #d7e9ff;
  box-shadow: inset 0 -2px 0 #0a6fc2;
}

.dataset-table th.is-locked {
  cursor: not-allowed;
}

.dataset-col-name {
  display: block;
  line-height: 1.2;
}

.dataset-col-type {
  display: block;
  margin-top: 2px;
  font-size: 8px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #4e6780;
}

.dataset-empty {
  padding: 10px;
  font-size: 12px;
  color: #5e7388;
}

.dataset-empty-row {
  text-align: center;
  color: #6f8193;
}

.mark-guidance {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.3;
  color: #5e7388;
}

.mark-guidance:empty {
  display: none;
}

.mark-guidance.is-hidden {
  display: none;
}

.mark-selected-placeholder {
  min-height: 184px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 12px;
  text-align: center;
  color: #2f455b;
}

.mark-selected-placeholder.is-current {
  background: linear-gradient(180deg, #f7fbff 0%, #f0f6fd 100%);
}

.mark-selected-placeholder.is-preview {
  background: linear-gradient(180deg, #f8fbff 0%, #edf4fc 100%);
}

.mark-selected-placeholder .mark-selected-placeholder-icon {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
}

.mark-selected-placeholder-title {
  font-size: 16px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.mark-selected-placeholder-desc {
  font-size: 12px;
  line-height: 1.35;
  color: #567089;
}

.current-commit-enter {
  animation: currentCommitEnter 220ms linear;
}

.current-panel-fade {
  opacity: 1;
  transition: opacity 220ms linear;
}

@keyframes currentCommitEnter {
  0% {
    opacity: 0.96;
    transform: none;
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

.ghost {
  opacity: 0.67;
}

.commit-anim-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
}

.commit-panel-flight {
  position: fixed;
  margin: 0;
  overflow: hidden;
  border-radius: 8px;
  transform-origin: top left;
  will-change: transform, opacity;
  transition: transform 850ms cubic-bezier(0.2, 0, 0, 1), opacity 850ms linear;
  box-shadow: none;
  pointer-events: none;
}

.commit-panel-flight.commit-current-flight {
  z-index: 1;
}

.commit-panel-flight.commit-preview-flight {
  z-index: 2;
}

.chart-host.commit-source-hidden {
  opacity: 0;
}

.code-host {
  min-height: 0;
  height: auto;
  flex: 1 1 auto;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  padding: 0;
  overflow: auto;
  font-family: var(--font-code);
  font-size: 11px;
  line-height: 1.45;
  color: #1f2937;
}

.code-panel {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.panel-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 8px;
}

.panel-title-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.panel-tool-btn {
  border: 1px solid #c8d7e7;
  border-radius: 7px;
  background: #fff;
  color: #2c4d69;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.1;
  padding: 5px 9px;
  cursor: pointer;
}

.panel-tool-btn:hover:not(:disabled) {
  border-color: #8eacc8;
  background: #eef5fc;
}

.panel-tool-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.code-font-btn {
  min-width: 30px;
  padding: 5px 0;
  text-align: center;
}

.diff-header {
  margin: 0;
  padding: 8px 10px 6px;
  color: #64748b;
  font-size: 10px;
  font-weight: 600;
}

.code-grid {
  border-top: 1px solid #f1f5f9;
  background: #fff;
  overflow: hidden;
}

.code-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
  min-height: 17px;
}

.code-ln {
  display: inline-flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 8px 0 4px;
  border-right: 1px solid #f1f5f9;
  color: #94a3b8;
  background: #fafafa;
  font-variant-numeric: tabular-nums;
  user-select: none;
}

.code-src {
  display: inline-block;
  white-space: pre;
  padding: 0 8px;
  font-family: var(--font-code);
  color: #334155;
}

.code-row.context {
  background: #ffffff;
}

.code-row.added {
  background: #f0fdf4;
}

.code-row.added .code-src {
  color: #166534;
}

.code-row.removed {
  background: #fef2f2;
}

.code-row.removed .code-src {
  color: #991b1b;
}

.code-row.empty .code-src {
  color: transparent;
}

.code-empty-inline {
  margin: 0;
  padding: 8px 10px 6px;
  color: #94a3b8;
  font-size: 10px;
  font-weight: 500;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  align-items: start;
  gap: 10px;
  overflow: auto;
  overscroll-behavior: contain;
  flex: 1 1 auto;
  min-height: 0;
  padding-left: 0;
  padding-right: 4px;
  position: relative;
  z-index: 1;
}

.cards.row-transition-active {
  will-change: transform;
}

.cards.row-transition-animating {
  pointer-events: none;
}

.cards-transition-layer {
  position: absolute;
  margin: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}

.cards.post-mark-layout {
  --option-gap: 10px;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: var(--option-gap);
  overflow-x: auto;
  overflow-y: auto;
}

.cards.post-mark-layout.agent-mode-active {
  align-items: flex-start;
}

.cards.mark-picker-layout {
  --mark-gap: 10px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: var(--mark-gap);
  overflow-x: hidden;
  overflow-y: auto;
}

.cards.mark-picker-layout .option-card {
  min-width: 0;
  flex: 0 0 calc((100% - (4 * var(--mark-gap))) * var(--mark-card-width, 0.2));
  max-width: calc((100% - (4 * var(--mark-gap))) * var(--mark-card-width, 0.2));
  transition: flex-basis 220ms ease, max-width 220ms ease;
}

.cards.mark-picker-layout .option-card:hover,
.cards.mark-picker-layout .option-card.rank-muted:hover {
  flex: 0 0 calc((100% - (4 * var(--mark-gap))) * var(--mark-card-width, 0.2));
  max-width: calc((100% - (4 * var(--mark-gap))) * var(--mark-card-width, 0.2));
}

.cards.post-mark-layout .option-card {
  min-width: 0;
  transition: flex-basis 240ms ease, max-width 240ms ease;
}

.cards.post-mark-layout .option-card.rank-primary,
.cards.post-mark-layout .option-card.rank-secondary {
  flex: 0 0 calc((100% - (4 * var(--option-gap))) * 0.25);
  max-width: calc((100% - (4 * var(--option-gap))) * 0.25);
}

.cards.post-mark-layout .option-card.rank-muted {
  flex: 1 1 calc((100% - (4 * var(--option-gap))) * 0.1666667);
  max-width: calc((100% - (4 * var(--option-gap))) * 0.1666667);
}

.cards.post-mark-layout .option-card.rank-muted:hover {
  flex: 0 0 calc((100% - (4 * var(--option-gap))) * 0.25);
  max-width: calc((100% - (4 * var(--option-gap))) * 0.25);
}

.cards.post-mark-layout .option-card.rank-muted.window-hovered {
  flex: 0 0 calc((100% - (4 * var(--option-gap))) * 0.25);
  max-width: calc((100% - (4 * var(--option-gap))) * 0.25);
}

.cards.post-mark-layout .option-card.agent-mode-card.is-expanded {
  min-width: 0;
}

.cards.post-mark-layout .option-card.post-mark-card {
  --post-mark-rest-height: 44%;
  --post-mark-thumb-height: 112px;
  --post-mark-thumb-margin: 6px;
  --post-mark-thumb-margin-y: var(--post-mark-thumb-margin);
  --post-mark-thumb-margin-x: var(--post-mark-thumb-margin-y);
  --post-mark-thumb-margin-bottom-collapsed: calc(var(--post-mark-thumb-margin-y) * 0.4);
  --post-mark-collapsed-min-height: calc(
    var(--post-mark-thumb-height) +
    var(--post-mark-thumb-margin-y) +
    var(--post-mark-thumb-margin-bottom-collapsed) +
    72px
  );
}

.cards.post-mark-layout .option-card.post-mark-card:not(.is-expanded) {
  height: max(var(--post-mark-rest-height), var(--post-mark-collapsed-min-height));
  min-height: max(var(--post-mark-rest-height), var(--post-mark-collapsed-min-height));
  max-height: max(var(--post-mark-rest-height), var(--post-mark-collapsed-min-height));
  align-self: stretch;
  overflow: hidden;
}

.cards.post-mark-layout .option-card.post-mark-card:not(.is-expanded) .option-card-thumb {
  margin-bottom: var(--post-mark-thumb-margin-bottom-collapsed, calc(var(--post-mark-thumb-margin-y, 6px) * 0.4));
}

.cards.interaction-locked {
  pointer-events: none;
}

.cards-empty {
  border: 1px dashed #d3dfeb;
  border-radius: 8px;
  padding: 14px;
  color: #5e7388;
  font-size: 13px;
  min-width: 260px;
}

.option-card {
  --row-accent: var(--row-encoding);
  --row-rgb: var(--row-encoding-rgb);
  --action-icon-accent: rgba(var(--row-encoding-rgb), 0.42);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  background: #fff;
}

.option-card.row-encoding {
  --row-accent: var(--row-encoding);
  --row-rgb: var(--row-encoding-rgb);
  --action-icon-accent: rgba(var(--row-encoding-rgb), 0.42);
}

.option-card.row-refine {
  --row-accent: var(--row-refine);
  --row-rgb: var(--row-refine-rgb);
  --action-icon-accent: rgba(var(--row-refine-rgb), 0.42);
}

.option-card.row-style {
  --row-accent: var(--row-style);
  --row-rgb: var(--row-style-rgb);
  --action-icon-accent: rgba(var(--row-style-rgb), 0.42);
}

.option-card.rank-primary {
  border-color: var(--row-accent);
  border-width: 3px;
  background: linear-gradient(180deg, rgba(var(--row-rgb), 0.16) 0%, #ffffff 62%);
  box-shadow: 0 3px 12px rgba(var(--row-rgb), 0.24);
}

.option-card.rank-secondary {
  border-color: rgba(var(--row-rgb), 0.42);
  border-width: 1.5px;
  background: linear-gradient(180deg, rgba(var(--row-rgb), 0.08) 0%, #ffffff 65%);
  box-shadow: 0 2px 8px rgba(var(--row-rgb), 0.16);
}

.option-card.rank-muted {
  border-color: rgba(var(--row-rgb), 0.25);
  background: #fff;
}

.option-card.rank-secondary:hover {
  border-color: rgba(var(--row-rgb), 0.72);
  box-shadow: 0 0 0 2px rgba(var(--row-rgb), 0.24);
}

.option-card:hover {
  border-color: var(--row-accent);
  box-shadow: 0 0 0 2px rgba(var(--row-rgb), 0.22);
}

.option-card.rank-muted:hover {
  border-color: rgba(var(--row-rgb), 0.62);
  box-shadow: 0 0 0 1px rgba(var(--row-rgb), 0.18);
}

.option-card.rank-muted .badge,
.option-card.rank-muted .badge.ready,
.option-card.rank-muted .badge.pending,
.option-card.rank-muted .badge.needs_input,
.option-card.rank-muted .badge.fallback,
.option-card.rank-muted .badge.failed {
  background: #8fa0b1;
  color: #fff;
  font-weight: 500;
}

.option-card.rank-muted .card-title {
  font-weight: 500;
}

.option-card.rank-muted .choice-row button,
.option-card.rank-muted .choice-row input,
.option-card.rank-muted .choice-row select {
  border-color: rgba(var(--row-rgb), 0.36);
  color: #364453;
  background: #fff;
}

.option-card.rank-muted .choice-row button.default-choice {
  border-color: rgba(var(--row-rgb), 0.34);
  background: rgba(var(--row-rgb), 0.08);
  color: #4b5a68;
}

.option-card.rank-muted .choice-row button.active,
.option-card.rank-muted .choice-row button.active.default-choice {
  border-color: var(--row-accent);
  background: var(--row-accent);
  color: #fff;
}

.option-card.rank-muted .choice-row button:hover,
.option-card.rank-muted .choice-row input:hover,
.option-card.rank-muted .choice-row select:hover {
  border-color: var(--row-accent);
  box-shadow: 0 0 0 1px rgba(var(--row-rgb), 0.28);
}

.option-card.rank-muted .choice-row input.input-edited {
  border-color: var(--row-accent);
  box-shadow: 0 0 0 1px rgba(var(--row-rgb), 0.32);
  background: #f1f4f8;
}

.option-card.rank-muted .slider-wrap.input-edited {
  background: rgba(var(--row-rgb), 0.09);
  box-shadow: 0 0 0 1px rgba(var(--row-rgb), 0.32);
}

.option-card.rank-muted .slider-wrap.slider-pinned {
  background: rgba(var(--row-rgb), 0.12);
  box-shadow: 0 0 0 1px rgba(var(--row-rgb), 0.4);
}

.option-card.rank-muted .slider-wrap input[type="range"]::-webkit-slider-thumb {
  background: var(--row-accent);
  box-shadow: 0 0 0 1px rgba(var(--row-rgb), 0.35);
}

.option-card.rank-muted .slider-wrap input[type="range"]::-moz-range-thumb {
  background: var(--row-accent);
  box-shadow: 0 0 0 1px rgba(var(--row-rgb), 0.35);
}

.option-card.clickable-card {
  cursor: default;
}

.option-card-thumb {
  width: calc(100% - (2 * var(--post-mark-thumb-margin-x, 6px)));
  height: 112px;
  border: 1px solid rgba(var(--row-rgb), 0.26);
  border-radius: 7px;
  overflow: hidden;
  margin-top: var(--post-mark-thumb-margin-y, 6px);
  margin-right: var(--post-mark-thumb-margin-x, var(--post-mark-thumb-margin-y, 6px));
  margin-bottom: var(--post-mark-thumb-margin-y, 6px);
  margin-left: var(--post-mark-thumb-margin-x, var(--post-mark-thumb-margin-y, 6px));
  background: #fff;
  flex: 0 0 auto;
}

.option-card-thumb .history-thumb-frame {
  border: 0;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.mark-card-title-wrap {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}

.mark-card-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.mark-card-copy .card-title {
  min-width: 0;
  flex: 1 1 auto;
}

.mark-card-copy .error {
  margin-top: 0;
  color: #4d6176;
  font-size: 11px;
  line-height: 1.25;
}

.action-card-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}

.action-card-title-wrap .card-title {
  min-width: 0;
  flex: 1 1 auto;
}

.action-card-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.action-chip-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.action-icon {
  display: block;
  width: 100%;
  height: 100%;
}

.action-icon .stroke {
  fill: none;
  stroke: var(--action-icon-stroke);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.action-icon .accent-fill {
  fill: var(--action-icon-accent);
  stroke: var(--action-icon-stroke);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.action-icon .muted-fill {
  fill: var(--action-icon-accent);
  opacity: 0.55;
  stroke: var(--action-icon-stroke);
  stroke-width: 1.1;
}

.action-icon .badge-text {
  fill: var(--action-icon-stroke);
  font-family: var(--font-sans);
  font-size: 5px;
  font-weight: 700;
  letter-spacing: 0.05px;
}

.option-card.rank-muted .action-card-icon {
  opacity: 0.76;
}

.mark-card-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mark-card-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.mark-card-icon .stroke {
  fill: none;
  stroke: var(--mark-icon-stroke);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mark-card-icon .accent-fill {
  fill: var(--mark-icon-accent);
  stroke: var(--mark-icon-stroke);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mark-card-icon .border-strong {
  stroke-width: 1.9;
}

.mark-card-icon .icon-text {
  fill: var(--mark-icon-stroke);
  font-family: var(--font-sans);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.1px;
}

.option-card.rank-muted .mark-card-icon {
  opacity: 0.76;
}

.card-header-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.accept-btn {
  border: 1px solid #1f9d55;
  background: #1f9d55;
  color: #fff;
  border-radius: 999px;
  padding: 3px 9px 3px 8px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 120ms ease, visibility 120ms ease;
}

.option-card:hover .accept-btn,
.option-card:focus-within .accept-btn {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.accept-btn .accept-icon {
  font-size: 12px;
  line-height: 1;
}

.accept-btn:hover:not(:disabled) {
  border-color: #188247;
  background: #188247;
}

.accept-btn:disabled {
  opacity: 0.46;
  cursor: not-allowed;
}

.option-card.post-mark-card .card-body {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0;
  pointer-events: none;
  transition: max-height 280ms ease, opacity 220ms ease, margin-top 280ms ease;
}

.option-card.post-mark-card.is-pending {
  cursor: default;
}

.option-card.post-mark-card.is-expanded .card-body {
  max-height: var(--card-body-max, 520px);
  opacity: 1;
  margin-top: 6px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  pointer-events: auto;
}

.option-card.post-mark-card.agent-mode-card {
  --agent-expand-bias: 0px;
  min-height: 0;
}

.option-card.post-mark-card.agent-mode-card .card-body {
  transition: max-height 280ms ease, opacity 220ms ease;
}

.option-card.post-mark-card.agent-mode-card .option-card-thumb {
  height: var(--post-mark-thumb-height, 112px);
  margin-top: var(--post-mark-thumb-margin-y, 6px);
  margin-right: var(--post-mark-thumb-margin-x, var(--post-mark-thumb-margin-y, 6px));
  margin-bottom: var(--post-mark-thumb-margin-y, 6px);
  margin-left: var(--post-mark-thumb-margin-x, var(--post-mark-thumb-margin-y, 6px));
}

.option-card.post-mark-card.agent-mode-card .card-header .card-title {
  display: block;
  color: #213347;
}

.option-card.post-mark-card.agent-mode-card .option-secondary-meta {
  display: block;
  min-height: 8px;
  max-height: 8px;
  line-height: 8px;
  margin-top: 2px;
  margin-bottom: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  visibility: hidden;
}

.option-card.post-mark-card.agent-mode-card.is-expanded .option-secondary-meta {
  visibility: visible;
}

.option-card.post-mark-card.agent-mode-card.is-expanded .card-body {
  max-height: var(--card-body-max, 520px);
  margin-top: 0;
}

.option-card.post-mark-card.agent-mode-card.is-expanded:not(.agent-member-open) .card-body {
  max-height: 58px;
  overflow: hidden;
}

.option-card.post-mark-card.agent-mode-card.agent-member-open .card-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.option-card.additional-mark-card .card-body {
  margin-top: 6px;
}

.option-card.initial-mark-card {
  --row-accent: #20242b;
  --row-rgb: 32, 36, 43;
}

.option-card.initial-mark-card.rank-primary {
  border-color: #1a1d23;
  background: linear-gradient(180deg, #e9eaed 0%, #ffffff 62%);
  box-shadow: 0 3px 12px rgba(20, 22, 27, 0.26);
}

.option-card.initial-mark-card.rank-secondary {
  border-color: #4a5059;
  background: linear-gradient(180deg, #f2f3f5 0%, #ffffff 65%);
  box-shadow: 0 2px 8px rgba(42, 45, 52, 0.18);
}

.option-card.initial-mark-card.rank-muted {
  border-color: #858b95;
}

.option-card.initial-mark-card:hover {
  border-color: #111417;
  box-shadow: 0 0 0 2px rgba(17, 20, 23, 0.2);
}

.option-card.initial-mark-card.rank-muted:hover {
  border-color: #3d424a;
  box-shadow: 0 0 0 1px rgba(38, 42, 48, 0.18);
}

.mark-compose-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 220ms ease, opacity 200ms ease, margin-top 220ms ease;
  margin-top: 0;
}

.option-card.additional-mark-card:hover .mark-compose-controls,
.option-card.additional-mark-card:focus-within .mark-compose-controls {
  max-height: 64px;
  opacity: 1;
  margin-top: 6px;
}

.mark-compose-controls button {
  border: 1px solid #c6d4e2;
  background: #fff;
  color: #23445f;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
  cursor: pointer;
}

.mark-compose-controls button:hover {
  border-color: #7ca3c9;
}

.mark-compose-controls button.active {
  border-color: #0a6fc2;
  color: #fff;
  background: #0a6fc2;
}

.layer-sync-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.layer-sync-hint {
  font-size: 11px;
  line-height: 1.3;
  color: #4a5f73;
  margin-bottom: 4px;
}

.layer-sync-hint.is-hidden {
  display: none;
}

.option-card.row-refine .layer-sync-hint {
  color: #8b4f00;
}

.layer-sync-controls button {
  border: 1px solid #c6d4e2;
  background: #fff;
  color: #23445f;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  line-height: 1.2;
  cursor: pointer;
}

.layer-sync-controls button:hover {
  border-color: #7ca3c9;
}

.layer-sync-controls button.active {
  border-color: var(--row-accent);
  background: var(--row-accent);
  color: #fff;
}

.layer-sync-controls.transform-sync button {
  padding-left: 9px;
  padding-right: 9px;
}

.option-card.rank-muted .layer-sync-controls button {
  border-color: #cfd6de;
  color: #445667;
}

.option-card.rank-muted .layer-sync-controls button.active {
  border-color: var(--row-accent);
  background: var(--row-accent);
  color: #fff;
}

.card-title {
  display: block;
  font-size: 13px;
  font-weight: 700;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agent-action-title {
  font-size: 12px;
  font-weight: 700;
  color: #d2362f;
  line-height: 1.28;
  word-break: break-word;
}

.option-secondary-meta {
  display: none;
  margin-top: 2px;
  margin-bottom: 6px;
  font-size: 8px;
  line-height: 1.3;
  color: #5a6f84;
  word-break: break-word;
}

.option-card.post-mark-card.is-expanded .option-secondary-meta {
  display: block;
}

.badge {
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--muted);
}

.badge.is-hidden {
  display: none;
}

.badge.ready {
  background: var(--ok);
}

.badge.pending {
  background: #6f8093;
}

.badge.needs_input {
  background: var(--primary);
}

.badge.fallback {
  background: #7a62d3;
}

.badge.failed {
  background: var(--fail);
}

.error {
  margin-top: 6px;
  font-size: 12px;
}

.error {
  color: var(--fail);
  word-break: break-word;
}

.option-card.post-mark-card.agent-mode-card .card-body > .error {
  margin-top: 0;
  min-height: 0;
}

.option-card.post-mark-card.agent-mode-card .card-body > .error:empty {
  display: none;
}

.pending-inputs {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.member-section {
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 6px;
  background: #fcfdff;
}

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

.member-toggle-btn {
  width: 20px;
  height: 20px;
  border: 1px solid #b7c8d9;
  border-radius: 4px;
  background: #fff;
  color: #2e4f69;
  font-size: 11px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.member-toggle-btn:hover:not(:disabled) {
  border-color: #7fa4c4;
  background: #edf4fb;
}

.member-section.is-disabled-step {
  opacity: 0.64;
  background: #f6f9fc;
}

.member-title {
  font-size: 12px;
  font-weight: 700;
  color: #1a3852;
}

.member-status {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 10px;
  text-transform: uppercase;
}

.member-status.selected {
  border-color: #8ac5a0;
  color: #1f7f4c;
  background: #e9f8ef;
}

.member-status.pending {
  border-color: #8fa8bf;
  color: #47607a;
  background: #edf2f7;
}

.member-inputs {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.member-rail {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pending-inputs.agent-group-pending {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  row-gap: 0;
  align-content: start;
}

.option-card.post-mark-card.agent-mode-card.is-expanded:not(.agent-member-open) .pending-inputs.agent-group-pending {
  row-gap: 0;
}

.option-card.post-mark-card.agent-mode-card.agent-member-open .pending-inputs.agent-group-pending {
  row-gap: 0;
  flex: 1 1 auto;
  min-height: 0;
}

.agent-action-rail {
  display: flex;
  align-items: stretch;
  flex: 0 0 auto;
  margin: 0;
  gap: 8px;
  min-height: 40px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 2px 4px;
  scrollbar-gutter: stable;
}

.agent-action-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 0 0 auto;
  height: 36px;
  min-width: 50px;
  max-width: 72px;
  box-sizing: border-box;
  border: 1px solid rgba(var(--row-rgb), 0.38);
  border-radius: 10px;
  background: #fff;
  color: #15314a;
  padding: 7px 9px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}

.agent-action-chip:hover {
  border-color: rgba(var(--row-rgb), 0.6);
  background: rgba(var(--row-rgb), 0.05);
}

.agent-action-chip.is-active {
  background: rgba(var(--row-rgb), 0.12);
  color: var(--row-accent);
  border-color: rgba(var(--row-rgb), 0.64);
}

.agent-action-chip.is-disabled {
  opacity: 1;
  background: #f1f5f9;
  color: #6f7d8c;
  border-color: #c7d1dc;
  cursor: pointer;
}

.agent-action-chip.is-disabled:hover {
  background: #ebf1f7;
  border-color: #c2ccd8;
}

.agent-chip-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.agent-chip-label .action-chip-icon {
  pointer-events: none;
}

.agent-action-chip.is-disabled .agent-chip-label {
  color: #6f7d8c;
}

.agent-action-chip.is-disabled .action-chip-icon {
  opacity: 0.72;
}

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

.agent-chip-toggle {
  position: absolute;
  top: 4px;
  right: 4px;
  border: 1px solid rgba(var(--row-rgb), 0.46);
  border-radius: 999px;
  background: #ffffff;
  color: #35506b;
  padding: 0;
  width: 16px;
  min-width: 16px;
  height: 16px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  line-height: 1;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  z-index: 2;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(0.96);
  transition:
    opacity 120ms ease,
    visibility 120ms ease,
    transform 120ms ease,
    background 120ms ease,
    border-color 120ms ease,
    color 120ms ease;
}

.agent-action-chip:hover .agent-chip-toggle,
.agent-action-chip:focus-within .agent-chip-toggle {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1);
}

.agent-chip-toggle:hover:not(:disabled) {
  border-color: rgba(var(--row-rgb), 0.68);
  background: #eef5fd;
}

.agent-chip-toggle:disabled,
.agent-chip-toggle.is-readonly {
  opacity: 0.45;
  cursor: not-allowed;
}

.agent-action-chip.is-disabled .agent-chip-toggle {
  display: none !important;
}

.agent-member-panel-host {
  border: 1px solid rgba(var(--row-rgb), 0.24);
  border-radius: 6px;
  background: rgba(var(--row-rgb), 0.03);
  padding: 6px;
  box-sizing: border-box;
  min-height: 40px;
  overflow-y: auto;
  overflow-x: hidden;
}

.option-card.post-mark-card.agent-mode-card.agent-member-open .agent-member-panel-host {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  margin-top: 8px;
}

.option-card.post-mark-card.agent-mode-card:not(.agent-member-open) .agent-member-panel-host {
  display: none;
}

.agent-member-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.option-card.post-mark-card.agent-mode-card.agent-member-open .agent-member-panel {
  flex: 1 1 auto;
  min-height: 0;
}

.agent-member-panel .member-header {
  margin: 0;
}

.agent-member-panel .member-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  color: #17324a;
}

.agent-member-panel .member-inputs {
  max-height: 240px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 2px;
  scrollbar-gutter: stable;
}

.option-card.post-mark-card.agent-mode-card.agent-member-open .agent-member-panel .member-inputs {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
}

.member-no-input {
  font-size: 11px;
  color: var(--muted);
}

.pending-block {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px;
  font-size: 12px;
}

.pending-block.compact {
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.option-card.post-mark-card.agent-mode-card .pending-block.compact,
.option-card.post-mark-card.agent-mode-card .pending-block.compact.is-selected {
  padding: 3px;
}

.pending-block.compact:hover {
  border-color: transparent;
}

.pending-block.is-default {
  border-color: #8fa8bf;
}

.pending-block.is-selected {
  border-color: var(--ok);
  box-shadow: 0 0 0 1px rgba(31, 157, 85, 0.16);
}

.pending-block.advanced {
  border-style: dashed;
  background: #fafafa;
}

.pending-block:hover {
  border-color: var(--primary);
}

.option-card .pending-block:hover {
  border-color: var(--row-accent);
}

.pending-title {
  margin-bottom: 5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.pending-source {
  margin: -2px 0 6px;
  font-size: 10px;
  color: #46647d;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.pending-default {
  margin: 0 0 5px;
  color: var(--muted);
  font-size: 11px;
}

.pending-status {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 6px;
  font-size: 10px;
  text-transform: uppercase;
}

.pending-status.default {
  border-color: #8fa8bf;
  color: #47607a;
  background: #edf2f7;
}

.pending-status.selected {
  border-color: #8ac5a0;
  color: #1f7f4c;
  background: #e9f8ef;
}

.choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.choice-row button,
.choice-row input,
.choice-row select {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 6px;
  padding: 4px 7px;
  font-size: 12px;
}

.choice-row input.number-spinner {
  min-width: 88px;
}

.choice-row input.pending-text-input {
  width: min(100%, 40ch);
}

.choice-row input.color-picker {
  width: 44px;
  min-width: 44px;
  height: 30px;
  padding: 2px;
  border-radius: 8px;
  cursor: pointer;
}

.choice-row.color-picker-row {
  align-items: center;
}

.choice-row .color-picker-panel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  padding: 3px 4px;
  background: #f8fafc;
}

.choice-row button.color-apply-btn {
  border-color: #d08a93;
  background: #fff4f6;
  color: #6f1821;
  font-weight: 700;
  padding: 4px 10px;
}

.choice-row button.color-apply-btn:hover:not(:disabled) {
  border-color: #b33947;
  background: #b33947;
  color: #fff;
}

.choice-row button.color-apply-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.multi-select-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.multi-select-search {
  width: 100%;
}

.multi-select-list {
  max-height: 132px;
  overflow: auto;
}

.multi-select-pager {
  display: flex;
  align-items: center;
  gap: 8px;
}

.multi-select-pager button {
  padding: 2px 8px;
}

.multi-select-page-info {
  font-size: 11px;
  color: var(--muted);
}

.slider-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 220px;
  border-radius: 6px;
  padding: 1px 3px;
  transition: background 120ms ease, box-shadow 120ms ease;
}

.option-card .slider-wrap.input-edited {
  background: #eef6ff;
  box-shadow: 0 0 0 1px rgba(var(--row-rgb), 0.28);
}

.slider-wrap.slider-pinned {
  background: #e8f6ee;
  box-shadow: 0 0 0 1px rgba(31, 157, 85, 0.35);
}

.slider-wrap input[type="range"] {
  --slider-thumb-size: 14px;
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  height: 20px;
}

.slider-wrap input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: #d7e3ef;
}

.option-card .slider-wrap input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: var(--slider-thumb-size);
  height: var(--slider-thumb-size);
  border-radius: 999px;
  margin-top: calc((4px - var(--slider-thumb-size)) / 2);
  border: 1px solid #ffffff;
  background: var(--row-accent);
  box-shadow: 0 0 0 1px rgba(var(--row-rgb), 0.25);
}

.slider-wrap input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: #d7e3ef;
}

.option-card .slider-wrap input[type="range"]::-moz-range-thumb {
  width: var(--slider-thumb-size);
  height: var(--slider-thumb-size);
  border: 1px solid #ffffff;
  border-radius: 999px;
  background: var(--row-accent);
  box-shadow: 0 0 0 1px rgba(var(--row-rgb), 0.25);
}

.slider-value {
  min-width: 44px;
  text-align: right;
  font-size: 11px;
  color: #2f4a62;
}

.option-card .choice-row button.active {
  border-color: var(--row-accent);
  color: #fff;
  background: var(--row-accent);
}

.choice-row button.default-choice {
  border-color: #8fa8bf;
  background: #f2f6fb;
  color: #385066;
}

.option-card .choice-row button.active.default-choice {
  border-color: var(--row-accent);
  color: #fff;
  background: var(--row-accent);
}

.choice-row button.loading {
  opacity: 0.7;
  cursor: progress;
}

.cards.post-mark-layout.agent-mode-active .choice-row button.loading {
  cursor: pointer;
}

.option-card .choice-row button:hover,
.option-card .choice-row input:hover,
.option-card .choice-row select:hover {
  border-color: var(--row-accent);
  box-shadow: 0 0 0 1px rgba(var(--row-rgb), 0.2);
}

.option-card .choice-row input.input-edited {
  border-color: var(--row-accent);
  box-shadow: 0 0 0 1px rgba(var(--row-rgb), 0.28);
  background: #eef6ff;
}

.card-actions {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
}

.commit-btn {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 700;
  background: #fff;
  cursor: pointer;
}

.commit-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.history-list {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: var(--history-list-padding-y) 6px;
  min-height: calc(var(--history-card-height) + (2 * var(--history-list-padding-y)));
  border: 1px solid #d7e3ef;
  border-radius: 8px;
  background: #ffffff;
}

.history-list[hidden] {
  display: none !important;
}

.history-list.is-scrubbing {
  cursor: ew-resize;
}

.history-item {
  --history-accent: var(--row-encoding);
  --history-rgb: var(--row-encoding-rgb);
  flex: 0 0 198px;
  width: 198px;
  height: var(--history-card-height);
  border: 1px solid rgba(var(--history-rgb), 0.45);
  border-radius: 4px;
  background: #fff;
  padding: 6px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 5px;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.history-item.row-refine {
  --history-accent: var(--row-refine);
  --history-rgb: var(--row-refine-rgb);
}

.history-item.row-encoding {
  --history-accent: var(--row-encoding);
  --history-rgb: var(--row-encoding-rgb);
}

.history-item.row-style {
  --history-accent: var(--row-style);
  --history-rgb: var(--row-style-rgb);
}

.history-item + .history-item {
  margin-left: -1px;
}

.history-item:hover,
.history-item.scrub-hover {
  border-color: var(--history-accent);
  box-shadow: inset 0 0 0 1px rgba(var(--history-rgb), 0.28);
  transform: translateY(-1px);
}

.history-item.active {
  border-color: var(--history-accent);
  box-shadow: inset 0 0 0 2px rgba(var(--history-rgb), 0.34);
}

.history-item:focus-visible {
  outline: 2px solid rgba(var(--history-rgb), 0.55);
  outline-offset: 1px;
}

.history-thumb {
  width: 100%;
  height: auto;
  border: 1px solid var(--history-accent);
  border-radius: 2px;
  overflow: hidden;
  background: #fff;
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
}

.history-thumb.row-refine {
  --history-accent: var(--row-refine);
}

.history-thumb.row-encoding {
  --history-accent: var(--row-encoding);
}

.history-thumb.row-style {
  --history-accent: var(--row-style);
}

.history-thumb-frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.history-thumb-canvas {
  display: block;
  flex: 0 0 auto;
  margin-left: auto;
  margin-right: auto;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

.history-thumb-scratch {
  position: fixed;
  left: -10000px;
  top: -10000px;
  width: auto;
  height: auto;
  opacity: 0;
  pointer-events: none;
}

.history-caption {
  flex: 0 0 auto;
  min-height: 13px;
  font-size: 11px;
  line-height: 1.1;
  color: #3e5872;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.history-caption-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.history-caption-row .history-caption {
  flex: 1 1 auto;
  min-width: 0;
}

.history-mode-icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
  border: 1.5px solid #d0deec;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.history-mode-icon.is-human {
  border-color: #3b82f6;
  background: #dbeafe;
}

.history-mode-icon.is-agent {
  border-color: #ef4444;
  background: #fee2e2;
}

.history-scrub-bar {
  position: absolute;
  top: 6px;
  bottom: 6px;
  width: 2px;
  border-radius: 999px;
  background: #0a6fc2;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-1px);
  transition: opacity 100ms ease;
  z-index: 10;
}

.history-list.is-scrubbing .history-scrub-bar {
  opacity: 1;
}

@media (max-width: 1100px) {
  .cards.post-mark-layout {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
  }

  .cards.post-mark-layout .option-card.rank-primary,
  .cards.post-mark-layout .option-card.rank-secondary,
  .cards.post-mark-layout .option-card.rank-muted,
  .cards.post-mark-layout .option-card.rank-muted:hover {
    flex: initial;
    max-width: none;
  }

  .cards.post-mark-layout .option-card.agent-mode-card.is-expanded {
    min-width: 0;
    transform: none;
  }

  .layout {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 760px) {
  .cards-title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .cards-title-row .action-row-navigator {
    margin-left: 0;
  }

  .track-tabs {
    width: 100%;
  }

  .action-row-navigator {
    width: 100%;
    justify-content: flex-start;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .action-row-dot {
    min-width: 82px;
    height: 30px;
    font-size: 11px;
  }

  .cards-header {
    align-items: flex-start;
  }

  .recommendation-mode-controls {
    width: 100%;
    justify-content: flex-start;
  }

  .visualization-row {
    grid-template-columns: 1fr;
  }

}