.data-hub-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}.data-hub-toolbar p{margin:0}.data-hub-status{display:flex;align-items:center;gap:8px}.data-hub-code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--brand-primary,#2f7bb2)}.data-hub-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}.data-hub-form-grid .span-2{grid-column:1/-1}.data-hub-code-editor textarea{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;line-height:1.55;tab-size:2}.data-hub-step-list,.monitor-widget-editor-list{display:grid;gap:12px}.data-hub-step,.monitor-widget-editor{border:1px solid var(--line,#dbe1e7);border-radius:6px;padding:14px;background:var(--surface,#fff)}.data-hub-step-head,.monitor-widget-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}.data-hub-step-head strong,.monitor-widget-head strong{flex:1}.data-hub-step-actions{display:flex;justify-content:space-between;gap:8px;margin:12px 0}.data-hub-result-meta{display:flex;gap:16px;flex-wrap:wrap;margin:0 0 12px;color:var(--text-muted,#647180)}.monitor-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}.monitor-toolbar .el-select{width:min(360px,100%)}.monitor-dashboard-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:14px}.monitor-dashboard-head h2{margin:0 0 4px}.monitor-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}.monitor-widget{grid-column:span 3;border:1px solid var(--line,#dbe1e7);border-radius:6px;background:var(--surface,#fff);padding:16px;min-width:0}.monitor-widget.width-third{grid-column:span 2}.monitor-widget.width-full{grid-column:1/-1}.monitor-widget-title{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:10px}.monitor-widget-title h3{font-size:15px;margin:0}.monitor-widget-title span{font-size:12px;color:var(--text-muted,#647180)}.monitor-metric{display:flex;align-items:flex-end;min-height:130px;font-size:clamp(32px,5vw,54px);font-weight:700;color:var(--brand-primary,#2f7bb2)}.monitor-chart{height:320px;width:100%}.monitor-table{overflow:auto;max-height:360px}.monitor-widget-error{min-height:150px;display:grid;place-items:center;color:var(--el-color-danger)}.monitor-empty{min-height:300px;display:grid;place-items:center}.monitor-refresh-note{font-size:12px;color:var(--text-muted,#647180)}
@media(max-width:900px){.data-hub-summary{grid-template-columns:1fr}.data-hub-form-grid{grid-template-columns:1fr}.data-hub-form-grid .span-2{grid-column:auto}.monitor-grid{grid-template-columns:1fr}.monitor-widget,.monitor-widget.width-third,.monitor-widget.width-full{grid-column:1}.monitor-dashboard-head{flex-direction:column}.data-hub-toolbar{align-items:flex-start;flex-direction:column}}

