* {
  box-sizing: border-box;
}

:root {
  --body: #f2f4f7;
  --panel: #ffffff;
  --muted-panel: #e9edf3;
  --border: #e1e5eb;
  --border-strong: #d5dbe5;
  --text: #101828;
  --text-secondary: #35445f;
  --text-tertiary: #667085;
  --text-quaternary: #98a2b3;
  --blue: #155eef;
  --blue-dark: #0f4cc7;
  --blue-soft: #eef4ff;
  --green: #12b76a;
  --green-soft: #ecfdf3;
  --amber: #f79009;
  --amber-soft: #fffaeb;
  --red: #f04438;
  --red-soft: #fef3f2;
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.08);
  --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.08), 0 1px 3px rgba(16, 24, 40, 0.08);
  --shadow-hover: 0 8px 18px rgba(16, 24, 40, 0.11);
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  color: var(--text);
  background: var(--body);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
}

button,
input,
textarea,
select {
  font: inherit;
  letter-spacing: 0;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

h1,
h2,
h3,
p {
  margin: 0;
  letter-spacing: 0;
}

.dify-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(320px, 1fr) auto minmax(320px, 1fr);
  align-items: center;
  height: 70px;
  border-bottom: 1px solid var(--border);
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.dify-brand {
  display: flex;
  align-items: center;
  min-width: 0;
  padding-left: 16px;
}

.dify-logo {
  display: flex;
  align-items: baseline;
  gap: 0;
  color: var(--blue);
  font-size: 30px;
  line-height: 1;
  font-weight: 800;
}

.dify-logo span {
  color: #111827;
}

.dify-logo strong {
  color: var(--blue);
}

.workspace-divider {
  width: 1px;
  height: 24px;
  margin: 0 12px;
  background: var(--border);
}

.workspace-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 260px;
  height: 40px;
  border: 0;
  padding: 0;
  color: #172033;
  background: transparent;
  font-size: 15px;
}

.workspace-icon,
.avatar {
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--blue);
  font-weight: 700;
}

.workspace-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
}

.workspace-switch span:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chevron {
  color: var(--text-quaternary);
  font-size: 16px;
}

.top-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.top-nav a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  border-radius: 14px;
  padding: 0 14px;
  color: #344054;
  text-decoration: none;
  font-size: 17px;
  font-weight: 500;
}

.top-nav a span {
  color: #667085;
  font-size: 18px;
}

.top-nav a.active {
  color: var(--blue);
  background: #fff;
  box-shadow: 0 4px 14px rgba(16, 24, 40, 0.12);
  font-weight: 700;
}

.top-nav a.active span {
  color: var(--blue);
}

.top-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  padding-right: 17px;
}

.plain-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  border: 0;
  padding: 0;
  color: #344054;
  background: transparent;
  font-size: 15px;
}

.avatar {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  font-size: 18px;
}

.dify-page {
  min-height: calc(100vh - 70px);
  background: var(--body);
}

.knowledge-page {
  position: relative;
  min-height: calc(100vh - 70px);
  padding: 20px 60px 72px;
}

.list-toolbar {
  position: sticky;
  top: 70px;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 60px;
  background: var(--body);
}

.toolbar-spacer {
  flex: 1 1 auto;
}

.checkbox-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  color: #344054;
  font-size: 16px;
  white-space: nowrap;
}

.checkbox-line input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--blue);
}

.filter-btn,
.api-btn,
.icon-btn,
.primary-btn,
.secondary-btn,
.danger-btn,
.text-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 10px;
  font-weight: 500;
  white-space: nowrap;
}

.filter-btn {
  height: 40px;
  border: 0;
  padding: 0 14px;
  color: #344054;
  background: #e9edf4;
  font-size: 15px;
}

.search-box {
  display: flex;
  align-items: center;
  width: 250px;
  height: 40px;
  border-radius: 10px;
  padding: 0 12px;
  color: #8a96aa;
  background: #e5eaf1;
}

.search-box input {
  width: 100%;
  height: 100%;
  min-width: 0;
  border: 0;
  padding: 0 0 0 8px;
  color: var(--text);
  background: transparent;
  outline: none;
}

.search-box input::placeholder {
  color: #8a96aa;
}

.api-btn {
  height: 40px;
  border: 1px solid var(--border-strong);
  padding: 0 14px;
  color: #172033;
  background: #fff;
  box-shadow: var(--shadow-xs);
  font-size: 15px;
}

.green-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(18, 183, 106, 0.12);
}

.icon-btn {
  width: 38px;
  height: 38px;
  border: 1px solid var(--border);
  color: #667085;
  background: #fff;
  font-size: 18px;
}

.knowledge-grid {
  display: grid;
  grid-template-columns: 434px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  margin-top: 30px;
}

.models-page {
  min-height: calc(100vh - 70px);
  padding: 36px 60px 72px;
}

.evaluation-page {
  min-height: calc(100vh - 70px);
  padding: 28px 60px 72px;
}

.evaluation-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.evaluation-head h1 {
  margin-top: 4px;
  color: var(--text);
  font-size: 30px;
  letter-spacing: 0;
}

.evaluation-head p:last-child {
  margin-top: 8px;
  color: #667085;
  line-height: 1.5;
}

.evaluation-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.evaluation-layout {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  margin-top: 18px;
}

.evaluation-sidebar {
  position: sticky;
  top: 92px;
  display: grid;
  gap: 12px;
}

.evaluation-main {
  min-width: 0;
}

.evaluation-card,
.evaluation-panel {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  background: #fff;
  box-shadow: var(--shadow-xs);
}

.evaluation-panel {
  margin-top: 12px;
}

.evaluation-card + .evaluation-card {
  margin-top: 12px;
}

.evaluation-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px;
  background: #fff;
}

.evaluation-tabs button {
  min-height: 34px;
  border: 0;
  border-radius: 8px;
  padding: 0 12px;
  color: #667085;
  background: transparent;
  white-space: nowrap;
}

.evaluation-tabs button.active {
  color: #172033;
  background: #eef2ff;
}

