/* Readable, bounded data workspaces. */
:root{--bg:#111827;--sidebar:#141e30;--panel:#192438;--panel-raised:#22314a;--text:#eef4ff;--muted:#b3c2d8;--faint:#a4b5ce;--border:#35445f;--accent:#a6c6ff;--accent-bg:#253d62;--button-text:#0d203e;--green:#8bdfba;--red:#ffb0b4;--input:#142035;--code:#111d30;--blue:#a6c6ff;--blue-bg:#21395d;--teal:#8cddd9;--teal-bg:#173b42;--violet:#c9b8ff;--violet-bg:#34294e;--amber:#f5cf88;--amber-bg:#443621;--green-bg:#1b3d33;--red-bg:#482a36;--stripe:#1b2940;--hover:#273b58;--shadow:0 3px 12px #02061725;--radius:12px}
:root[data-theme=light]{--bg:#f3f6fc;--sidebar:#fff;--panel:#fff;--panel-raised:#f0f4fa;--text:#1b2b43;--muted:#52627b;--faint:#5e6f86;--border:#d3ddeb;--accent:#2457cc;--accent-bg:#eaf1ff;--button-text:#fff;--green:#166448;--red:#a82e43;--input:#fff;--code:#f8faff;--blue:#2457cc;--blue-bg:#eaf1ff;--teal:#12666a;--teal-bg:#e9f7f5;--violet:#6e42b7;--violet-bg:#f2ecff;--amber:#835113;--amber-bg:#fff4dc;--green-bg:#eaf7ef;--red-bg:#fff0f2;--stripe:#f7faff;--hover:#edf3ff;--shadow:0 3px 14px #1b2b4309}
[hidden]{display:none!important}
main{max-width:1800px}body{font-size:14px}
.page-heading p,.muted,.notice{line-height:1.6}.page-heading p{font-size:14px}
h2,.editor-heading h2{font-size:16px}
label,input:not([type=checkbox]),select,textarea,.button{font-size:14px}
.button{min-height:38px}.button.small{min-height:32px;font-size:13px}
.quick-actions,.workflow-source,.converter-source{padding:22px;margin-bottom:20px}
.quick-actions{display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap}.quick-actions p{margin:6px 0 0}
.converter-source{display:grid;grid-template-columns:minmax(220px,1fr) minmax(300px,2fr);gap:22px}
.converter-source label{margin-bottom:12px}.converter-source select,.converter-source input{margin-top:8px}
.converter-grid.collection-mode{grid-template-columns:1fr}.converter-grid.collection-mode .data-textarea{min-height:360px}
.conversion-options summary{font-weight:550}.conversion-report{font-size:13px;line-height:1.6}
.browse-controls{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin:0 0 20px}
.browse-controls label{margin:0;flex:1;min-width:180px}.browse-controls label:has(#page-size){flex:0 0 145px;min-width:145px}
.browse-controls input,.browse-controls select{margin-top:7px}
.column-controls{padding:12px 14px;background:var(--input);border:1px solid var(--border);border-radius:7px;margin:0 0 16px}
.column-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:9px;margin:12px 0;max-height:240px;overflow:auto}
.column-options label{display:flex;gap:8px;align-items:center;margin:0;overflow-wrap:anywhere}.column-options input{accent-color:var(--accent)}
.record-scroll{max-height:65vh;border:1px solid var(--border);border-radius:7px}
.preview-table{min-width:100%;border-collapse:separate;border-spacing:0}
.preview-table th{position:sticky;top:0;background:var(--panel-raised);z-index:1;font-size:13px;color:var(--text);padding:13px 16px}
.preview-table td{padding:12px 16px;font-size:14px;line-height:1.6;vertical-align:top;border-bottom:1px solid var(--border)}
.preview-table tbody tr:nth-child(even){background:var(--input)}.preview-table tbody tr:hover{background:var(--panel-raised)}
.preview-cell{min-width:140px;max-width:360px;font-variant-numeric:tabular-nums}
.preview-help{font-size:13px;color:var(--muted);margin:14px 0}.preview-help p{line-height:1.7;margin:10px 0}
.section-caption,.pagination{font-size:13px}.page-jump{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.page-jump label{margin:0}.page-jump input{width:76px;min-width:60px;padding:7px}
.workflow-links{display:flex;flex-wrap:wrap;gap:10px;font-size:13px;margin:0 0 20px;align-items:center;color:var(--muted)}.workflow-links a{color:var(--accent)}
.workflow-grid{list-style:none;padding:0;margin:0 0 22px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.workflow-step{padding:22px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}.workflow-step p{font-size:14px;line-height:1.7;margin:0;flex:1;color:var(--muted)}
.step-number{display:grid;place-items:center;width:32px;height:32px;background:var(--panel-raised);border:1px solid var(--border);border-radius:50%;font-weight:600;color:var(--accent)}
.workflow-source p{line-height:1.7;margin:12px 0}.metadata-grid strong{font-size:18px;font-variant-numeric:tabular-nums}
@media(max-width:1100px){.workflow-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:800px){.converter-source,.workflow-grid{grid-template-columns:1fr}.browse-controls label{flex:1 1 100%}.pagination{align-items:flex-start;flex-direction:column}.editor-footer{flex-wrap:wrap}.tabs{gap:16px;overflow-x:auto}.tabs a{white-space:nowrap}.quick-actions,.workflow-source,.converter-source,.workflow-step{padding:18px}.heading-actions{flex-wrap:wrap}.metadata-grid strong{font-size:16px}}

/* Color communicates format and state; text labels remain available. */
body{font-size:15px;line-height:1.6}
small,.small-text,.sidebar nav a,.breadcrumbs,.footer{font-size:13px}
label,input:not([type=checkbox]),select,textarea{font-size:14px;line-height:1.5}
.sidebar nav{gap:6px}.sidebar nav a{padding:11px 12px;font-weight:550}
.sidebar nav a[aria-current=page]{box-shadow:inset 3px 0 var(--accent)}
.sidebar nav a:nth-child(1) svg{color:var(--blue)}.sidebar nav a:nth-child(2) svg{color:var(--teal)}.sidebar nav a:nth-child(3) svg{color:var(--violet)}.sidebar nav a:nth-child(4) svg{color:var(--amber)}.sidebar nav a:nth-child(5) svg{color:var(--blue)}
.workspace{padding:12px 10px;margin:25px 0;background:var(--panel-raised);border:1px solid var(--border);border-radius:10px}
.workspace-icon{background:var(--blue-bg);color:var(--blue)}.nav-label{color:var(--muted);letter-spacing:.8px}
.topbar{background:var(--sidebar)}.breadcrumbs strong{font-weight:600}
h1{font-size:32px;letter-spacing:-.7px}h2,.editor-heading h2{font-size:17px;letter-spacing:-.2px}
.page-heading p{font-size:15px;max-width:75ch}.page-heading{margin-bottom:26px}
.button{font-size:14px;padding:9px 15px;min-height:40px;border-radius:8px;font-weight:600}
.button:hover{filter:none;background:var(--hover);border-color:var(--accent)}
.button.primary:hover{background:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.button.ghost{color:var(--blue)}.button.danger{background:var(--red-bg);color:var(--red);border-color:var(--red)}
.button:disabled{opacity:1;background:var(--panel-raised);color:var(--faint);border-color:var(--border)}
.icon-button{width:36px;height:36px;background:var(--panel-raised);border-color:var(--border)}
.quick-actions{background:linear-gradient(110deg,var(--panel),var(--blue-bg));border-top:3px solid var(--blue)}
.converter-source{border-top:3px solid var(--blue)}
.converter-source:has(#collection-input[hidden]){grid-template-columns:1fr}.converter-source:has(#collection-input[hidden])>label{max-width:520px}
.converter-toolbar{padding:14px 16px;background:var(--panel);border:1px solid var(--border);border-radius:10px}
.converter-toolbar label{font-weight:600}.converter-toolbar .convert-arrow{color:var(--blue);font-weight:600}
.conversion-options{background:var(--panel);padding:12px 16px;border-radius:10px}
.conversion-option-fields .checkbox-setting small,.column-rules small{font-size:13px;line-height:1.6}
.editor-heading{background:var(--blue-bg);padding:16px 20px}.editor-heading h2{color:var(--blue)}
.editor-footer{padding:12px 16px;background:var(--panel)}.data-textarea{font-size:14px!important;line-height:1.8!important;min-height:400px}
.conversion-report{background:var(--teal-bg);color:var(--teal);font-size:13px}.conversion-report p{color:var(--teal)}
.conversion-report:has(li){background:var(--amber-bg);color:var(--amber)}.conversion-report:has(li) p{color:var(--amber)}
.tree-preview{background:var(--panel-raised)}.tree-node strong{color:var(--blue)}
.format-tag{font-size:12px;font-weight:600;padding:4px 9px;border-radius:6px;letter-spacing:.4px}
.format-tag[data-format=json]{background:var(--blue-bg);color:var(--blue);border-color:var(--blue-bg)}
.format-tag[data-format=csv]{background:var(--green-bg);color:var(--green);border-color:var(--green-bg)}
.format-tag[data-format=yaml]{background:var(--violet-bg);color:var(--violet);border-color:var(--violet-bg)}
.format-tag[data-format=xml]{background:var(--amber-bg);color:var(--amber);border-color:var(--amber-bg)}
.format-tag[data-format=ndjson]{background:var(--teal-bg);color:var(--teal);border-color:var(--teal-bg)}
.format-tag[data-format=toml]{background:var(--red-bg);color:var(--red);border-color:var(--red-bg)}
.state-label{display:inline-block;border-radius:6px;padding:2px 8px;font-size:12px;font-weight:600;background:var(--blue-bg);color:var(--blue)}
.state-label[data-state=ready]{color:var(--green);background:var(--green-bg)}
.state-label[data-state=failed],.state-label[data-state=rejected]{color:var(--red);background:var(--red-bg)}
.state-label[data-state=cancelled],.state-label[data-state=interrupted]{color:var(--amber);background:var(--amber-bg)}
.notice{color:var(--blue);background:var(--blue-bg);border:1px solid var(--border);border-left:4px solid var(--blue);padding:14px 18px}
.notice.error{color:var(--red);background:var(--red-bg);border-left-color:var(--red)}.notice.success{color:var(--green);background:var(--green-bg);border-left-color:var(--green)}
.metadata-grid{grid-template-columns:repeat(4,minmax(0,1fr));padding:0;gap:0}
.metadata-grid>div{padding:20px;border-right:1px solid var(--border);border-top:3px solid var(--blue);background:var(--blue-bg)}
.metadata-grid>div:nth-child(2){border-top-color:var(--teal);background:var(--teal-bg)}.metadata-grid>div:nth-child(3){border-top-color:var(--violet);background:var(--violet-bg)}.metadata-grid>div:nth-child(4){border-top-color:var(--amber);background:var(--amber-bg);border-right:0}
.metadata-grid small{font-size:12px;color:var(--muted);letter-spacing:.5px}.metadata-grid strong{font-size:24px;font-weight:650}.metadata-grid strong.small-text{font-size:13px;overflow-wrap:anywhere}
table{font-size:14px}th{font-size:13px;color:var(--text);padding:14px 20px;background:var(--blue-bg)}td{padding:16px 20px}
tbody tr:nth-child(even),.preview-table tbody tr:nth-child(even){background:var(--stripe)}tbody tr:hover,.preview-table tbody tr:hover{background:var(--hover)}
.preview-table th{background:var(--blue-bg);color:var(--blue)}.preview-table td{line-height:1.7}
.file-name{font-weight:600}.file-name svg{color:var(--teal)}.status-button{font-size:13px;color:var(--green);font-weight:600}
.status-button:has(.off){color:var(--muted)}
.panel-toolbar{padding:18px 20px}.pagination{background:var(--panel-raised)}
main>.panel+.panel{margin-top:20px}
.tabs a{font-size:14px;padding:16px 0;font-weight:550}.tabs a.selected{color:var(--blue)}
.workflow-step{border-top:4px solid var(--blue)}.workflow-step:nth-child(2){border-top-color:var(--teal)}.workflow-step:nth-child(3){border-top-color:var(--violet)}.workflow-step:nth-child(4){border-top-color:var(--amber)}
.step-number{background:var(--blue-bg);color:var(--blue);border:0}.workflow-step:nth-child(2) .step-number{background:var(--teal-bg);color:var(--teal)}.workflow-step:nth-child(3) .step-number{background:var(--violet-bg);color:var(--violet)}.workflow-step:nth-child(4) .step-number{background:var(--amber-bg);color:var(--amber)}
.workflow-step p,.workflow-source p{font-size:15px}.workflow-links{padding:12px 16px;background:var(--blue-bg);border:1px solid var(--border);border-radius:9px}
.endpoint-bar{background:var(--teal-bg)}.method{background:var(--green-bg);border-radius:5px;padding:4px 8px}
.job-row strong{font-size:14px}.job-row:nth-child(even){background:var(--stripe)}.job-row small{line-height:1.7}
.settings-list>div{padding:13px 0;font-size:14px}.settings-list dd{font-weight:550}
.format-help{padding:14px 18px;margin:18px 0;font-size:13px;color:var(--muted)}.format-help p{margin-top:10px;line-height:1.7}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
@media(max-width:1100px){.metadata-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:800px){h1{font-size:28px}.metadata-grid>div{padding:16px}.metadata-grid strong{font-size:20px}.converter-toolbar{padding:12px}.data-textarea{min-height:300px}.workspace{margin-top:22px}.preview-table td{font-size:14px}.page-heading p{font-size:14px}.footer{flex-wrap:wrap}}