:root {
  --bg: #17191b;
  --panel: #202326;
  --panel2: #282c30;
  --line: #3b4147;
  --muted: #929aa3;
  --text: #e3e7eb;
  --accent: #d88a32;
  --accent2: #36a29a;
  --danger: #c75a5a;
  --blue: #1687b8;
  --nav-bg: #202225;
  --toolbar-bg: #25282b;
  --card-bg: #232629;
  --raised-bg: #292d31;
  --input-bg: #34393e;
}

/* Shared builder foundation. Feature-specific styles remain in each builder. */
.builder-ui,
.builder-ui * {
  box-sizing: border-box;
}

.builder-ui {
  margin: 0;
  height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", Arial, sans-serif;
}

/* Navigation */
.builder-ui .builder-nav,
.builder-ui #nav.builder-nav {
  height: 44px;
  display: flex;
  align-items: center;
  flex: none;
  padding: 0 18px;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--line);
}

.builder-ui .builder-nav .nav-links,
.builder-ui #nav.builder-nav .nav-links {
  height: 100%;
  display: flex;
  gap: 0;
}

.builder-ui .builder-nav .nav-links a,
.builder-ui #nav.builder-nav .nav-links a {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 14px;
  color: #9299a0;
  text-decoration: none;
  font-size: 13px;
  font-weight: 650;
  border-bottom: 2px solid transparent;
}

.builder-ui .builder-nav .nav-links a:hover,
.builder-ui #nav.builder-nav .nav-links a:hover {
  color: #fff;
}

.builder-ui .builder-nav .nav-links a.active,
.builder-ui #nav.builder-nav .nav-links a.active {
  color: #fff;
  border-bottom-color: var(--accent);
}

.builder-brand {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #8f969d;
  font-size: 12px;
}

.builder-brand-mark {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  flex: none;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-radius: 5px;
  font-size: 12px;
}

/* Builder frame */
.builder-ui .builder-layout {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.builder-ui .builder-config,
.builder-ui #control-panel.builder-config {
  width: 410px;
  min-width: 330px;
  max-width: 620px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--panel);
  border-right: 1px solid var(--line);
}

.builder-ui .builder-config-scroll,
.builder-ui #control-scroll.builder-config-scroll {
  flex: 1;
  overflow: auto;
  padding: 12px;
}

.builder-ui .builder-config-footer,
.builder-ui #control-footer.builder-config-footer {
  flex: none;
  padding: 10px 12px;
  background: #1d2022;
  border-top: 1px solid var(--line);
}

.builder-ui .builder-splitter,
.builder-ui #splitter.builder-splitter {
  width: 4px;
  flex: none;
  background: #34393e;
  cursor: col-resize;
}

.builder-ui .builder-splitter:hover,
.builder-ui .builder-splitter.dragging,
.builder-ui #splitter.builder-splitter:hover,
.builder-ui #splitter.builder-splitter:focus {
  background: var(--accent);
  outline: none;
}

.builder-ui .builder-preview,
.builder-ui #preview-panel.builder-preview {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
}

.builder-ui .builder-toolbar,
.builder-ui #preview-toolbar.builder-toolbar {
  height: 45px;
  display: flex;
  align-items: center;
  flex: none;
  gap: 7px;
  padding: 7px 12px;
  background: var(--toolbar-bg);
  border-bottom: 1px solid var(--line);
}

.builder-ui .builder-toolbar h1,
.builder-ui #preview-toolbar.builder-toolbar h1 {
  flex: 1;
  margin: 0;
  color: #8f969d;
  font-size: 11px;
  font-weight: 400;
  text-align: right;
}

.builder-ui .builder-preview-content {
  flex: 1;
  overflow: auto;
}

/* Listing-style cards and section headers */
.builder-ui .section {
  margin: 0 0 10px;
  overflow: hidden;
  background: var(--card-bg);
  border: 1px solid #353a3f;
  border-radius: 8px;
}