.eval-target-list,
.eval-suite-list,
.eval-query-list,
.eval-chunk-results {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.eval-target-item,
.eval-suite-item,
.eval-query-item,
.eval-chunk-item {
  display: grid;
  gap: 5px;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  color: #344054;
  background: #fff;
  text-align: left;
}

.eval-target-item.active,
.eval-suite-item.active {
  border-color: #8bb6ff;
  background: #f4f8ff;
}

.eval-target-item strong,
.eval-suite-item strong,
.eval-query-item strong,
.eval-chunk-item strong {
  color: #172033;
  font-size: 13px;
}

.eval-target-item span,
.eval-suite-item span,
.eval-query-item span,
.eval-chunk-item span {
  color: #667085;
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.evaluation-summary-grid,
.eval-report-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.evaluation-summary-grid div,
.eval-report-grid div {
  min-height: 72px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  background: #f8fafc;
}

.evaluation-summary-grid span,
.eval-report-grid span {
  display: block;
  color: #667085;
  font-size: 12px;
}

.evaluation-summary-grid strong,
.eval-report-grid strong {
  display: block;
  margin-top: 8px;
  color: #172033;
  font-size: 16px;
  overflow-wrap: anywhere;
}

.eval-option-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  background: #f8fafc;
}

.eval-option-group > span {
  flex: 0 0 120px;
  color: #667085;
  font-size: 12px;
  font-weight: 650;
}

.eval-option-group label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #344054;
  font-size: 12px;
}

.eval-option-group label.disabled {
  color: #98a2b3;
}

.eval-option-group input {
  width: 14px;
  height: 14px;
  accent-color: var(--blue);
}

.eval-report,
.migration-guide {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.eval-report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.eval-report-table th,
.eval-report-table td {
  border-bottom: 1px solid var(--border);
  padding: 8px;
  text-align: left;
  vertical-align: top;
}

.eval-report-table th {
  color: #667085;
  background: #f8fafc;
  font-weight: 650;
}

.models-layout {
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.model-editor,
.model-list-panel {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow-xs);
}

.model-editor {
  position: sticky;
  top: 92px;
  padding: 18px;
}

.model-editor-head,
.models-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.model-editor h1,
.models-head h2 {
  margin-top: 4px;
  color: #172033;
  font-size: 22px;
}

.model-edit-form {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.model-edit-form label {
  display: grid;
  gap: 6px;
  color: #667085;
  font-size: 12px;
  font-weight: 650;
}

.model-edit-form input,
.model-edit-form select {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
}

.checkbox-card {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  color: #344054 !important;
  background: #fff;
}

.checkbox-card input {
  width: 16px;
  min-height: 16px;
  margin: 0;
  accent-color: var(--blue);
}

.model-field-note {
  margin: -4px 0 4px;
  color: #667085;
  font-size: 12px;
  line-height: 1.45;
}

.sparse-diagnostic-panel {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.sparse-diagnostic-panel .preview-head {
  margin-bottom: 0;
}

.sparse-diagnostic-panel .preview-head h3 {
  margin: 2px 0 0;
  font-size: 15px;
  line-height: 1.35;
}

.sparse-diagnostic-panel label {
  display: grid;
  gap: 6px;
  color: #667085;
  font-size: 12px;
  font-weight: 650;
}

.sparse-diagnostic-panel textarea {
  width: 100%;
  min-height: 76px;
  resize: vertical;
}

.sparse-diagnostic-result {
  display: grid;
  gap: 8px;
  min-height: 42px;
  color: #667085;
  font-size: 12px;
  line-height: 1.45;
}

.sparse-diagnostic-hit {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px;
  background: #fbfcfe;
}

.sparse-diagnostic-hit strong,
.sparse-diagnostic-hit span,
.sparse-diagnostic-hit p {
  overflow-wrap: anywhere;
}

.sparse-diagnostic-hit p {
  margin: 8px 0 0;
  color: #475467;
}

.model-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.model-list-panel {
  min-height: 640px;
  padding: 18px;
}

.model-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.model-filter-tabs button {
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0 12px;
  color: #344054;
  background: #fff;
}

.model-filter-tabs button.active {
  color: var(--blue);
  border-color: #b2ccff;
  background: var(--blue-soft);
  font-weight: 700;
}

.model-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.connection-card {
  display: grid;
  gap: 12px;
  min-height: 190px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  background: #fff;
  box-shadow: var(--shadow-xs);
}

.connection-card.active {
  border-color: #b2ccff;
  box-shadow: 0 0 0 3px rgba(21, 94, 239, 0.08);
}

.connection-card-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.connection-card h3 {
  margin: 0;
  color: #172033;
  font-size: 15px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.model-meta {
  margin-top: 3px;
  color: #667085;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.model-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 0 9px;
  color: #344054;
  background: #eef2f6;
  font-size: 12px;
  font-weight: 700;
}

.model-badge.embedding {
  color: #155eef;
  background: #eef4ff;
}

.model-badge.llm {
  color: #027a48;
  background: #ecfdf3;
}

.connection-card-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: #667085;
  font-size: 12px;
}

.create-knowledge-card {
  display: flex;
  height: 238px;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
  background: #e9edf4;
}

.create-options {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: 28px 32px;
}

.connect-option {
  border-top: 1px solid #dfe4ec;
  padding: 18px 32px;
}

.create-knowledge-card button {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  min-height: 24px;
  border: 0;
  padding: 0;
  color: #43516b;
  background: transparent;
  text-align: left;
  font-size: 16px;
  font-weight: 500;
}

.create-knowledge-card button:hover:not(:disabled) {
  color: var(--blue);
}

.create-knowledge-card button span {
  display: grid;
  width: 18px;
  place-items: center;
  color: #667085;
  font-size: 19px;
}

.dataset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(392px, 1fr));
  gap: 18px;
}

.dataset-grid > .empty-state {
  grid-column: 1 / -1;
}

.dataset-card {
  display: flex;
  position: relative;
  height: 238px;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  color: inherit;
  background: #fff;
  box-shadow: var(--shadow-card);
  text-align: left;
  transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.dataset-card:hover,
.dataset-card.active {
  border-color: #cfd9ea;
  box-shadow: var(--shadow-hover);
  transform: translateY(-1px);
}

.dataset-card-header {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.dataset-thumb {
  position: relative;
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  border: 1px solid #ffd9b8;
  border-radius: 12px;
  background: #fff0df;
  font-size: 28px;
}

.dataset-thumb::after {
  content: "▦";
  position: absolute;
  right: -7px;
  bottom: -6px;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 6px;
  color: #fff;
  background: #4f46e5;
  font-size: 11px;
}

.dataset-card h2 {
  overflow: hidden;
  color: #172033;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dataset-owner {
  margin-top: 4px;
  color: #667085;
  font-size: 13px;
  line-height: 1.35;
}

.dataset-desc {
  display: -webkit-box;
  min-height: 46px;
  margin-top: 20px;
  overflow: hidden;
  color: #465672;
  font-size: 15px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.tag-row {
  min-height: 26px;
  margin-top: 14px;
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  height: 24px;
  border: 1px dashed var(--border-strong);
  border-radius: 8px;
  padding: 0 9px;
  color: #667085;
  background: #fff;
  font-size: 12px;
}

.dataset-card-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  color: #667085;
  font-size: 13px;
}

.dataset-card-footer span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.dataset-card-footer .divider {
  width: 1px;
  height: 14px;
  background: var(--border);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 600;
}

.status-badge.completed {
  color: #027a48;
  background: var(--green-soft);
}

.status-badge.pending,
.status-badge.indexing,
.status-badge.uploading,
.status-badge.queued,
.status-badge.running,
.status-badge.uploaded,
.status-badge.parsing,
.status-badge.cleaned,
.status-badge.chunked,
.status-badge.embedded {
  color: #b54708;
  background: var(--amber-soft);
}

.status-badge.failed {
  color: #b42318;
  background: var(--red-soft);
}

.status-badge.draft {
  color: #475467;
  background: #eef2f6;
}

.badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  border-radius: 999px;
  padding: 0 9px;
  color: #344054;
  background: #eef2f6;
  font-size: 12px;
  font-weight: 650;
}

.dataset-card-actions {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: flex;
  gap: 8px;
}

.card-mini-btn {
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 9px;
  color: #465672;
  background: #fff;
  font-size: 12px;
}

.card-mini-btn:hover {
  color: var(--blue);
  border-color: #b8ccff;
  background: var(--blue-soft);
}

.card-mini-btn.danger-mini {
  color: var(--red);
}

.card-mini-btn.danger-mini:hover {
  border-color: #fecdca;
  color: var(--red);
  background: var(--red-soft);
}

.dataset-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 430px;
  gap: 18px;
  margin-top: 24px;
}

.detail-main,
.hit-test-panel {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow-xs);
}