/* Data hub overview and asset lists. Keep these styles local to this page. */
.data-hub-workspace {
  --hub-accent: #3574c7;
  --hub-accent-soft: #edf4ff;
  --hub-accent-line: #b8d1f2;
  --hub-teal: #238b85;
  --hub-teal-soft: #eaf7f4;
  --hub-violet: #8060c6;
  --hub-violet-soft: #f2edfb;
  --hub-soft: #f8fafc;
  --hub-text: var(--layout-text, #283e50);
  --hub-muted: var(--layout-muted, #71808e);
  --hub-line: var(--layout-border, #e5ebf0);
  --hub-surface: var(--layout-panel, #fff);
  --el-color-primary: var(--hub-accent);
  --el-color-primary-light-9: var(--hub-accent-soft);
  --el-color-primary-light-7: var(--hub-accent-line);
}
.data-hub-workspace .page-heading { margin-bottom: 26px; align-items: center; }
.data-hub-workspace .page-heading h1 { font-size: 27px; letter-spacing: .4px; }
.data-hub-workspace .page-heading p { font-size: 14px; margin-top: 7px; }
.data-hub-workspace .heading-actions .el-button { height: 36px; padding: 0 18px; }
.data-hub-workspace svg { fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.data-hub-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 24px; }
.data-hub-metric {
  --metric-color: var(--hub-accent);
  --metric-soft: var(--hub-accent-soft);
  position: relative;
  min-width: 0;
  padding: 22px 24px 17px;
  border: 1px solid var(--hub-line);
  border-radius: 12px;
  background: var(--hub-surface);
  color: var(--hub-text);
  text-align: left;
  box-shadow: 0 3px 10px rgb(30 54 80 / 2%);
  transition: border-color .16s, box-shadow .16s;
}
.data-hub-metric.is-teal { --metric-color: var(--hub-teal); --metric-soft: var(--hub-teal-soft); }
.data-hub-metric.is-violet { --metric-color: var(--hub-violet); --metric-soft: var(--hub-violet-soft); }
.data-hub-metric:hover, .data-hub-metric.is-active { border-color: var(--hub-accent-line); box-shadow: 0 3px 14px rgb(38 88 153 / 5%); }
.data-hub-metric:focus-visible { outline: 2px solid var(--hub-accent); outline-offset: 3px; }
.data-hub-metric-label { display: block; padding-right: 50px; color: var(--hub-muted); font-size: 14px; }
.data-hub-metric-icon { position: absolute; right: 23px; top: 22px; display: grid; place-items: center; width: 43px; height: 43px; border-radius: 11px; background: var(--metric-soft); color: var(--metric-color); }
.data-hub-metric-icon svg { width: 23px; height: 23px; }
.data-hub-metric > strong { display: flex; align-items: baseline; gap: 10px; margin: 8px 0 17px; font-size: 34px; font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1.2; }
.data-hub-metric > strong small { font-size: 13px; font-weight: 400; color: var(--hub-muted); }
.data-hub-metric-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 13px; border-top: 1px solid var(--hub-line); color: var(--hub-muted); font-size: 12px; }
.data-hub-metric-foot > span:first-child { display: inline-flex; align-items: center; gap: 7px; }
.data-hub-status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--hub-teal); }
.data-hub-metric-link { display: inline-flex; align-items: center; gap: 6px; color: var(--metric-color); white-space: nowrap; }
.data-hub-metric-link b { font-size: 15px; font-weight: 400; }
.data-hub-panel { position: relative; padding: 0; overflow: hidden; border: 1px solid var(--hub-line); border-radius: 12px; background: var(--hub-surface); box-shadow: 0 3px 14px rgb(30 54 80 / 2%); }
.data-hub-list-search.el-input { position: absolute; z-index: 2; top: 14px; right: 24px; width: 290px; height: 36px; }
.data-hub-list-search .el-input__wrapper { padding: 0 12px; background: var(--hub-soft); box-shadow: 0 0 0 1px var(--hub-line) inset; border-radius: 7px; }
.data-hub-list-search .el-input__inner { font-size: 13px; }
.data-hub-list-search .el-input__prefix-inner { margin-right: 6px; }
.data-hub-list-search svg { width: 17px; height: 17px; color: var(--hub-muted); }
.data-hub-tabs > .el-tabs__header { margin: 0; padding: 0 24px; border-bottom: 1px solid var(--hub-line); }
.data-hub-tabs > .el-tabs__header .el-tabs__nav-wrap { margin-bottom: 0; margin-right: 320px; }
.data-hub-tabs > .el-tabs__header .el-tabs__nav-wrap::after { display: none; }
.data-hub-tabs > .el-tabs__header .el-tabs__item { height: 64px; padding: 0 23px; color: var(--hub-muted); font-size: 14px; font-weight: 500; }
.data-hub-tabs > .el-tabs__header .el-tabs__item.is-active { color: var(--hub-accent); font-weight: 600; }
.data-hub-tabs > .el-tabs__header .el-tabs__active-bar { height: 3px; border-radius: 3px 3px 0 0; }
.data-hub-tab-label { display: inline-flex; align-items: center; gap: 8px; }
.data-hub-tab-label > span { min-width: 22px; padding: 0 6px; border-radius: 5px; background: var(--hub-soft); color: var(--hub-muted); font-size: 11px; font-weight: 500; line-height: 21px; font-variant-numeric: tabular-nums; }
.is-active .data-hub-tab-label > span { background: var(--hub-accent-soft); color: var(--hub-accent); }
.data-hub-tabs > .el-tabs__content { padding: 0 24px; }
.data-hub-tabs .data-hub-toolbar { min-height: 91px; margin: 0; padding: 22px 0; }
.data-hub-toolbar h2 { margin: 0 0 5px; color: var(--hub-text); font-size: 16px; }
.data-hub-toolbar .quiet-note { font-size: 13px; }
.data-hub-toolbar > .el-button { flex: none; height: 36px; padding: 0 16px; border-radius: 7px; font-size: 13px; }
.data-hub-workspace .el-button--primary:not(.is-link):not(.is-text):not(.is-plain) { --el-button-bg-color: var(--hub-accent); --el-button-border-color: var(--hub-accent); --el-button-hover-bg-color: #2862af; --el-button-hover-border-color: #2862af; }
.data-hub-add-icon { margin-right: 5px; font-size: 18px; font-weight: 400; line-height: 1; }
.data-hub-table {
  --el-table-header-bg-color: var(--hub-soft);
  --el-table-header-text-color: var(--hub-muted);
  --el-table-text-color: var(--hub-text);
  --el-table-border-color: var(--hub-line);
  --el-table-row-hover-bg-color: var(--hub-soft);
  --el-table-bg-color: var(--hub-surface);
  --el-table-tr-bg-color: var(--hub-surface);
  --el-fill-color-blank: var(--hub-surface);
  width: 100%;
  border-radius: 8px 8px 0 0;
  font-size: 13px;
}
.data-hub-table th.el-table__cell { height: 45px; padding: 9px 0; font-size: 12px; font-weight: 500; }
.data-hub-table td.el-table__cell { padding: 18px 0; }
.data-hub-table .cell { padding: 0 16px; line-height: 23px; }
.data-hub-table strong { color: var(--hub-text); font-weight: 600; }
.data-hub-table .quiet-note { margin-top: 3px; font-size: 12px; color: var(--hub-muted); }
.data-hub-table .data-hub-code { color: var(--hub-muted); font-size: 12px; }
.data-hub-table div.data-hub-code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.data-hub-item { display: flex; align-items: center; gap: 12px; }
.data-hub-item > div { min-width: 0; }
.data-hub-source-icon { display: grid; place-items: center; flex: none; width: 38px; height: 42px; border: 1px solid var(--hub-accent-line); border-radius: 9px; color: var(--hub-accent); background: var(--hub-accent-soft); }
.data-hub-source-icon.is-yida { border-color: transparent; color: var(--hub-violet); background: var(--hub-violet-soft); }
.data-hub-source-icon svg { width: 21px; height: 21px; }
.data-hub-cell-note { max-width: 260px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.data-hub-table .data-hub-health { height: 24px; padding: 0 8px; border: 0; border-radius: 5px; font-size: 12px; }
.data-hub-health .el-tag__content { display: inline-flex; align-items: center; gap: 6px; }
.data-hub-health .el-tag__content::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.data-hub-table .el-button.is-link { min-height: 30px; padding: 4px 5px; font-size: 13px; }
.data-hub-table .el-button + .el-button { margin-left: 5px; }
.data-hub-list-foot { display: flex; justify-content: space-between; gap: 16px; padding: 17px 2px; color: var(--hub-muted); font-size: 12px; line-height: 1.7; }
.data-hub-table .el-table__empty-block { min-height: 240px; }
.data-hub-table .el-table__empty-text { width: min(100%, 500px); line-height: 1.6; }
.data-hub-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 30px 16px; color: var(--hub-muted); }
.data-hub-empty-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 7px; border-radius: 14px; background: var(--hub-accent-soft); color: var(--hub-accent); font-size: 30px; }
.data-hub-empty-icon svg { width: 25px; height: 25px; }
.data-hub-empty > strong { font-size: 15px; font-weight: 500; }
.data-hub-empty > p { margin: 0; font-size: 13px; }
html.hr-theme-dark .data-hub-workspace { --hub-accent: #8dccf3; --hub-accent-soft: #203c54; --hub-accent-line: #375c7a; --hub-soft: #203344; --hub-teal: #71c8bb; --hub-teal-soft: #203e3e; --hub-violet: #b9a2ef; --hub-violet-soft: #35304d; }
html.hr-theme-dark .data-hub-workspace .el-button--primary:not(.is-link):not(.is-text):not(.is-plain) { --el-button-text-color: #102232; --el-button-hover-text-color: #102232; --el-button-hover-bg-color: #a8daf7; --el-button-hover-border-color: #a8daf7; }
@media (max-width: 1200px) {
  .data-hub-summary { gap: 14px; }
  .data-hub-metric { padding: 19px 18px 15px; }
  .data-hub-metric-icon { right: 18px; top: 19px; width: 38px; height: 38px; }
  .data-hub-metric-foot { flex-wrap: wrap; gap: 7px; }
}
@media (max-width: 1000px) {
  .data-hub-list-search.el-input { position: relative; top: auto; right: auto; width: calc(100% - 40px); margin: 20px 20px 0; }
  .data-hub-tabs > .el-tabs__header { padding: 0 20px; }
  .data-hub-tabs > .el-tabs__header .el-tabs__nav-wrap { margin-right: 0; }
  .data-hub-tabs > .el-tabs__content { padding: 0 20px; }
  .data-hub-tabs .data-hub-toolbar { flex-direction: row; align-items: center; gap: 20px; }
}
@media (max-width: 680px) {
  .data-hub-workspace .page-heading { display: flex; align-items: flex-start; gap: 12px; }
  .data-hub-workspace .page-heading h1 { font-size: 24px; }
  .data-hub-workspace .page-heading p { font-size: 13px; }
  .data-hub-workspace .heading-actions { margin-top: 0; }
  .data-hub-summary { grid-template-columns: 1fr; gap: 10px; margin-bottom: 18px; }
  .data-hub-metric { padding: 15px 18px; }
  .data-hub-metric-label { padding-left: 49px; }
  .data-hub-metric-icon { left: 18px; top: 16px; width: 34px; height: 34px; border-radius: 8px; }
  .data-hub-metric-icon svg { width: 20px; height: 20px; }
  .data-hub-metric > strong { position: absolute; right: 18px; top: 15px; margin: 0; font-size: 28px; }
  .data-hub-metric-foot { padding-top: 0; margin-top: 5px; padding-left: 49px; border-top: 0; }
  .data-hub-metric-link { display: none; }
  .data-hub-tabs > .el-tabs__header .el-tabs__item { height: 58px; padding: 0 15px; }
  .data-hub-tabs .data-hub-toolbar { flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px 0; }
  .data-hub-list-foot { flex-wrap: wrap; gap: 6px; }
  .data-hub-list-foot > span:last-child { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) { .data-hub-metric { transition: none; } }

/* Persistent folder navigation. Asset tabs remain the content containers. */
.data-hub-browser { display: grid; grid-template-columns: 232px minmax(0, 1fr); align-items: stretch; }
.data-hub-folders { min-width: 0; min-height: 460px; padding: 22px 12px 16px; border-right: 1px solid var(--hub-line); background: var(--hub-soft); }
.data-hub-folders-head { display: flex; align-items: center; justify-content: space-between; padding: 0 8px; gap: 8px; }
.data-hub-folders-head h2 { margin: 0; color: var(--hub-text); font-size: 15px; }
.data-hub-folders-head .el-button { width: 28px; height: 28px; padding: 0; font-size: 20px; color: var(--hub-muted); }
.data-hub-folders-intro { margin: 8px 8px 20px; color: var(--hub-muted); font-size: 12px; line-height: 1.8; }
.data-hub-folder-tree.el-tree { background: transparent; color: var(--hub-text); --el-tree-node-hover-bg-color: var(--hub-accent-soft); --el-tree-node-content-height: 39px; font-size: 13px; }
.data-hub-folder-tree .el-tree-node__content { padding-right: 6px; margin: 2px 0; border-radius: 7px; }
.data-hub-folder-tree .el-tree-node.is-current > .el-tree-node__content { background: var(--hub-accent-soft); color: var(--hub-accent); }
.data-hub-folder-tree .el-tree-node__expand-icon { padding: 5px; color: var(--hub-muted); }
.data-hub-folder-tree .el-tree-node__expand-icon.is-leaf { color: transparent; }
.data-hub-folder-node { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; height: 100%; }
.data-hub-folder-node > svg { width: 17px; height: 17px; flex: none; color: #b09a6d; }
.data-hub-folder-node.is-root { font-weight: 600; }
.data-hub-folder-node.is-root > svg { color: var(--hub-accent); }
.data-hub-folder-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.data-hub-folder-node > small { margin-left: auto; font-size: 11px; font-weight: 400; color: var(--hub-muted); font-variant-numeric: tabular-nums; }
.data-hub-folder-menu { flex: none; }
.data-hub-folder-more { display: grid; place-items: center; width: 22px; height: 24px; border: 0; border-radius: 4px; background: transparent; color: var(--hub-muted); font-size: 19px; line-height: 1; }
.data-hub-folder-more:hover, .data-hub-folder-more:focus-visible { background: var(--hub-surface); color: var(--hub-accent); }
.data-hub-folders-foot { display: flex; align-items: flex-start; gap: 8px; margin: 26px 8px 0; padding-top: 16px; border-top: 1px solid var(--hub-line); color: var(--hub-muted); font-size: 11px; line-height: 1.9; }
.data-hub-folders-foot > svg { width: 15px; height: 15px; flex: none; margin-top: 3px; }
.data-hub-folder-error { margin: 0 0 12px; padding: 9px 10px; }
.data-hub-folder-error .el-alert__title { font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.data-hub-browser-content { min-width: 0; }
.data-hub-browser-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 69px; padding: 16px 24px; border-bottom: 1px solid var(--hub-line); }
.data-hub-browser-head .el-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 0; font-size: 13px; line-height: 1.8; min-width: 0; }
.data-hub-browser-head .el-breadcrumb__item { display: flex; align-items: center; }
.data-hub-browser-head .el-breadcrumb__inner { font-weight: 400; color: var(--hub-muted); overflow-wrap: anywhere; }
.data-hub-browser-head .el-breadcrumb__item:last-child .el-breadcrumb__inner { color: var(--hub-text); font-weight: 600; }
.data-hub-browser .data-hub-list-search.el-input { position: static; flex: 0 0 260px; width: 260px; margin: 0; }
.data-hub-browser .data-hub-tabs > .el-tabs__header { display: none; }
.data-hub-browser .data-hub-tabs > .el-tabs__content { overflow: hidden; }
.data-hub-browser .data-hub-table .el-table__empty-block { min-height: 260px; }
.data-hub-browser .data-hub-list-foot { gap: 10px; flex-wrap: wrap; }
.data-hub-move-intro { margin: 0 0 18px; color: var(--layout-muted); font-size: 14px; overflow-wrap: anywhere; }
.data-hub-move-intro strong { color: var(--layout-text); font-weight: 500; }
.data-hub-folder-dialog .el-form-item { margin-bottom: 20px; }
.data-hub-folder-dialog .el-dialog__body { padding-top: 15px; padding-bottom: 22px; }
@media (max-width: 1200px) {
  .data-hub-browser { grid-template-columns: 210px minmax(0, 1fr); }
  .data-hub-browser-head { flex-wrap: wrap; gap: 10px; padding: 16px 20px; }
  .data-hub-browser .data-hub-list-search.el-input { flex: 1 1 220px; width: auto; }
}
@media (max-width: 760px) {
  .data-hub-browser { grid-template-columns: minmax(0, 1fr); }
  .data-hub-folders { min-height: 0; padding: 16px 12px; border-right: 0; border-bottom: 1px solid var(--hub-line); }
  .data-hub-folders-intro { margin-bottom: 10px; }
  .data-hub-folder-tree.el-tree { max-height: 250px; overflow: auto; }
  .data-hub-folders-foot { display: none; }
  .data-hub-browser-head { align-items: stretch; flex-direction: column; }
  .data-hub-browser .data-hub-list-search.el-input { flex: none; width: 100%; }
}

.data-hub-cache-intro { margin: 0 0 16px; line-height: 1.8; color: #53677e; }
.data-hub-viewport-dialog.el-dialog { --el-dialog-margin-top: 36px; display: flex; flex-direction: column; max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px); margin: 36px auto; padding: 0; overflow: hidden; }
.data-hub-viewport-dialog .el-dialog__header { flex: none; margin: 0; padding: 20px 56px 16px 22px; border-bottom: 1px solid #e1e8f1; }
.data-hub-viewport-dialog .el-dialog__headerbtn { top: 8px; right: 8px; }
.data-hub-viewport-dialog .el-dialog__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 18px 22px; }
.data-hub-viewport-dialog .el-dialog__footer { flex: none; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 16px 22px; border-top: 1px solid #e1e8f1; background: #fff; }
.data-hub-viewport-dialog .el-dialog__footer .el-button + .el-button { margin-left: 0; }
.data-hub-cache-dialog .el-select { width: 100%; }
.data-hub-cache-guide { padding: 15px 17px; margin: 0 0 18px; border: 1px solid #dce6f5; border-radius: 7px; background: #f7faff; font-size: 13px; line-height: 1.8; color: #526b87; }
.data-hub-cache-guide p { margin: 7px 0; }
.data-hub-cache-guide .form-hint { margin-left: 10px; }
.data-hub-cache-guide .data-hub-cache-field-error { color: #bc6544; }
.data-hub-cache-status { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; border-top: 1px solid #e1e8f1; padding-top: 18px; margin-top: 4px; }
.data-hub-cache-status > div { display: flex; flex-direction: column; gap: 5px; font-size: 12px; min-width: 0; }
.data-hub-cache-status span { color: #8191a4; }
.data-hub-cache-status strong { font-weight: 500; color: #354b65; overflow-wrap: anywhere; }
.data-hub-cache-status .span-2 { grid-column: 1/-1; }
.data-hub-resolved-sql { margin: 14px 0 20px; padding: 16px 18px; border: 1px solid #dce6f5; border-radius: 7px; background: #f7faff; }
.data-hub-resolved-sql textarea { font: 12px/1.7 Consolas, ui-monospace, monospace; max-height: min(320px, 45vh); overflow-y: auto; overscroll-behavior: contain; }
.data-hub-resolved-sql .form-hint { line-height: 1.8; margin: 8px 0; }
.data-hub-sql-heading { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; }
.data-hub-sql-heading > div { display: flex; gap: 8px; flex-wrap: wrap; }
@media(max-width:600px) { .data-hub-cache-status { grid-template-columns: 1fr; } .data-hub-cache-status .span-2 { grid-column: auto; } .data-hub-resolved-sql { padding: 12px; } .data-hub-viewport-dialog.el-dialog { --el-dialog-margin-top: 12px; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); margin: 12px auto; } .data-hub-viewport-dialog .el-dialog__body { padding: 14px; } .data-hub-viewport-dialog .el-dialog__header { padding-left: 16px; } .data-hub-viewport-dialog .el-dialog__footer { padding: 12px 14px; } }

.data-prep-dialog {
  --prep-blue: #4772db;
  --prep-ink: #344963;
  --prep-muted: #8799b1;
  --prep-line: #e4ebf5;
  --prep-soft: #f7f9fd;
  padding: 0;
  border-radius: 11px;
  overflow: hidden;
  --el-color-primary: var(--prep-blue);
  --el-border-radius-base: 6px;
  --el-dialog-margin-top: 5vh;
}
.data-prep-quickstart { margin: 18px 25px 0; padding: 18px 20px; border: 1px solid #dce6fb; border-radius: 9px; background: #f3f7ff; color: #344963; }
.data-prep-quickstart > div { display: flex; align-items: center; justify-content: space-between; gap: 15px; font-size: 14px; }
.data-prep-quickstart ol { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; padding: 0; margin: 16px 0; list-style: none; }
.data-prep-quickstart li { display: flex; flex-direction: column; gap: 7px; font-size: 13px; line-height: 1.65; }
.data-prep-quickstart li b { color: #365cac; }
.data-prep-quickstart p { margin: 0; font-size: 12px; line-height: 1.75; color: #60748f; }
.data-prep-operation-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-bottom: 16px; }
.data-prep-operation { display: flex; flex-direction: column; gap: 7px; padding: 16px 18px; border: 1px solid #dce5f3; border-radius: 8px; background: #fff; color: #344963; font: inherit; text-align: left; cursor: pointer; }
.data-prep-operation strong { font-size: 14px; font-weight: 600; }
.data-prep-operation small { color: #637a98; font-size: 12px; line-height: 1.6; }
.data-prep-operation:hover { border-color: #88a6eb; background: #f5f8ff; }
.data-prep-operation:focus-visible { outline: 2px solid #4772db; outline-offset: 2px; }
.data-prep-visual-body { padding: 18px 20px; font-size: 14px; background: #fff; color: #344963; }
.data-prep-operation-summary { margin: 0 0 15px; color: #60748f; font-size: 13px; line-height: 1.7; }
.data-prep-control-label { display: block; margin: 12px 0; font-size: 13px; font-weight: 600; color: #344963; }
.data-prep-field-picker { display: flex; flex-wrap: wrap; gap: 4px 18px; max-height: 220px; overflow-y: auto; padding: 12px 14px; margin-bottom: 15px; border: 1px solid #e4ebf5; border-radius: 7px; background: #f8faff; }
.data-prep-field-picker .el-checkbox { margin-right: 0; min-width: 160px; }
.data-prep-rule-list { display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow-y: auto; }
.data-prep-rule { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin: 9px 0; padding: 10px 12px; border: 1px solid #e5ebf4; border-radius: 7px; background: #fafcff; }
.data-prep-rule > strong { flex: 1 1 150px; font-size: 13px; overflow-wrap: anywhere; }
.data-prep-rule > span { font-size: 12px; color: #71829a; }
.data-prep-rule > .el-select { width: 190px; flex: 1 1 160px; }
.data-prep-rule > .el-input { width: 200px; flex: 1 1 150px; }
.data-prep-rule > .el-button { flex: none; }
.data-prep-visual-body .el-form-item .el-select { width: 100%; }
.data-prep-advanced { margin: 15px 20px; font-size: 12px; color: #647a98; }
.data-prep-advanced summary { cursor: pointer; padding: 6px 0; }
.data-prep-advanced pre { max-height: 220px; overflow: auto; margin: 8px 0 0; padding: 14px; border-radius: 6px; background: #f0f4fb; color: #344963; font: 12px/1.7 Consolas,monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.data-prep-legacy-note { margin: 15px 20px 0; color: #6e8099; font-size: 12px; line-height: 1.7; }
.data-prep-next-action { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px; border: 1px solid #cde7da; border-radius: 8px; background: #f0faf5; color: #327854; font-size: 14px; }
@media(max-width:800px) {
  .data-prep-stage-nav { flex-wrap: wrap; }
  .data-prep-stage-tab { flex-basis: 24%; }
  .data-prep-quickstart { margin: 14px; padding: 15px; }
  .data-prep-quickstart ol { grid-template-columns: 1fr; gap: 12px; }
  .data-prep-operation-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .data-prep-rule > .el-select, .data-prep-rule > .el-input { flex-basis: 100%; }
  .data-prep-visual-body { padding: 14px; }
  .data-prep-next-action { flex-wrap: wrap; }
}
.data-prep-dialog .el-dialog__header { margin: 0; padding: 21px 26px 17px; border-bottom: 1px solid var(--prep-line); }
.data-prep-dialog .el-dialog__title { color: var(--prep-ink); font-size: 17px; font-weight: 600; }
.data-prep-dialog .el-dialog__headerbtn { top: 8px; right: 8px; }
.data-prep-dialog .el-dialog__body { padding: 0; max-height: calc(90vh - 135px); overflow-y: auto; }
.data-prep-dialog .el-dialog__footer { background: #fff; padding: 17px 25px; border-top: 1px solid var(--prep-line); }
.data-prep-wizard { color: var(--prep-ink, #344963); font-size: 12px; }
.data-prep-wizard > section { padding: 23px 25px 25px; background: #f8fafe; }
.data-prep-wizard > section.data-prep-preview { padding: 0; background: #fff; margin: 0 25px 23px; }
.data-prep-stage-nav { position: sticky; top: 0; z-index: 2; display: flex; padding: 17px 25px; gap: 13px; border-bottom: 1px solid var(--prep-line, #e4ebf5); background: #fbfcfe; }
.data-prep-stage-tab { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; position: relative; border: 1px solid transparent; background: transparent; color: #9cabc0; font: inherit; font-size: 12px; padding: 8px 11px; border-radius: 6px; cursor: pointer; text-align: left; }
.data-prep-stage-tab > span:first-child { display: grid; place-items: center; width: 25px; height: 25px; flex: none; border-radius: 50%; background: #edf1f8; color: #9aabc2; font-size: 11px; font-weight: 600; }
.data-prep-stage-tab small { display: block; margin-top: 4px; font-size: 9px; font-weight: 400; color: #adbad0; }
.data-prep-stage-tab strong { font-weight: 500; }
.data-prep-stage-tab.is-active { color: #4e76d0; background: #eff4ff; border-color: #e0e9fd; }
.data-prep-stage-tab.is-active > span:first-child { background: #4c75db; color: #fff; }
.data-prep-stage-tab.is-active small { color: #8ca6da; }
.data-prep-stage-tab.is-complete > span:first-child { background: #e8f5ef; color: #5ba18b; }
.data-prep-stage-tab:focus-visible { outline: 2px solid #a9c0f7; outline-offset: 2px; }
.data-prep-stage-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 18px; }
.data-prep-stage-head h3 { margin: 0; font-size: 16px; color: #405777; font-weight: 600; }
.data-prep-stage-head p { margin: 8px 0 0; color: #8fa0b9; font-size: 11px; line-height: 1.8; }
.data-prep-stage-content { padding: 23px 25px 25px; background: #f8fafe; max-height: min(660px, 66vh); overflow-y: auto; }
.data-prep-stage-content > .el-alert { margin-bottom: 16px; }
.data-prep-input-card, .data-prep-step-card { background: #fff; border: 1px solid #e3ebf7; border-radius: 7px; overflow: hidden; margin-bottom: 15px; box-shadow: 0 2px 8px #1d3d7403; }
.data-prep-input-head, .data-prep-step-head { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 11px 17px; border-bottom: 1px solid #eef2f8; background: #fdfefe; }
.data-prep-input-head strong, .data-prep-step-head strong { color: #657f9e; font-size: 12px; font-weight: 500; }
.data-prep-input-head .el-tag, .data-prep-step-head .el-tag { font-size: 9px; }
.data-prep-input-head .el-button { margin-left: auto; font-size: 11px; }
.data-prep-input-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, .7fr); gap: 15px; padding: 18px 18px 0; }
.data-prep-input-grid .el-form-item { margin-bottom: 15px; }
.data-prep-input-params { padding: 0 18px 4px; }
.data-prep-input-params > p { color: #9cabc1; font-size: 10px; margin: 2px 0 13px; }
.data-prep-input-params .data-hub-form-grid { gap: 0 13px; }
.data-prep-wizard .el-form-item__label { color: #879ab7; font-size: 11px; line-height: 1.5; margin: 0; padding-bottom: 7px; }
.data-prep-wizard .el-select, .data-prep-wizard .el-input-number, .data-prep-output-grid .el-select, .data-prep-output-grid .el-input-number { width: 100%; }
.data-prep-wizard .el-date-editor.el-input { width: 100%; }
.data-prep-wizard .el-input__inner, .data-prep-wizard .el-select__selected-item { color: #7088a9; font-size: 11px; }
.data-prep-wizard .el-input__wrapper, .data-prep-wizard .el-select__wrapper { box-shadow: 0 0 0 1px #e1e9f4 inset; }
.data-prep-wizard .el-input__wrapper.is-focus, .data-prep-wizard .el-select__wrapper.is-focused { box-shadow: 0 0 0 1px #7c9cdf inset; }
.data-prep-input-actions { display: flex; align-items: center; gap: 10px; padding: 0 18px 16px; }
.data-prep-input-actions > span { color: #a7b5cc; font-size: 10px; }
.data-prep-field-list { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 13px 18px; background: #fbfcff; border-top: 1px solid #edf2fa; }
.data-prep-field-list > strong { color: #96a7c1; font-size: 10px; font-weight: 500; margin-right: 5px; }
.data-prep-field-chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #e2eafa; background: #f4f7fe; border-radius: 4px; padding: 4px 7px; color: #839bc4; font-size: 10px; }
.data-prep-field-chip > span { font-size: 9px; color: #a9b9d4; }
.data-prep-field-chip > strong { font-size: 10px; font-weight: 500; }
.data-prep-field-chip > small { font-size: 9px; color: #a9b9d4; }
.data-prep-field-chip.is-numeric { background: #f0f8f7; color: #79a69d; border-color: #deefeb; }
.data-prep-field-chip.is-numeric > span { color: #a1c5bc; }
.data-prep-sample-table { padding: 0 18px 15px; overflow: auto; }
.data-prep-wizard .el-table { --el-table-header-bg-color: #f7f9fd; --el-table-header-text-color: #8b9db9; --el-table-row-hover-bg-color: #f4f7fd; --el-table-border-color: #eef2f8; color: #7288a8; }
.data-prep-wizard .el-table th.el-table__cell { font-size: 10px; font-weight: 500; }
.data-prep-wizard .el-table td.el-table__cell { font-size: 11px; }
.data-prep-code-hint { border: 1px solid #e3ebfa; border-radius: 6px; color: #91a5c7; padding: 11px 14px; background: #f3f7ff; font-size: 10px; line-height: 1.9; margin-bottom: 16px; }
.data-prep-code-hint code { color: #5f87d5; background: #eaf1ff; border-radius: 3px; padding: 1px 4px; font-size: 10px; }
.data-prep-code-hint strong { color: #7090c7; font-weight: 500; }
.data-prep-code-hint > span { display: block; margin-top: 4px; }
.data-prep-step-head .el-input { flex: 1; min-width: 110px; }
.data-prep-step-head .el-input__wrapper { box-shadow: none; background: transparent; }
.data-prep-step-head .el-input__inner { color: #6f85a6; font-weight: 500; }
.data-prep-step-head .el-button { font-size: 10px; padding: 3px 6px; margin-left: 0; }
.data-prep-step-head .el-switch { transform: scale(.85); }
.data-prep-step-body { padding: 16px 18px; }
.data-prep-step-card .data-hub-code-editor textarea { color: #5d7297; background: #fcfdff; box-shadow: 0 0 0 1px #e3ebf7 inset; border-radius: 5px; font-size: 11px; line-height: 1.85; padding: 12px 13px; }
.data-prep-step-card > .el-textarea { display: block; width: calc(100% - 36px); margin: 16px 18px; }
.data-prep-wizard .data-hub-step-actions { flex-wrap: wrap; gap: 9px; }
.data-prep-wizard .data-hub-step-actions > div { display: flex; flex-wrap: wrap; gap: 7px; }
.data-prep-wizard .data-hub-step-actions .el-button { margin: 0; font-size: 11px; }
.data-prep-step-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 11px; }
.data-prep-step-meta .form-hint { font-size: 10px; color: #9cacc5; margin: 0; }
.data-prep-step-meta .el-button { flex: none; font-size: 11px; }
.data-prep-add-step { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 13px 0 0; }
.data-prep-add-step .el-button { margin-left: 0; font-size: 10px; }
.data-prep-add-step > span { color: #a7b5cd; font-size: 10px; margin-right: 4px; }
.data-prep-join-config { display: grid; grid-template-columns: 1fr 1fr 1fr 115px auto; gap: 10px; padding: 15px; border: 1px solid #e3ebf7; border-radius: 6px; background: #fff; margin-bottom: 15px; align-items: end; }
.data-prep-join-config .el-form-item { margin: 0; }
.data-prep-join-config .el-button { margin: 0; }
.data-prep-output-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; padding: 18px; border-radius: 7px; border: 1px solid #e4ebf7; background: #fff; }
.data-prep-output-grid .span-2 { grid-column: 1 / -1; }
.data-prep-output-grid .el-form-item { margin-bottom: 16px; }
.data-prep-output-grid .form-hint { font-size: 10px; color: #a5b4cb; line-height: 1.7; }
.data-prep-preview { margin-top: 19px; background: #fff; border: 1px solid #e3ebf7; border-radius: 7px; overflow: hidden; }
.data-prep-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; border-bottom: 1px solid #eef2f8; }
.data-prep-preview-head strong { font-size: 12px; color: #6c83a3; font-weight: 500; }
.data-prep-preview-head h3 { font-size: 12px; color: #6c83a3; font-weight: 500; margin: 0; }
.data-prep-preview-head > div { display: flex; gap: 9px; align-items: center; }
.data-prep-preview-head span { color: #a9b7cf; font-size: 10px; }
.data-prep-preview-head .el-tag { font-size: 9px; }
.data-prep-preview .el-alert { margin: 13px 18px; width: auto; font-size: 11px; }
.data-prep-preview-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 17px; padding: 14px 18px; font-size: 10px; color: #9eafc9; }
.data-prep-preview-meta strong { color: #7190bd; font-weight: 500; padding-left: 4px; }
.data-prep-run-logs { padding: 0 18px 15px; display: grid; gap: 6px; }
.data-prep-run-log { display: flex; align-items: center; gap: 10px; border: 1px solid #eef2f7; border-radius: 4px; background: #fbfcfe; color: #93a6c2; padding: 8px 10px; font-size: 10px; }
.data-prep-run-log strong { color: #8199ba; font-weight: 500; flex: 1; }
.data-prep-run-log small { color: #aebcd1; font-size: 9px; }
.data-prep-run-log.is-success { border-color: #e3f0ec; background: #fbfefd; }
.data-prep-run-log.is-success strong { color: #7eaaa0; }
.data-prep-run-log.is-failed { border-color: #f4e3e3; background: #fffbfb; color: #c59a9a; }
.data-prep-run-log.is-failed strong { color: #b38383; }
.data-prep-run-log p { margin: 3px 0 0; color: #c49c9c; line-height: 1.7; font-size: 10px; }
.data-prep-feedback { margin: 15px 25px 0; }
.data-prep-feedback .el-alert { font-size: 11px; }
.data-prep-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.data-prep-footer > div { display: flex; gap: 9px; align-items: center; }
.data-prep-footer .el-button { margin-left: 0; font-size: 11px; }
.data-prep-footer span { font-size: 10px; color: #a0b0ca; }
.data-prep-footer > span:first-child { margin-right: auto; }
.data-prep-empty-preview { text-align: center; padding: 34px 22px; color: #9eb0ca; font-size: 11px; line-height: 1.9; }
@media(max-width:1050px) {
  .data-prep-join-config { grid-template-columns: 1fr 1fr; }
  .data-prep-join-config .el-button { justify-self: start; }
  .data-prep-step-head { gap: 6px; padding: 10px 12px; }
  .data-prep-step-head .el-button { font-size: 9px; padding: 3px; }
}
@media(max-width:700px) {
  .data-prep-dialog .el-dialog__header { padding: 19px 17px 16px; }
  .data-prep-dialog .el-dialog__footer { padding: 14px 16px; }
  .data-prep-stage-nav { padding: 11px 13px; gap: 4px; }
  .data-prep-stage-tab { gap: 6px; padding: 7px 4px; font-size: 10px; }
  .data-prep-stage-tab > span:first-child { width: 21px; height: 21px; font-size: 9px; }
  .data-prep-stage-tab small { display: none; }
  .data-prep-stage-content { padding: 18px 14px 20px; max-height: 61vh; }
  .data-prep-wizard > section { padding: 18px 14px 20px; }
  .data-prep-wizard > section.data-prep-preview { margin: 0 14px 20px; }
  .data-prep-stage-head h3 { font-size: 14px; }
  .data-prep-stage-head p { font-size: 10px; }
  .data-prep-stage-head > .el-button { font-size: 10px; flex: none; }
  .data-prep-input-grid { grid-template-columns: 1fr; gap: 0; padding: 15px 13px 0; }
  .data-prep-input-head, .data-prep-step-head { padding: 11px 12px; flex-wrap: wrap; }
  .data-prep-input-params { padding: 0 13px 2px; }
  .data-prep-input-actions { padding: 0 13px 13px; }
  .data-prep-field-list { padding: 11px 13px; }
  .data-prep-sample-table { padding: 0 13px 13px; }
  .data-prep-step-head .el-input { flex: 1; }
  .data-prep-step-head .el-switch { margin-left: auto; }
  .data-prep-step-body { padding: 13px; }
  .data-prep-step-card > .el-textarea { width: calc(100% - 26px); margin: 13px; }
  .data-prep-step-meta { align-items: start; }
  .data-prep-output-grid { grid-template-columns: 1fr; gap: 0; padding: 15px; }
  .data-prep-output-grid .span-2 { grid-column: 1; }
  .data-prep-preview-head { padding: 12px 13px; }
  .data-prep-preview-meta { padding: 12px 13px; gap: 12px; }
  .data-prep-run-logs { padding: 0 13px 13px; }
  .data-prep-feedback { margin: 13px 15px 0; }
  .data-prep-footer { gap: 10px; flex-wrap: wrap; }
  .data-prep-footer > div:last-child { margin-left: auto; }
  .data-prep-footer > span.quiet-note { display: none; }
  .data-prep-footer .el-button { white-space: nowrap; }
}

/* Unified data entry and update operations. */
.data-hub-section-nav { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:0 0 20px; padding:7px; border:1px solid var(--hub-line); border-radius:10px; background:var(--hub-surface); }
.data-hub-section-nav button { display:flex; align-items:center; gap:9px; min-height:40px; padding:0 18px; border:0; border-radius:7px; background:transparent; color:var(--hub-muted); font:inherit; cursor:pointer; }
.data-hub-section-nav button:hover,.data-hub-section-nav button.is-active { background:var(--hub-accent-soft); color:var(--hub-accent); }
.data-hub-section-nav button.is-active { font-weight:600; }
.data-hub-section-nav button:focus-visible,.data-hub-task-stats button:focus-visible { outline:2px solid var(--hub-accent); outline-offset:2px; }
.data-hub-section-nav button span { padding:1px 7px; border-radius:5px; background:var(--metric-soft,#edf4ff); font-size:12px; }
.data-hub-summary { grid-template-columns:repeat(4,minmax(0,1fr)); }
.data-hub-metric.is-amber { --metric-color:#a57420; --metric-soft:#fff7e7; }
.data-hub-metric-foot { flex-wrap:wrap; }
.data-hub-browser.data-hub-browser-wide { grid-template-columns:minmax(0,1fr); }
.data-hub-scheduler-state { display:flex; align-items:center; gap:12px 20px; flex-wrap:wrap; padding:0 0 20px; color:var(--hub-muted); font-size:12px; }
.data-hub-task-stats { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin-bottom:20px; }
.data-hub-task-stats button { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:17px 18px; border:1px solid var(--hub-line); border-radius:9px; background:var(--hub-soft); color:var(--hub-muted); font:inherit; font-size:13px; text-align:left; cursor:pointer; }
.data-hub-task-stats button.is-active { border-color:var(--hub-accent-line); color:var(--hub-accent); background:var(--hub-accent-soft); }
.data-hub-task-stats strong { font-size:26px; font-weight:600; color:var(--hub-text); font-variant-numeric:tabular-nums; }
.data-hub-task-filters { display:flex; gap:12px; margin-bottom:18px; }
.data-hub-task-filters > .el-input { flex:1; max-width:400px; }
.data-hub-task-filters > .el-select { width:180px; }
.data-hub-task-reason { margin-top:6px; line-height:1.5; }
.data-hub-report-update-note { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px; margin:0 0 24px; border:1px solid var(--hub-line); border-radius:9px; background:var(--hub-soft); }
.data-hub-report-update-note strong { font-size:14px; }
.data-hub-report-update-note p { margin:6px 0 0; color:var(--hub-muted); font-size:13px; line-height:1.6; }
.data-hub-policy-presets { display:flex; flex:0 0 100%; flex-wrap:wrap; gap:7px; margin:10px 0 6px; }
.data-hub-policy-presets .el-button + .el-button { margin-left:0; }
.data-hub-browser-wide .report-source-overview { padding-top:22px; }
@media(max-width:1200px) { .data-hub-summary { grid-template-columns:repeat(2,minmax(0,1fr)); } .data-hub-task-stats { gap:8px; } .data-hub-task-stats button { padding:13px 10px; flex-direction:column; align-items:flex-start; } }
@media(max-width:760px) { .data-hub-section-nav { gap:3px; } .data-hub-section-nav button { padding:0 10px; font-size:13px; } .data-hub-summary { grid-template-columns:repeat(2,minmax(0,1fr)); } .data-hub-task-stats { grid-template-columns:repeat(3,minmax(0,1fr)); } .data-hub-task-filters { flex-wrap:wrap; } .data-hub-task-filters > .el-input { flex:1 1 100%; max-width:none; } .data-hub-task-filters > .el-select { flex:1; width:auto; min-width:120px; } .data-hub-report-update-note { align-items:flex-start; flex-direction:column; } }

@media(max-width:560px) { .data-hub-summary { grid-template-columns:1fr; } .data-hub-metric { padding:14px 16px; } .data-hub-metric > strong { margin:6px 0 10px; font-size:28px; } .data-hub-metric-icon { top:14px; right:16px; width:34px; height:34px; } }

/* Organization mappings share the data-hub scheduling workspace. */
.data-hub-org-sync { padding:23px 25px; margin:0 0 24px; border:1px solid var(--hub-accent-line); border-radius:11px; background:var(--hub-surface); }
.data-hub-org-sync-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; }
.data-hub-org-sync-kicker { color:var(--hub-accent); font-size:12px; font-weight:600; letter-spacing:.04em; }
.data-hub-org-sync-heading h3 { margin:8px 0; font-size:18px; color:var(--hub-text); font-weight:600; }
.data-hub-org-sync-heading p,.data-hub-org-sync-footnote { color:var(--hub-muted); font-size:12px; line-height:1.8; }
.data-hub-org-sync-heading p { margin:0; }
.data-hub-org-sync-status { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:21px 0; padding:18px 0; border-top:1px solid var(--hub-line); border-bottom:1px solid var(--hub-line); }
.data-hub-org-sync-status > div { display:flex; flex-direction:column; gap:8px; min-width:0; }
.data-hub-org-sync-status span { color:var(--hub-muted); font-size:12px; }
.data-hub-org-sync-status strong { color:var(--hub-text); font-size:13px; font-weight:500; font-variant-numeric:tabular-nums; }
.data-hub-org-sync-actions { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin:17px 0 0; }
.data-hub-org-sync-actions .el-button + .el-button { margin-left:0; }
.data-hub-org-sync-actions + .el-table { margin-top:18px; }
.data-hub-org-sync-summary { display:flex; align-items:center; gap:9px 18px; flex-wrap:wrap; margin:16px 0; color:var(--hub-muted); font-size:12px; line-height:1.8; }
.data-hub-org-sync-summary strong { color:var(--hub-text); margin-left:3px; font-size:14px; font-variant-numeric:tabular-nums; }
.data-hub-org-sync-message { color:var(--hub-muted); margin:13px 0; font-size:13px; line-height:1.7; overflow-wrap:anywhere; }
.data-hub-org-sync-footnote { margin:14px 0 0; }
.data-hub-org-sync-warnings { padding-left:22px; color:var(--hub-muted); font-size:13px; line-height:1.8; overflow-wrap:anywhere; }
.data-hub-org-sync-dialog .el-form { margin-top:18px; }
@media(max-width:760px) { .data-hub-org-sync { padding:19px 16px; } .data-hub-org-sync-heading { flex-wrap:wrap; } .data-hub-org-sync-heading h3 { font-size:16px; } .data-hub-org-sync-status { grid-template-columns:1fr; gap:17px; } .data-hub-org-sync-status > div { flex-direction:row; justify-content:space-between; gap:12px; } .data-hub-org-sync-actions { gap:8px; } }