.builder-ui details.section > summary,
.builder-ui div.section > .section-header {
  min-height: 36px;
  margin: 0;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #d5d9dd;
  background: transparent;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.builder-ui details.section > summary {
  cursor: pointer;
  list-style: none;
}

.builder-ui details.section > summary::-webkit-details-marker {
  display: none;
}

.builder-ui details.section > summary::before {
  width: 10px;
  content: "▸";
  color: var(--accent);
}

.builder-ui details.section[open] > summary::before {
  content: "▾";
}

.builder-ui details.section > summary:hover,
.builder-ui div.section > .section-header:hover {
  background: var(--raised-bg);
}

.builder-ui div.section > .section-header .collapse-btn {
  width: 10px;
  padding: 0;
  color: var(--accent);
  background: transparent;
  border: 0;
  font-size: 11px;
}

.builder-ui details.section > .section-body,
.builder-ui div.section > .section-body {
  padding: 2px 12px 12px;
  border-top: 1px solid #33383d;
}

.builder-ui section.section {
  padding: 0 12px 12px;
}

.builder-ui section.section > .section-heading {
  min-height: 36px;
  margin: 0 -12px 11px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  color: #d5d9dd;
  border-bottom: 1px solid #33383d;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.builder-ui .subsec {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.builder-ui .subsec + .subsec {
  margin-top: 11px;
}

.builder-ui .subsec-title,
.builder-ui .subhead {
  margin: 11px 0 7px;
  color: var(--accent2);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Fields */
.builder-ui .field,
.builder-ui .form-group {
  margin: 9px 0;
}

.builder-ui .field > label,
.builder-ui .field label,
.builder-ui .form-label,
.builder-ui .inline-fields label {
  display: block;
  margin-bottom: 4px;
  color: #aeb5bc;
  font-size: 11px;
  font-weight: 650;
}

.builder-ui .input,
.builder-ui .form-input,
.builder-ui .form-select,
.builder-ui input[type="text"],
.builder-ui input[type="number"],
.builder-ui select,
.builder-ui textarea {
  width: 100%;
  padding: 7px 8px;
  color: var(--text);
  background: var(--input-bg);
  border: 1px solid #4b5259;
  border-radius: 4px;
  outline: none;
  font: 12px "Segoe UI", Arial, sans-serif;
}

.builder-ui textarea,
.builder-ui textarea.form-input {
  resize: vertical;
  font-family: Consolas, monospace;
}

.builder-ui .input:focus,
.builder-ui .form-input:focus,
.builder-ui .form-select:focus,
.builder-ui input:focus,
.builder-ui select:focus,
.builder-ui textarea:focus {
  border-color: var(--accent2);
  outline: none;
}

.builder-ui input::placeholder,
.builder-ui textarea::placeholder {
  color: #747d85;
}

.builder-ui small,
.builder-ui .hint,
.builder-ui .dp-hint {
  color: #7f8992;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.45;
}

/* Buttons */
.builder-ui .btn,
.builder-ui .button {
  min-height: 25px;
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #dbe0e4;
  background: #33383c;
  border: 1px solid #50575e;
  border-radius: 4px;
  cursor: pointer;
  font: 700 11px "Segoe UI", Arial, sans-serif;
  white-space: nowrap;
}

.builder-ui .btn:hover,
.builder-ui .button:hover:not(:disabled) {
  background: #40464b;
  border-color: #596168;
}

.builder-ui .btn:disabled,
.builder-ui .button:disabled {
  color: #6f767d;
  background: #2b2f32;
  cursor: default;
}

.builder-ui .btn-primary,
.builder-ui .button.primary {
  color: #fff;
  background: #a85e19;
  border-color: #cc7724;
}

.builder-ui .btn-primary:hover,
.builder-ui .button.primary:hover:not(:disabled) {
  background: #c37124;
  border-color: #d78331;
}

.builder-ui .btn-success,
.builder-ui .button.success {
  color: #fff;
  background: #26766f;
  border-color: #359b92;
}

.builder-ui .btn-success:hover,
.builder-ui .button.success:hover:not(:disabled) {
  background: #308b83;
  border-color: #43aaa1;
}

.builder-ui .btn-danger,
.builder-ui .button.remove-button {
  color: #f0a0a0;
  background: #51292a;
  border-color: #824344;
}

.builder-ui .btn-danger:hover,
.builder-ui .button.remove-button:hover:not(:disabled) {
  background: #633132;
}

.builder-ui .btn-sm,
.builder-ui .button.compact {
  min-height: 21px;
  padding: 4px 7px;
  font-size: 10px;
}

.builder-ui .button.full {
  width: 100%;
  margin-top: 4px;
}

/* Repeated cards, chips, and library rows */
.builder-ui .card,
.builder-ui .template-summary,
.builder-ui .ivar-item,
.builder-ui .col-item,
.builder-ui .module-item,
.builder-ui .dp-card,
.builder-ui .template-item {
  background: var(--raised-bg);
  border-color: #3c4247;
  border-radius: 6px;
}

.builder-ui .template-summary {
  padding: 10px;
}

.builder-ui .template-summary p {
  color: #8e979f;
  font-size: 10px;
}

.builder-ui .ivar-badge,
.builder-ui .analysis-group-count {
  color: #eda956;
  background: #d88a3229;
  border-radius: 10px;
}

.builder-ui .dp-merge-idx {
  background: var(--accent);
}

.builder-ui .dp-meta,
.builder-ui .subsec-mini,
.builder-ui .pts-dim,
.builder-ui .var-preview-title,
.builder-ui .detail-header td {
  color: #62c8bf;
}

.builder-ui .dp-merge-step select,
.builder-ui .cb-builder select,
.builder-ui .cb-builder input,
.builder-ui .cb-combinator {
  color: var(--text);
  background: var(--input-bg);
  border-color: #4b5259;
}

.builder-ui .dp-merge-step select:focus,
.builder-ui .cb-builder select:focus,
.builder-ui .cb-builder input:focus {
  border-color: var(--accent2);
}

.builder-ui .chip,
.builder-ui .ivar-chip,
.builder-ui .cb-chip {
  color: #62c8bf;
  background: #36a29a20;
  border-color: #36a29a66;
  border-radius: 10px;
}

.builder-ui .page-tab.active {
  border-bottom-color: var(--accent);
}

.builder-ui .table-preview .group-header {
  color: #62c8bf;
  background: #243735;
}

.builder-ui .analysis-group {
  background: var(--card-bg);
  border-color: #40464b;
}

.builder-ui .analysis-group > summary::before {
  color: var(--accent);
}

.builder-ui .analysis-group > summary:hover {
  background: var(--raised-bg);
}

.builder-ui .template-item:hover {
  border-color: var(--accent2);
}

.builder-ui .fb-item.fb-selected {
  background: #24514d;
}

/* Preview empty states */
.builder-ui .empty,
.builder-ui .builder-empty,
.builder-ui #previewPlaceholder.builder-empty {
  width: min(620px, calc(100% - 36px));
  max-width: 620px;
  margin: 70px auto;
  padding: 28px;
  color: #737c85;
  background: #1d2023;
  border: 1px dashed #46505a;
  border-radius: 12px;
  font-size: 12px;
  font-style: normal;
  line-height: 1.45;
  text-align: center;
}

.builder-ui .empty strong,
.builder-ui .builder-empty strong {
  color: #c2c8ce;
  font-size: 16px;
}

.builder-ui .empty p,
.builder-ui .builder-empty p {
  margin: 14px 0 0;
}

/* Dialogs */
.builder-ui .modal-overlay,
.builder-ui .overlay {
  background: #000b;
}

.builder-ui .modal,
.builder-ui .dialog {
  color: var(--text);
  background: var(--toolbar-bg);
  border-color: #4a5056;
  border-radius: 9px;
  box-shadow: 0 18px 70px #000;
}

.builder-ui .modal-header,
.builder-ui .modal-head,
.builder-ui .modal-footer,
.builder-ui .modal-foot,
.builder-ui .dialog header,
.builder-ui .dialog footer {
  padding: 12px 15px;
  border-color: #3c4247;
}

.builder-ui .modal-body {
  padding: 13px 15px;
}

.builder-ui .modal-header h3,
.builder-ui .modal-head h3,
.builder-ui .dialog h2 {
  color: var(--text);
  font-size: 14px;
}

/* Status and scrollbars */
.builder-ui .status,
.builder-ui .status-bar {
  height: 23px;
  min-height: 23px;
  display: flex;
  align-items: center;
  flex: none;
  gap: 9px;
  padding: 4px 13px;
  color: #fff;
  background: #2e6e69;
  font-size: 11px;
}

.builder-ui .status.idle,
.builder-ui .status-bar.idle {
  color: #9aa2aa;
  background: #2c3034;
}

.builder-ui .status.error-status,
.builder-ui .status-bar.error {
  color: #fff;
  background: #8c3737;
}

.builder-ui .status-indicator {
  width: 8px;
  height: 8px;
  flex: none;
  background: #fff;
  border-radius: 50%;
}

.builder-ui .status-bar.idle .status-indicator {
  background: var(--accent2);
}

.builder-ui::-webkit-scrollbar,
.builder-ui ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.builder-ui::-webkit-scrollbar-track,
.builder-ui ::-webkit-scrollbar-track {
  background: #1d2022;
}

.builder-ui::-webkit-scrollbar-thumb,
.builder-ui ::-webkit-scrollbar-thumb {
  background: #485057;
  border-radius: 5px;
}

.builder-ui::-webkit-scrollbar-thumb:hover,
.builder-ui ::-webkit-scrollbar-thumb:hover {
  background: #596269;
}

@media (max-width: 850px) {
  .builder-ui .builder-config,
  .builder-ui #control-panel.builder-config {
    width: 390px;
    min-width: 300px;
  }
}