.detail-main {
  padding: 20px;
}

.detail-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.eyebrow,
.step-label {
  color: #667085;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 600;
}

.detail-title-row h1 {
  margin-top: 4px;
  color: #172033;
  font-size: 22px;
  line-height: 1.3;
}

.detail-title-row p:last-child,
.complete-layout p {
  margin-top: 6px;
  color: #667085;
  font-size: 14px;
  line-height: 1.55;
}

.detail-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.primary-btn,
.secondary-btn,
.danger-btn {
  height: 38px;
  border: 1px solid transparent;
  padding: 0 14px;
}

.primary-btn {
  color: #fff;
  background: var(--blue);
}

.primary-btn:hover {
  background: var(--blue-dark);
}

.secondary-btn {
  color: #344054;
  border-color: var(--border);
  background: #fff;
}

.secondary-btn:hover {
  border-color: #b8ccff;
  color: var(--blue);
}

.danger-btn {
  color: var(--red);
  border-color: #fecdca;
  background: #fff;
}

.danger-btn:hover {
  background: var(--red-soft);
}

.text-btn {
  height: 30px;
  border: 0;
  padding: 0 8px;
  color: var(--blue);
  background: transparent;
}

.text-btn:hover {
  background: var(--blue-soft);
}

.detail-stats,
.preview-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.detail-stats div,
.preview-metrics div {
  min-height: 70px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  background: #f8fafc;
}

.detail-stats span,
.preview-metrics span {
  display: block;
  color: #667085;
  font-size: 12px;
}

.detail-stats strong,
.preview-metrics strong {
  display: block;
  margin-top: 8px;
  color: #172033;
  font-size: 18px;
}

.documents-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 22px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}

.documents-head h2 {
  font-size: 17px;
}

.document-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.document-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  color: inherit;
  background: #fff;
  text-align: left;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.document-row:hover,
.document-row:focus-visible {
  border-color: #b8ccff;
  background: #fbfdff;
  box-shadow: var(--shadow-xs);
  outline: none;
}

.document-row-main {
  min-width: 0;
}

.document-row-side,
.document-detail-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.document-name {
  overflow-wrap: anywhere;
  color: #172033;
  font-size: 14px;
  font-weight: 650;
}

.document-meta {
  margin-top: 4px;
  color: #667085;
  font-size: 12px;
  line-height: 1.4;
}

.document-detail-modal {
  position: fixed;
  inset: 0;
  z-index: 45;
}

.document-detail-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 24, 40, 0.36);
}

.document-detail-panel {
  position: absolute;
  top: 42px;
  right: 42px;
  bottom: 42px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(760px, calc(100vw - 84px));
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 24px 64px rgba(16, 24, 40, 0.24);
}

.document-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--border);
  padding: 18px;
}

.document-detail-head h2 {
  margin-top: 4px;
  overflow-wrap: anywhere;
  font-size: 20px;
  line-height: 1.3;
}

.document-detail-head p:last-child {
  margin-top: 5px;
  color: #667085;
  font-size: 13px;
}

.document-detail-body {
  min-height: 0;
  overflow: auto;
  padding: 18px;
  background: #fbfcfe;
}

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

.document-status-grid div {
  min-height: 66px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px;
  background: #fff;
}

.document-status-grid span {
  display: block;
  color: #667085;
  font-size: 12px;
}

.document-status-grid strong {
  display: block;
  margin-top: 5px;
  overflow-wrap: anywhere;
  color: #172033;
  font-size: 13px;
}

.document-detail-section {
  margin-top: 18px;
}

.hit-test-panel {
  padding: 16px;
}

.tool-tabs {
  display: inline-flex;
  gap: 4px;
  border-radius: 10px;
  padding: 4px;
  background: #e9edf4;
}

.tool-tabs button {
  height: 30px;
  border: 0;
  border-radius: 8px;
  padding: 0 10px;
  color: #667085;
  background: transparent;
  font-size: 13px;
}

.tool-tabs button.active {
  color: var(--blue);
  background: #fff;
  box-shadow: var(--shadow-xs);
}

textarea,
input {
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  color: var(--text);
  background: #fff;
  outline: none;
}

textarea:focus,
input:focus {
  border-color: #9db9ff;
  box-shadow: 0 0 0 3px rgba(21, 94, 239, 0.12);
}

.hit-test-panel textarea {
  width: 100%;
  min-height: 96px;
  margin-top: 12px;
  padding: 10px;
  resize: vertical;
}

.action-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.result-box,
.empty-state {
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
  color: #667085;
  background: #f8fafc;
  font-size: 13px;
  line-height: 1.55;
}

.result-box {
  min-height: 118px;
  max-height: 260px;
  margin-top: 10px;
  overflow: auto;
  padding: 12px;
  white-space: pre-wrap;
}

.result-item {
  border-bottom: 1px solid var(--border);
  padding: 9px 0;
}

.result-item:first-child {
  padding-top: 0;
}

.result-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.result-item strong {
  display: block;
  margin-bottom: 4px;
  color: #172033;
}

.chat-separator {
  height: 1px;
  margin: 16px 0 4px;
  background: var(--border);
}

.empty-state {
  padding: 16px;
}

.knowledge-tip {
  position: fixed;
  left: 60px;
  bottom: 56px;
  max-width: 360px;
  pointer-events: none;
}

.knowledge-tip h2 {
  color: var(--blue);
  font-size: 26px;
  line-height: 1.2;
}

.knowledge-tip p {
  margin-top: 6px;
  color: #35445f;
  font-size: 16px;
  line-height: 1.4;
}

.api-key-floating {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 330px;
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 7px 9px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 30px rgba(16, 24, 40, 0.12);
}

.api-key-floating span {
  flex: 0 0 auto;
  color: #667085;
  font-size: 12px;
  font-weight: 650;
}

.api-key-floating input {
  min-width: 0;
  width: 100%;
  height: 30px;
  border: 0;
  padding: 0 4px;
  background: transparent;
}

.hidden {
  display: none !important;
}

.wizard {
  position: fixed;
  inset: 0;
  z-index: 50;
}

.wizard-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 24, 40, 0.48);
}

.wizard-panel {
  position: absolute;
  inset: 18px 36px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 24px 64px rgba(16, 24, 40, 0.24);
}

.wizard-head {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--border);
  padding: 16px 18px;
}

.wizard-head h2 {
  margin-top: 3px;
  font-size: 20px;
}

.stepper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.step {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 10px 4px 5px;
  color: #667085;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
}

.step span {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 999px;
  color: #667085;
  background: #f2f4f7;
}

.step.active {
  color: var(--blue);
  border-color: #b2ccff;
  background: var(--blue-soft);
}

.step.active span {
  color: #fff;
  background: var(--blue);
}

.step.done {
  color: #027a48;
  border-color: #abefc6;
  background: var(--green-soft);
}

.step.done span {
  color: #fff;
  background: var(--green);
}

.wizard-body {
  min-height: 0;
  overflow: auto;
  background: #fbfcfe;
}

.wizard-step {
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
  gap: 24px;
  min-height: 100%;
  padding: 28px;
}

.wizard-step.cleaning-step {
  grid-template-columns: minmax(0, 4.5fr) minmax(0, 5.5fr);
  align-items: stretch;
  height: 100%;
  min-height: 0;
  gap: 18px;
  overflow: hidden;
  padding: 18px 22px;
}

.wizard-column {
  min-width: 0;
}

.cleaning-config-column {
  display: flex;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
  flex-direction: column;
  scrollbar-gutter: stable;
}

.cleaning-step .cleaning-config-column h3 {
  margin-top: 2px;
  font-size: 20px;
}

.wizard-column h3,
.complete-layout h3 {
  margin-top: 6px;
  color: #172033;
  font-size: 22px;
  line-height: 1.3;
}

.source-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.source-card {
  display: grid;
  justify-items: start;
  min-height: 126px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  color: #172033;
  background: #fff;
  text-align: left;
}

.source-card.active {
  border-color: #b2ccff;
  background: var(--blue-soft);
}

.source-card.disabled {
  background: #f9fafb;
}

.source-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  color: var(--blue);
  background: #fff;
  font-size: 18px;
  font-weight: 800;
}

.source-card strong {
  margin-top: 14px;
  font-size: 14px;
}

.source-card small {
  margin-top: 4px;
  color: #667085;
  font-size: 12px;
}