/* ============================================================
   RTF-style preview sheet — shared by the table, listing, and
   graph builders. Mirrors the generated RTF deliverable: a white
   sheet on a light-gray card, Courier text, black rule lines,
   titles centered above and footnotes below the content.
   ============================================================ */
.rtf-preview-page {
  background: #f2f2f2;
  padding: 14px;
  margin-bottom: 16px;
  border-radius: 6px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}
.rtf-preview-sheet {
  background: #fff;
  color: #111;
  font-family: 'Courier New', monospace;
  padding: 22px 26px;
  border: 1px solid #d6d6d6;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.rtf-preview-global-title {
  text-align: left;
  font-weight: 700;
  font-size: 13px;
  margin: 0 0 2px;
}
.rtf-preview-title {
  text-align: center;
  font-weight: 700;
  font-size: 13px;
  margin: 0 0 2px;
}
.rtf-preview-page-label {
  text-align: left;
  font-weight: 700;
  font-size: 12px;
  margin: 0 0 10px;
}
.rtf-preview-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12px;
}
.rtf-preview-table th,
.rtf-preview-table td {
  border: 0;
  padding: 4px 7px;
  text-align: left;
  vertical-align: top;
  white-space: pre-wrap;
}
.rtf-preview-table thead {
  border-top: 2px solid #111;
  border-bottom: 1px solid #111;
}
.rtf-preview-table thead th {
  font-weight: 700;
}
.rtf-preview-table tbody {
  border-bottom: 2px solid #111;
}
.rtf-preview-table .group-header {
  text-align: center;
  font-weight: 700;
}
.rtf-preview-table .module-header {
  font-weight: 700;
  font-style: italic;
}
.rtf-preview-table .row-label {
  padding-left: 16px;
}
.rtf-preview-table tbody tr.id-break td {
  border-top: 8px solid #fff;
}
.rtf-preview-image {
  display: block;
  max-width: 100%;
  margin: 10px auto 0;
}
.rtf-preview-footnotes {
  border-top: 1px solid #111;
  margin-top: 12px;
  padding-top: 6px;
  font-size: 11px;
}
.rtf-preview-footnote {
  margin: 0;
  padding: 0;
}
.rtf-preview-audit {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  margin-top: 6px;
}
.preview-disclaimer {
  font-size: 12px;
  color: #c9a86b;
  background: rgba(216, 138, 50, 0.08);
  border: 1px solid rgba(216, 138, 50, 0.3);
  border-radius: 4px;
  padding: 6px 10px;
  margin: 8px 12px 0;
  font-style: italic;
}