.dataset-form {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.wizard-model-select {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  background: #fff;
}

.wizard-model-select label {
  display: grid;
  gap: 6px;
  color: #667085;
  font-size: 12px;
  font-weight: 650;
}

.wizard-model-select select {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
}

.wizard-model-note {
  align-self: end;
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 1.5;
}

.dataset-form label,
.setting-grid label {
  display: grid;
  gap: 6px;
  color: #667085;
  font-size: 12px;
  font-weight: 650;
}

.dataset-form input,
.dataset-form textarea,
.setting-grid input {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
}

.upload-zone {
  position: relative;
  display: grid;
  min-height: 260px;
  place-items: center;
  align-content: center;
  gap: 8px;
  border: 1px dashed #b8c7dc;
  border-radius: 12px;
  padding: 24px;
  color: #667085;
  background: #fff;
  text-align: center;
}

.upload-zone input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.upload-zone strong {
  color: #172033;
  font-size: 15px;
}

.upload-zone span {
  font-size: 12px;
}

.upload-visual {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 12px;
  color: var(--blue);
  background: var(--blue-soft);
  font-size: 28px;
}

.selected-files,
.process-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.model-connector-grid {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding-top: 4px;
}

.model-card {
  display: grid;
  gap: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  background: #fff;
  box-shadow: var(--shadow-xs);
}

.model-card-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.model-icon {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 10px;
  color: var(--blue);
  background: var(--blue-soft);
  font-size: 15px;
  font-weight: 800;
}

.model-card h4 {
  margin: 0;
  color: #172033;
  font-size: 15px;
  line-height: 1.4;
}

.model-card p {
  margin-top: 2px;
  color: #667085;
  font-size: 12px;
  line-height: 1.5;
}

.model-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.model-form-grid label {
  display: grid;
  gap: 6px;
  color: #667085;
  font-size: 12px;
  font-weight: 650;
}

.model-form-grid input,
.model-form-grid select {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
}

.model-form-grid input:disabled {
  color: #98a2b3;
  background: #f9fafb;
}

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

.model-status {
  min-height: 18px;
  color: #667085;
  font-size: 12px;
}

.model-status.ok {
  color: #027a48;
}

.model-status.error {
  color: var(--red);
}

.model-hint {
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

.file-pill,
.process-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  min-height: 54px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  background: #fff;
}

.file-pill strong,
.process-item strong {
  overflow-wrap: anywhere;
  color: #172033;
  font-size: 13px;
  line-height: 1.35;
}

.file-pill span,
.process-item span {
  color: #667085;
  font-size: 12px;
}

.option-group {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.cleaning-top-grid {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.cleaning-step .cleaning-top-grid {
  gap: 8px;
  margin-top: 10px;
}

.cleaning-top-grid .option-group {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-top: 0;
}

.cleaning-step .cleaning-top-grid .option-group {
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.option-card {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-width: 0;
  min-height: 66px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  background: #fff;
  cursor: pointer;
}

.cleaning-step .option-card {
  min-height: 52px;
  padding: 9px 10px;
}

.option-card.active {
  border-color: #b2ccff;
  background: var(--blue-soft);
}

.option-card.disabled {
  opacity: 0.66;
  cursor: not-allowed;
}

.option-card input[type="radio"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--blue);
}

.option-card strong,
.option-card span {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.option-card strong {
  font-size: 14px;
}

.option-card span {
  margin-top: 3px;
  color: #667085;
  font-size: 12px;
}

.cleaning-step .option-card span {
  margin-top: 1px;
}

.checkmark {
  display: grid !important;
  margin-left: auto;
  min-width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 999px;
  color: #fff !important;
  background: var(--blue);
  font-size: 12px !important;
  font-weight: 800;
}

.cleaning-step .checkmark {
  min-width: 24px;
  height: 24px;
}

.checkmark.muted {
  min-width: 46px;
  padding: 0 8px;
  color: #344054 !important;
  background: #eef2f6;
}

.setting-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.setting-grid .span-2 {
  grid-column: 1 / -1;
}

.index-config-stack {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.index-config-panel {
  display: grid;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.index-config-panel.disabled {
  background: #f8fafc;
}

.index-config-head {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
}

.index-config-head h4 {
  margin: 2px 0 0;
  color: var(--text);
  font-size: 14px;
  letter-spacing: 0;
}

.index-config-head span {
  display: block;
  margin-top: 4px;
  color: #667085;
  font-size: 12px;
  line-height: 1.45;
}

.index-config-head .checkbox-card {
  min-height: 34px;
  min-width: 130px;
  gap: 7px;
  border-radius: 8px;
  padding: 7px 9px;
  font-size: 12px;
}

.index-config-head .checkbox-card input {
  width: 13px;
  height: 13px;
  min-height: 13px;
}

.index-config-head .checkbox-card span {
  margin: 0;
  line-height: 1.25;
}

.index-config-head .checkbox-card:has(input:disabled) {
  color: #667085 !important;
  background: #f8fafc;
}

.index-param-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 0;
}

.index-param-subgrid {
  grid-column: 1 / -1;
  margin-top: 0;
}

.setting-grid select {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
}

.index-param-note {
  margin: 0;
  border: 1px solid #d9e7ff;
  border-radius: 8px;
  padding: 8px 10px;
  color: #315b9f;
  background: #f4f8ff;
  font-size: 12px;
  line-height: 1.5;
}

.index-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  white-space: normal;
}

.index-preview-panel {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.index-preview-panel strong {
  display: block;
  margin-top: 2px;
  color: var(--text);
  font-size: 15px;
}

.index-preview-panel span {
  display: block;
  margin-top: 4px;
  color: #667085;
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.index-preview-wide {
  grid-column: 1 / -1;
}

.field-label {
  display: block;
  margin-bottom: 6px;
  color: #667085;
  font-size: 12px;
  font-weight: 650;
}

.inline-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.inline-checks label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  color: #344054;
  font-size: 13px;
  font-weight: 650;
}

.separator-field {
  display: grid;
  gap: 10px;
}

.separator-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.separator-presets label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 10px;
  color: #344054;
  background: #fff;
  font-size: 13px;
}

.separator-presets label:has(input:checked) {
  border-color: #84adff;
  color: var(--blue);
  background: var(--blue-soft);
}

.separator-custom {
  display: grid;
  gap: 6px;
}

.separator-custom span {
  color: #667085;
  font-size: 12px;
  font-weight: 650;
}

.separator-custom textarea {
  width: 100%;
  min-height: 84px;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--text);
  background: #fff;
  font: inherit;
  line-height: 1.5;
}

.separator-effective {
  display: grid;
  gap: 6px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 10px;
  background: #f8fafc;
}

.separator-effective > span,
.muted-text {
  color: #667085;
  font-size: 12px;
  font-weight: 650;
}

.separator-heading > label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  margin-bottom: 4px;
  color: #344054;
  font-size: 13px;
  font-weight: 650;
}

.separator-field input[type="checkbox"],
.inline-checks input[type="checkbox"],
.separator-presets input[type="checkbox"],
.cleaning-rules input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin: 0;
  accent-color: var(--blue);
  vertical-align: middle;
}

#separatorEffectivePreview {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.separator-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 9px;
  color: #344054;
  background: #fff;
  font-size: 12px;
}

.cleaning-rules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
  gap: 10px 12px;
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  background: #fff;
}

.cleaning-step .cleaning-rules {
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 8px 10px;
  padding: 10px;
}

.cleaning-top-grid .cleaning-rules {
  margin-top: 0;
}

.cleaning-rules label {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  color: #344054;
  font-size: 13px;
  font-weight: 650;
}

.cleaning-rules label span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.cleaning-rules input {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin: 0;
  accent-color: var(--blue);
}

.sheet-split-panel {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  background: #fff;
}

.cleaning-step .sheet-split-panel {
  gap: 8px;
  margin-top: 10px;
  padding: 10px;
}

.cleaning-config-column .sheet-split-panel {
  flex: 0 0 auto;
  grid-template-rows: auto auto auto;
  min-height: auto;
  overflow: visible;
}

.sheet-split-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.sheet-split-head label,
.sheet-default-llm {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: #344054;
  font-size: 13px;
  font-weight: 650;
}

.cleaning-config-column .text-btn {
  height: auto;
  min-height: 30px;
  white-space: normal;
}

.sheet-split-head input {
  width: 16px;
  min-height: 16px;
  margin: 0;
  accent-color: var(--blue);
}

.sheet-default-llm {
  align-items: stretch;
  display: grid;
  gap: 6px;
}

.sheet-default-llm span,
#sheetSplitSummary {
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 1.5;
}

.sheet-default-llm select {
  min-height: 36px;
}

.sheet-strategy-list {
  display: grid;
  gap: 8px;
  max-height: min(58vh, 680px);
  overflow: auto;
}

.cleaning-config-column .sheet-strategy-list {
  min-height: 0;
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

.sheet-strategy-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  background: #fbfcfe;
}

.sheet-strategy-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.cleaning-config-column .sheet-strategy-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.cleaning-config-column .sheet-strategy-title > span {
  justify-self: start;
}

.sheet-strategy-title strong {
  color: var(--text);
  font-size: 13px;
}

.sheet-strategy-title span,
.sheet-strategy-meta,
.sheet-recommendation {
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 1.5;
}

.sheet-strategy-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.sheet-strategy-controls select {
  min-width: 0;
  min-height: 34px;
  font-size: 12px;
}

.sheet-row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sheet-block-config {
  margin-top: 2px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

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

.sheet-block-config-head span {
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}

.sheet-block-config-head small {
  color: var(--text-tertiary);
  font-size: 12px;
}

.block-editor-list {
  display: grid;
  gap: 8px;
}

.block-editor-row {
  display: grid;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px;
  background: #fff;
}

.block-row-head,
.block-row-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.block-row-head strong {
  color: var(--text);
  font-size: 12px;
}

.block-row-actions {
  justify-content: flex-start;
}

.block-fields-grid {
  display: grid;
  grid-template-columns: minmax(104px, 1.2fr) minmax(72px, 0.6fr) minmax(128px, 1fr) minmax(128px, 1fr);
  gap: 8px;
  align-items: end;
}

.block-fields-grid label,
.block-prompt-field {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--text-secondary);
  font-size: 12px;
}

.block-fields-grid input,
.block-fields-grid select,
.block-prompt-field textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 9px;
  color: var(--text);
  background: #fff;
  font-size: 12px;
  line-height: 1.45;
  font-family: inherit;
}

.block-fields-grid input,
.block-fields-grid select {
  min-height: 34px;
}

.block-prompt-field textarea {
  resize: vertical;
}

.empty-state.compact {
  min-height: auto;
  padding: 12px;
  font-size: 12px;
}

.text-btn.danger {
  color: var(--red);
}

.text-btn.danger-text {
  color: var(--red);
}

.graph-review-panel textarea {
  width: 100%;
  min-height: 92px;
  max-height: min(28vh, 220px);
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  color: var(--text);
  background: #fff;
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.graph-review-panel {
  margin-top: 14px;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  padding: 12px;
  background: #eff6ff;
  overflow-wrap: anywhere;
}

.graph-review-panel p {
  margin: 6px 0 10px;
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 1.5;
}

.sheet-error {
  border-radius: 8px;
  padding: 8px;
  color: var(--red);
  background: var(--red-soft);
  font-size: 12px;
  line-height: 1.5;
}

.preview-column {
  border-left: 1px solid var(--border);
  padding-left: 24px;
}

.cleaning-step .preview-column {
  align-self: stretch;
  max-height: none;
  overflow-y: auto;
  padding-right: 8px;
  scrollbar-gutter: stable;
}

.preview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.preview-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.preview-state {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 10px;
  color: #667085;
  background: #f8fafc;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.preview-state[data-state="editable"] {
  border-color: #84adff;
  color: var(--blue);
  background: var(--blue-soft);
}

.preview-state[data-state="locked"] {
  border-color: #fedf89;
  color: #b54708;
  background: #fffaeb;
}

.preview-actions select {
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 8px;
  color: #344054;
  background: #fff;
  font-size: 12px;
}

.preview-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.chunk-preview {
  min-height: 300px;
  max-height: 52vh;
  margin-top: 12px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  color: #344054;
  background: #fff;
  font-size: 13px;
  line-height: 1.65;
  white-space: pre-wrap;
}

.chunk-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff;
  white-space: normal;
}

.chunk-card + .chunk-card {
  margin-top: 10px;
}

.chunk-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  color: var(--text);
}

.chunk-card-head span {
  color: #667085;
  font-size: 12px;
}

.chunk-card-content,
.chunk-parent pre,
.chunk-enhancement pre {
  margin: 0;
  color: #344054;
  font: inherit;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
}

.chunk-parent {
  margin-top: 10px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}

.chunk-parent summary {
  cursor: pointer;
  color: var(--blue);
  font-size: 12px;
  font-weight: 650;
}

.chunk-parent pre {
  margin-top: 8px;
  max-height: 260px;
  overflow: auto;
  border-radius: 8px;
  padding: 10px;
  background: #f8fafc;
}

.embedding-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  white-space: normal;
}

.embedding-panel {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  background: #fbfcfe;
}

.embedding-panel .eyebrow {
  margin-bottom: 6px;
}

.embedding-panel strong {
  display: block;
  color: var(--text);
  font-size: 15px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.embedding-panel span {
  display: block;
  margin-top: 6px;
  color: #667085;
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.embedding-section-title {
  margin: 14px 0 8px;
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  white-space: normal;
}

.embedding-samples {
  display: grid;
  gap: 10px;
  white-space: normal;
}

.embedding-sample {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
  white-space: normal;
}

.vector-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 0;
}

.vector-stat-grid span {
  min-width: 0;
  border-radius: 8px;
  padding: 6px 8px;
  color: #667085;
  background: #f8fafc;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.vector-stat-grid b {
  color: var(--text);
}

.vector-preview-values {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}

.vector-preview-values span {
  min-height: 24px;
  border: 1px solid #d0d5dd;
  border-radius: 7px;
  padding: 2px 7px;
  color: #344054;
  background: #f8fafc;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
}

.term-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.term-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  min-height: 24px;
  border: 1px solid #abefc6;
  border-radius: 999px;
  padding: 2px 8px;
  color: #067647;
  background: #ecfdf3;
  font-size: 12px;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.term-chip b {
  color: #475467;
  font-weight: 750;
}

.preview-warning {
  margin-top: 10px;
  border: 1px solid #fedf89;
  border-radius: 8px;
  padding: 8px 10px;
  color: #93370d;
  background: #fffaeb;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.45;
  white-space: normal;
}

.chunk-enhancement {
  margin-top: 10px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}

.chunk-enhancement strong {
  display: block;
  margin-bottom: 6px;
  color: #667085;
  font-size: 12px;
}

.chunk-review-panel {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  background: #fff;
}

.chunk-review-panel.hidden {
  display: none;
}

.chunk-review-panel label {
  display: grid;
  gap: 6px;
}

.chunk-review-panel label span {
  color: #667085;
  font-size: 12px;
  font-weight: 650;
}

.chunk-review-panel textarea,
#childLlmPrompt {
  width: 100%;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--text);
  background: #fff;
  font: inherit;
  line-height: 1.55;
}

.inline-actions {
  justify-content: flex-end;
}

.chunk-preview.sheet-overview-preview {
  display: grid;
  gap: 10px;
  white-space: normal;
}

.chunk-preview.block-raw-preview {
  padding: 0;
  white-space: normal;
}

.block-raw-table-wrap {
  min-height: 100%;
  overflow: auto;
}

.block-raw-table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--text);
  background: #fff;
  font-size: 12px;
  line-height: 1.45;
}

.block-raw-table th,
.block-raw-table td {
  min-width: 118px;
  max-width: 260px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 8px 10px;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.block-raw-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: var(--text-tertiary);
  background: #f8fafc;
  text-align: left;
  font-weight: 700;
}

.sheet-overview-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  background: #fbfcfe;
}

.sheet-overview-card header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
}

.sheet-overview-card h4 {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 14px;
  line-height: 1.35;
}

.sheet-overview-card header span {
  border-radius: 999px;
  padding: 3px 8px;
  color: #175cd3;
  background: var(--blue-soft);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.sheet-overview-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px;
}

.sheet-overview-stats div {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  background: #fff;
}

.sheet-overview-stats span,
.sheet-overview-note,
.sheet-overview-meta {
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 1.5;
}

.sheet-overview-stats strong {
  display: block;
  margin-top: 2px;
  color: var(--text);
  font-size: 15px;
}

.sheet-overview-note {
  border-left: 3px solid #84adff;
  padding-left: 9px;
}

.chunk-preview.sheet-grid-preview {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
  min-height: 440px;
  max-height: 58vh;
  padding: 0;
  white-space: normal;
}

.cleaning-step .chunk-preview.sheet-grid-preview {
  max-height: calc(100vh - 300px);
}

.sheet-grid-toolbar,
.sheet-grid-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
}

.sheet-grid-toolbar {
  border-bottom: 1px solid var(--border);
}

.sheet-grid-toolbar-actions {
  display: flex;
  align-items: stretch;
  gap: 10px;
  flex: 0 0 auto;
}

.sheet-grid-toolbar strong {
  display: block;
  color: var(--text);
  font-size: 14px;
}

.sheet-grid-toolbar span,
.sheet-grid-footer span,
.sheet-grid-selection span {
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 1.5;
}

.sheet-grid-selection {
  flex: 0 0 auto;
  min-width: 148px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff;
}

.sheet-grid-selection strong {
  margin-top: 2px;
  color: var(--blue);
  font-size: 13px;
}

.sheet-grid-zoom {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 8px;
  background: #fff;
}

.sheet-grid-zoom input[type="range"] {
  width: 100px;
  accent-color: var(--blue);
}

.sheet-grid-zoom .icon-btn {
  width: 26px;
  height: 26px;
  min-height: 26px;
  padding: 0;
  border-radius: 7px;
  font-size: 14px;
  line-height: 1;
}

.sheet-grid-scroll {
  min-height: 0;
  overflow: auto;
  user-select: none;
}

.sheet-grid-table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  color: var(--text);
  background: #fff;
  font-size: var(--sheet-cell-font-size, 12px);
  line-height: 1.35;
}

.sheet-grid-row-col {
  width: 54px;
  min-width: 54px;
  max-width: 54px;
}

.sheet-grid-data-col {
  width: var(--sheet-cell-width, 128px);
  min-width: var(--sheet-cell-width, 128px);
  max-width: var(--sheet-cell-width, 128px);
}

.sheet-grid-table th,
.sheet-grid-table td {
  height: var(--sheet-cell-height, 32px);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: var(--sheet-grid-padding-y, 5px) var(--sheet-grid-padding-x, 7px);
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}

.sheet-grid-table th:not(.sheet-grid-corner, .sheet-grid-row-head),
.sheet-grid-table td:not([colspan]) {
  width: var(--sheet-cell-width, 128px);
  min-width: var(--sheet-cell-width, 128px);
  max-width: var(--sheet-cell-width, 128px);
}

.sheet-grid-table thead th,
.sheet-grid-row-head,
.sheet-grid-corner {
  position: sticky;
  z-index: 2;
  color: var(--text-tertiary);
  background: #f8fafc;
  text-align: center;
  font-weight: 700;
}

.sheet-grid-table thead th {
  top: 0;
}

.sheet-grid-corner,
.sheet-grid-row-head {
  left: 0;
  width: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;
}

.sheet-grid-corner {
  z-index: 4;
}

.sheet-grid-row-head {
  z-index: 3;
}

.sheet-grid-cell {
  cursor: cell;
  background: #fff;
}

.sheet-grid-cell span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sheet-grid-cell[colspan] span,
.sheet-grid-cell[rowspan] span {
  white-space: normal;
}

.sheet-grid-cell.merged {
  background: #f9fafb;
}

.sheet-grid-cell.merge-origin {
  background: #f4f7fb;
  font-weight: 650;
}

.sheet-grid-cell.selected {
  position: relative;
  outline: 2px solid var(--blue);
  outline-offset: -2px;
  background: #dbeafe;
}

.sheet-grid-cell.selected span {
  color: #0f2f6b;
}

.sheet-grid-footer {
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
  background: #fbfcfe;
}

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

.chunk-preview.editable {
  border-color: #84adff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
  outline: none;
}

.chunk-preview.editable:focus {
  border-color: var(--blue);
}

.llm-status-dock {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 1 360px;
  min-width: 220px;
  max-width: 380px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  background: #f8fafc;
}

.llm-status-dot {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #98a2b3;
}

@keyframes llm-status-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes progress-stripes {
  to {
    background-position: 28px 0;
  }
}

.llm-status-dock[data-status="client_ready"] .llm-status-dot {
  background: #2e90fa;
}

.llm-status-dock[data-status="calling"] .llm-status-dot {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(247, 144, 9, 0.24);
  border-top-color: #f79009;
  background: transparent;
  box-shadow: none;
  animation: llm-status-spin 0.75s linear infinite;
}

.llm-status-dock[data-status="queued"] .llm-status-dot,
.llm-status-dock[data-status="running"] .llm-status-dot,
.llm-status-dock[data-status="preflight"] .llm-status-dot {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(46, 144, 250, 0.24);
  border-top-color: #2e90fa;
  background: transparent;
  box-shadow: none;
  animation: llm-status-spin 0.9s linear infinite;
}

.llm-status-dock[data-status="connected"] .llm-status-dot {
  background: var(--green);
}

.llm-status-dock[data-status="completed"] .llm-status-dot {
  background: var(--green);
}

.llm-status-dock[data-status="waiting_review"] .llm-status-dot {
  background: #7c3aed;
  box-shadow: 0 0 0 5px rgba(124, 58, 237, 0.12);
}

.llm-status-dock[data-status="error"] .llm-status-dot {
  background: var(--red);
}

.llm-status-dock strong {
  display: block;
  color: var(--text);
  font-size: 12px;
}

.llm-status-dock p {
  max-width: 300px;
  margin: 2px 0 0;
  overflow: hidden;
  color: var(--text-tertiary);
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.complete-layout {
  width: min(820px, 100%);
  margin: 0 auto;
}

.process-item {
  align-items: center;
  width: 100%;
  text-align: left;
}

.process-item.active {
  border-color: #b8ccff;
  box-shadow: 0 0 0 3px rgba(21, 94, 239, 0.08);
}

.progress-track {
  grid-column: 1 / -1;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #eef2f6;
}

.progress-track.large {
  height: 9px;
}

.progress-bar {
  width: 20%;
  height: 100%;
  border-radius: inherit;
  background: var(--blue);
  transition: width 0.2s ease;
}

.job-progress-panel {
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  background: #fff;
}

.job-progress-panel[data-llm-status="calling"] .progress-bar {
  background-color: var(--blue);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 75%, transparent 75%, transparent);
  background-size: 28px 28px;
  animation: progress-stripes 0.8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .llm-status-dock[data-status="calling"] .llm-status-dot,
  .job-progress-panel[data-llm-status="calling"] .progress-bar {
    animation: none;
  }
}

.job-progress-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.job-progress-head strong {
  display: block;
  margin-top: 2px;
  color: var(--text);
  font-size: 14px;
}

#cleanProgressPercent {
  color: var(--blue);
  font-size: 16px;
  font-weight: 750;
}

#cleanProgressDetail {
  margin-top: 10px;
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 1.5;
}

.process-item.completed .progress-bar {
  width: 100%;
  background: var(--green);
}

.process-item.failed .progress-bar {
  width: 100%;
  background: var(--red);
}

.process-item.indexing .progress-bar,
.process-item.pending .progress-bar,
.process-item.uploading .progress-bar,
.process-item.queued .progress-bar,
.process-item.running .progress-bar,
.process-item.uploaded .progress-bar,
.process-item.parsing .progress-bar,
.process-item.cleaned .progress-bar,
.process-item.chunked .progress-bar,
.process-item.embedded .progress-bar {
  width: 62%;
  background: var(--amber);
}

.wizard-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  border-top: 1px solid var(--border);
  padding: 14px 18px;
  background: #fff;
}

.wizard-message {
  flex: 1 1 240px;
  min-height: 20px;
  color: #667085;
  font-size: 13px;
}

.wizard-message.error {
  color: var(--red);
}

.wizard-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
}

@media (max-width: 1280px) {
  .knowledge-grid {
    grid-template-columns: 1fr;
  }

  .create-knowledge-card {
    width: min(434px, 100%);
  }

  .dataset-detail {
    grid-template-columns: 1fr;
  }

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

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

  .evaluation-sidebar {
    position: static;
  }

  .evaluation-summary-grid,
  .eval-report-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .model-editor {
    position: static;
  }
}

@media (max-width: 980px) {
  .dify-topbar {
    grid-template-columns: 1fr;
    height: auto;
    gap: 10px;
    padding: 12px 16px;
  }

  .dify-brand,
  .top-actions {
    padding: 0;
  }

  .top-nav {
    justify-content: flex-start;
    overflow-x: auto;
  }

  .top-actions {
    justify-content: flex-start;
  }

  .knowledge-page,
  .models-page,
  .evaluation-page {
    padding: 16px 18px 96px;
  }

  .evaluation-head {
    display: grid;
  }

  .evaluation-summary-grid,
  .eval-report-grid {
    grid-template-columns: 1fr;
  }

  .list-toolbar {
    position: static;
    flex-wrap: wrap;
  }

  .toolbar-spacer {
    display: none;
  }

  .search-box,
  .api-key-floating {
    width: 100%;
  }

	  .dataset-grid,
	  .model-cards,
	  .wizard-step,
	  .wizard-step.cleaning-step,
	  .source-grid,
	  .setting-grid,
	  .wizard-model-select,
	  .model-connector-grid,
	  .model-form-grid,
	  .block-fields-grid {
	    grid-template-columns: 1fr;
	  }

  .knowledge-tip {
    display: none;
  }

  .api-key-floating {
    left: 18px;
  }

  .wizard-panel {
    inset: 0;
    border-radius: 0;
  }

  .wizard-head {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .stepper {
    grid-column: 1 / -1;
    flex-wrap: wrap;
  }

	  .preview-column {
	    position: static;
	    max-height: none;
	    border-left: 0;
	    border-top: 1px solid var(--border);
	    padding-top: 20px;
	    padding-left: 0;
	  }

  .wizard-step.cleaning-step {
    height: auto;
    min-height: 100%;
    overflow: visible;
  }

  .cleaning-config-column {
    height: auto;
    overflow: visible;
  }

  .cleaning-config-column .sheet-split-panel {
    min-height: 420px;
    overflow: visible;
  }

  .cleaning-config-column .sheet-strategy-list {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

	  .cleaning-step .chunk-preview.sheet-grid-preview {
	    max-height: 58vh;
	  }

	  .sheet-grid-toolbar,
	  .sheet-grid-toolbar-actions {
	    flex-wrap: wrap;
	  }

	  .sheet-grid-toolbar-actions {
	    width: 100%;
	  }
	}