:root{color-scheme:light;--bg:#fafafa;--panel:#ffffff;--line:#e5e5e5;--muted:#6b6b6b;--accent:#262626;--text:#202020}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.55 'Segoe UI',sans-serif}[hidden]{display:none!important}button,input,textarea,select{font:inherit}button,a,input,textarea,select,summary{outline-offset:4px}button{cursor:pointer}button:disabled{opacity:.45;cursor:default}a{color:var(--accent)}.app-header{height:72px;border-bottom:1px solid var(--line);padding:0 4%;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:12px;font-size:20px;font-weight:650;color:var(--text);text-decoration:none}.brand small{font-size:12px;display:block;font-weight:400;color:var(--muted)}.brand-mark{display:grid;place-items:center;background:var(--accent);color:#ffffff;width:30px;height:32px;border-radius:8px;font-size:25px}.header-actions,.toolbar-actions,.choice-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.button{padding:7px 12px;border-radius:7px;border:1px solid var(--line);font-weight:500;white-space:nowrap}.button.primary{background:var(--accent);color:#ffffff;border-color:var(--accent)}.button.secondary{background:#ffffff;color:var(--text)}.button:hover{filter:brightness(.94)}h1,h2,h3,p{margin-top:0}h1{font-size:30px;letter-spacing:-.7px;margin-bottom:10px;font-weight:650}h2{font-size:20px;margin-bottom:8px}h3{font-size:14px;margin-bottom:6px}.setup{max-width:850px;margin:48px auto;padding:0 24px}.eyebrow{color:var(--accent);font-size:11px;letter-spacing:2px;font-weight:700;margin-bottom:10px}.intro{color:var(--muted);font-size:16px}.steps{padding:0;display:flex;list-style:none;margin:32px 0 24px;gap:38px;color:var(--muted)}.steps li{display:flex;gap:10px;align-items:center}.steps li.active{color:var(--accent)}.setup-card,.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px}.setup-card{padding:28px}.muted,.help{color:var(--muted)}.help{font-size:12px;margin:10px 0}.file-dropzone{padding:28px;border:1px dashed #d0d0d0;border-radius:8px;margin:20px 0;text-align:center;cursor:pointer}.file-dropzone span{display:block;color:var(--muted);font-size:12px;margin-top:7px}.file-dropzone.dragover{border-color:var(--accent);background:#f0f0f0}label{display:block;font-size:13px;font-weight:600;margin:14px 0 7px}input,select,textarea{color:var(--text);background:#fafafa;border:1px solid #d6d6d6;border-radius:6px;padding:10px;max-width:100%}textarea{display:block;width:100%;font-family:Consolas,monospace;resize:vertical;tab-size:2}select{width:100%}.card-footer{display:flex;justify-content:space-between;align-items:center;gap:14px;border-top:1px solid var(--line);margin-top:24px;padding-top:20px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}.mode-options{display:flex;gap:26px;margin:12px 0 18px;flex-wrap:wrap}.mode-options label{font-weight:400}.mode-options input{accent-color:var(--accent)}#notice{margin:16px 4%;padding:12px 16px;border:1px solid #e2d3b7;background:#fffbf3;border-radius:7px;white-space:pre-wrap}#notice.success{border-color:#c7ddd0;background:#f3faf5}.workbench{padding:22px 3%}.workbench-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px;flex-wrap:wrap}.name-input{font-size:20px;font-weight:600;width:310px;display:block;margin-bottom:5px}.workspace-grid{display:grid;grid-template-columns:minmax(260px,32%) minmax(0,1fr);gap:18px;align-items:start}.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid var(--line);padding:14px 18px}.panel-heading h2,.panel-heading h3{margin:0;font-size:15px}.panel-heading .muted{font-size:12px}.badge{color:var(--accent);background:#f0f0f0;border-radius:5px;font-size:11px;padding:3px 8px}details{padding:14px 18px}summary{cursor:pointer;color:var(--muted)}pre{font:13px/1.6 Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere}#inputPreview{max-height:240px;overflow:auto;background:#fafafa;padding:12px;border-radius:6px}.palette-heading{padding:8px 18px 0}#searchKeys{margin:0 18px;width:calc(100% - 36px)}.field-palette{max-height:440px;overflow:auto;padding:14px}.field{display:block;text-align:left;width:100%;border:1px solid var(--line);border-radius:7px;background:#f3f3f3;color:var(--text);margin-bottom:7px;padding:10px 12px;cursor:grab}.field:hover{border-color:var(--accent)}.field small{display:block;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.field code{color:var(--accent)}#monacoEditorContainer{height:430px;padding-top:8px}#fallbackEditor{height:430px;border:0;border-radius:0}.result-heading{padding:16px 18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}.result-heading h3{margin:0}.result-heading .button{padding:5px 10px;margin-left:8px}.result-heading .muted{font-size:12px}.preview-output{margin:0;padding:0 18px 18px;min-height:70px;max-height:420px;overflow:auto;color:var(--accent)}#htmlPreview{width:100%;height:300px;border:0;background:white}.debug-panel{background:#f5f5f5;padding-bottom:12px}.debug-panel>p,.debug-panel>pre{margin:10px 18px;max-height:180px;overflow:auto}.debug-line{background:#fff3cd}.mapping-target{background:#e4eee9}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}dialog{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:10px;width:min(600px,90vw);padding:0}dialog::backdrop{background:#0005}#savedList{padding:20px;max-height:60vh;overflow:auto}#savedList a{display:block;padding:12px;border-bottom:1px solid var(--line)}
@media(max-width:850px){.workspace-grid{grid-template-columns:1fr}.app-header{height:auto;min-height:72px;padding:16px;flex-wrap:wrap}.setup{margin:28px auto}.setup-card{padding:20px}.form-row{grid-template-columns:1fr}.steps{gap:20px;font-size:12px}h1{font-size:32px}.field-palette{max-height:240px}.card-footer>.muted{display:none}}
.field{touch-action:none;user-select:none}.drag-field{position:fixed;z-index:10000;pointer-events:none;padding:8px 14px;border-radius:6px;background:var(--accent);color:#ffffff;font-family:Consolas,monospace;box-shadow:0 4px 18px #0002}

/* Structured input palette and editor workspace. */
.workspace-grid { grid-template-columns: minmax(320px, 40%) minmax(0, 1fr); align-items: stretch; }
.input-panel, .editor-panel { min-width: 0; }
.input-tabs { display: flex; gap: 8px; padding: 8px 14px 0; border-bottom: 1px solid var(--line); }
.input-tabs button { border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); padding: 12px 8px; font-size: 12px; font-weight: 600; }
.input-tabs button[aria-selected="true"] { color: #3f3f3f; border-bottom-color: #3f3f3f; }
.schema-tools { display: flex; align-items: center; gap: 8px; padding: 16px 16px 8px; }
.schema-tools #searchKeys { margin: 0; width: 100%; min-width: 0; }
.schema-tools .badge { white-space: nowrap; color: #3f3f3f; border: 1px solid var(--line); background: #f7f7f7; padding: 8px; }
.field-palette { margin: 0 16px 16px; padding: 10px 4px; height: 550px; max-height: none; border: 1px solid #dddddd; border-radius: 5px; background: #fafafa; overflow: auto; }
.schema-tree { list-style: none; margin: 0; padding: 0; }
.schema-tree .schema-tree { margin-left: 19px; border-left: 1px solid #e5e5e5; padding-left: 3px; }
.field-row { display: flex; align-items: center; min-height: 38px; border-radius: 4px; padding-right: 4px; }
.field-row:hover { background: #f3f3f3; }
.field-row .field { display: flex; align-items: center; gap: 7px; flex: 1; width: auto; min-width: 0; padding: 7px 2px; margin: 0; border: 0; background: transparent; font-size: 12px; }
.field-icon { color: #555555; font-family: Consolas, monospace; min-width: 14px; font-weight: bold; }
.field-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.field-sample { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.field-toggle, .field-add { background: transparent; border: 0; color: #555555; padding: 6px; font-size: 16px; }
.field-toggle { width: 24px; flex-shrink: 0; }
.field-toggle:disabled { visibility: hidden; }
.field-type { font-size: 10px; padding: 1px 6px; border-radius: 5px; background: #757575; color: white; margin-left: 6px; }
.type-integer, .type-float { background: #757575; }.type-string { background: #757575; }.type-boolean { background: #757575; }.type-array { background: #757575; }
#inputPreview { margin: 16px; max-height: 585px; min-height: 400px; }
.excel-preview { margin: 16px; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.excel-grid { height: 535px; overflow: auto; background: #fff; }
.excel-table { border-collapse: separate; border-spacing: 0; min-width: 100%; font-size: 12px; white-space: nowrap; }
.excel-table th, .excel-table td { border-right: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; padding: 6px 12px; height: 31px; text-align: left; max-width: 420px; overflow: hidden; text-overflow: ellipsis; }
.excel-table thead th { position: sticky; top: 0; z-index: 2; background: #f3f3f3; }
.excel-table thead tr:nth-child(2) th { top: 31px; background: #fafafa; }
.excel-table .excel-column-letter { text-align: center; font-weight: 400; color: var(--muted); }
.excel-table .excel-row-number, .excel-table .excel-corner { position: sticky; left: 0; min-width: 38px; text-align: center; background: #f3f3f3; color: var(--muted); font-weight: 400; z-index: 1; }
.excel-table thead .excel-corner, .excel-table thead .excel-row-number { z-index: 3; }
.excel-table .excel-number { text-align: right; font-variant-numeric: tabular-nums; }
.excel-table .excel-column-name:has(.excel-header-field) { padding: 0; }
.excel-header-field { display: block; width: 100%; min-height: 30px; padding: 6px 12px; border: 0; background: transparent; color: inherit; text-align: left; font: inherit; font-weight: 600; cursor: grab; touch-action: none; user-select: none; }
.excel-header-field:hover, .excel-header-field:focus-visible { background: #eaeaea; }
.excel-header-field:active { cursor: grabbing; }
.excel-table tbody tr:hover td { background: #f8f8f8; }
.excel-summary { border-top: 1px solid var(--line); margin: 0; padding: 8px 10px; font-size: 11px; color: var(--muted); background: #fafafa; }
.pdf-source { padding: 10px; }
.pdf-select-btn { padding: 5px 11px; font-size: 12px; border-radius: 6px; }
#pdfSelectRegion[aria-pressed='true'] { background: #555; border-color: #555; }
.pdf-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; font-size: 12px; }
#pdfZoom { width: auto; padding: 3px; font-size: 11px; }
.pdf-ocr-choice, .pdf-check { font-weight: 400; font-size: 11px; margin: 4px 0; }
.pdf-ocr-choice { margin-left: auto; }.pdf-status, .pdf-help { color: var(--muted); font-size: 11px; margin: 8px 0; }
.pdf-scroll { height: clamp(320px, calc(100dvh - 350px), 780px); overflow: auto; background: #eee; border: 1px solid var(--line); }
#sourcePane.has-document > .panel-heading { display: none; }
.pdf-toolbar { margin-bottom: 8px; }
#pdfOcrEngine { width: auto; max-width: 130px; padding: 4px 6px; font-size: 11px; }
.pdf-options { position: relative; padding: 4px; margin-left: auto; }
.pdf-options-content { position: absolute; top: 100%; right: 0; width: min(320px, 75vw); padding: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 7px; box-shadow: 0 6px 20px #0002; z-index: 10; line-height: 1.5; }
#pdfPageStatus { margin: 6px 0 0; }
.preview-loader { display: flex; flex: 1; min-height: 160px; align-items: center; justify-content: center; flex-direction: column; gap: 12px; color: var(--muted); }
#previewDialog[aria-busy='true'] .preview-feedback { display: none; }
.pdf-page { position: relative; width: 100%; background: white; line-height: 0; }
#pdfCanvas { width: 100%; height: auto; display: block; }
.pdf-overlay { position: absolute; inset: 0; pointer-events: none; }
.pdf-table-outline { position: absolute; outline: 1px solid transparent; pointer-events: auto; }
.pdf-table-outline:hover, .pdf-table-outline:focus-within, .selecting-table .pdf-table-outline { outline-color: #3b6da8; }
.pdf-table-handle { position: absolute; left: -21px; top: -1px; width: 21px; height: 21px; z-index: 5; opacity: 0; pointer-events: none; cursor: grab; touch-action: none; background: #234c7d; color: white; border: 1px solid white; border-radius: 3px; padding: 0; font-size: 18px; line-height: 18px; }
.pdf-table-outline:hover .pdf-table-handle, .pdf-table-outline:focus-within .pdf-table-handle, .selecting-table .pdf-table-handle { opacity: 1; pointer-events: auto; }
@media (hover: none) { .pdf-table-handle { opacity: 1; pointer-events: auto; } }
.pdf-table-handle:focus-visible { outline: 3px solid #e8ad34; }
.pdf-table-drag-area { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: auto; cursor: grab; touch-action: none; border: 2px solid #234c7d; background: #3b82f61a; }
.pdf-table-drag-area:hover { background: #3b82f636; }
.pdf-page.selecting .pdf-table-handle { pointer-events: none; }
.pdf-page.selecting-table .pdf-mapped-field { pointer-events: none; }
.pdf-mapped-field { position: absolute; pointer-events: auto; border: 1px solid #548a70; background: #6bba9020; cursor: grab; touch-action: none; padding: 0; }
.pdf-mapped-field:hover { background: #6bba9045; }.pdf-mapped-field.uncertain { border: 2px solid #b45309; background: #f59e0b30; }
.pdf-mapped-field.uncertain:hover { background: #f59e0b55; cursor: pointer; }
.pdf-mapped-field.accepted { border: 2px solid #16a34a; background: #22c55e35; }
.pdf-mapped-field.accepted:hover { background: #22c55e55; cursor: pointer; }
.pdf-text-area { border-color: #9995; background: transparent; min-height: 4px; }
.pdf-text-area:hover, .pdf-text-area:focus-visible { border-color: #777; background: #8882; }
.pdf-fields-heading { display: none; }
.pdf-mapped-field.selected { outline: 2px solid #222; }
.pdf-page.selecting { cursor: crosshair; touch-action: none; user-select: none; }.pdf-page.selecting .pdf-mapped-field { pointer-events: none; }
.pdf-selection { position: absolute; pointer-events: none; background: #3b71b030; border: 1px solid #3b71b0; }
.pdf-fields { max-height: 190px; overflow: auto; }
.pdf-field-row { display: flex; align-items: center; border-top: 1px solid var(--line); gap: 3px; }
.pdf-field-drag { min-width: 0; flex: 1; display: flex; flex-direction: column; text-align: left; border: 0; background: transparent; padding: 8px 4px; color: var(--text); cursor: grab; touch-action: none; user-select: none; font-size: 12px; }
.pdf-field-drag span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.pdf-field-drag small { color: var(--muted); font-size: 10px; }
.pdf-field-row .text-action { padding: 4px; font-size: 11px; }
.pdf-field-row.needs-review { background: #fff7e6; border-left: 3px solid #b45309; padding-left: 5px; }
.pdf-field-row.needs-review .pdf-field-drag small, .pdf-field-row.needs-review .text-action { color: #92400e; }
.pdf-field-row.is-accepted { background: #f0fdf4; border-left: 3px solid #16a34a; padding-left: 5px; }
.pdf-field-row.is-accepted .pdf-field-drag small, .pdf-field-row.is-accepted .text-action { color: #15803d; }
.field-row.needs-review { background: #fff7e6; border-left: 3px solid #b45309; }
.field-row.needs-review .text-action { color: #92400e; white-space: nowrap; }
.field-row.is-accepted { background: #f0fdf4; border-left: 3px solid #16a34a; }
.field-row.is-accepted .text-action { color: #15803d; white-space: nowrap; }
#pdfFieldDialog { width: min(480px, 94vw); max-height: 90vh; overflow: auto; }#pdfFieldDialog input:not([type=checkbox]):not([type=radio]) { width: 100%; }
#pdfFieldDialog .preview-error { margin: 12px 0 0; }#pdfFieldDialog .dialog-body { padding-top: 0; }
.pdf-confidence { color: var(--muted); font-size: 12px; margin: 10px 0 16px; overflow-wrap: anywhere; }
.pdf-confidence.needs-review { color: #92400e; background: #fff7e6; border-left: 3px solid #b45309; padding: 10px; }
.pdf-field-choices { border: 0; padding: 0; margin: 0; min-width: 0; }
.pdf-field-choices legend { font-size: 12px; margin-bottom: 4px; }
#pdfFieldDialog .pdf-field-choice { display: flex; align-items: flex-start; gap: 9px; margin: 0; padding: 10px 0; font-weight: 500; }
.pdf-field-choice input { margin: 4px 0 0; flex-shrink: 0; }
.pdf-field-choice small { display: block; color: var(--muted); font-weight: 400; font-size: 12px; margin-top: 3px; }
@media(max-width:850px) { .excel-grid { height: 320px; } }
#monacoEditorContainer, #fallbackEditor { height: 625px; }
#previewDialog {
    position: fixed;
    margin: 0;
    width: min(1120px, 94vw);
    height: 84vh;
    max-height: none;
    overflow: auto;
    resize: both;
}
#previewDialog[open] {
    display: flex;
    flex-direction: column;
}
#previewDialog .panel-heading { position: sticky; top: 0; background: var(--panel); z-index: 2; cursor: move; user-select: none; flex-shrink: 0; }
#previewDialog .panel-heading button { cursor: pointer; }
#previewDialog .result-heading { border-top: 0; flex-shrink: 0; }
#previewDialog .preview-output { padding: 18px; margin: 0 18px 18px; min-height: 120px; background: #fafafa; border: 1px solid var(--line); border-radius: 6px; }
.preview-error { padding: 12px; margin: 0 18px 18px; border: 1px solid #eed0d0; background: #fff5f5; border-radius: 6px; color: #9d3838; white-space: pre-wrap; }
@media (max-width: 850px) { .workspace-grid { grid-template-columns: 1fr; }.field-palette { height: 320px; }#monacoEditorContainer, #fallbackEditor { height: 500px; }.editor-panel .panel-heading { flex-wrap: wrap; } }

/* Reuse and bulk conversion. */
a.button { text-decoration: none; display: inline-block; }
.library-page, .bulk-page { max-width: 1440px; margin: 36px auto; padding: 0 4%; }
.page-heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 24px; }
.page-heading h1 { margin-top: 10px; }.page-heading .intro { margin-bottom: 0; }
.more-ways { max-width: 1440px; padding: 32px 4% 40px; margin: 32px auto 0; border-top: 1px solid var(--line); }
.more-ways h2 { font-size: 22px; }.future-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px; }
.future-card { padding: 20px; border: 1px solid var(--line); border-radius: 10px; background: #ffffff; }
.future-card h3 { font-size: 16px; margin: 12px 0 8px; }.future-card p { color: var(--muted); margin: 0; font-size: 13px; }
.coming-soon { display: inline-block; border: 1px solid #dddddd; border-radius: 16px; padding: 2px 9px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 1px; }
.template-table-wrap { overflow-x: auto; }.template-table { width: 100%; border-collapse: collapse; text-align: left; }
.template-table th { color: var(--muted); font-weight: 500; font-size: 12px; }.template-table th, .template-table td { padding: 18px; border-bottom: 1px solid var(--line); }.template-table tr:last-child td { border: 0; }
.template-table time { font-size: 12px; color: var(--muted); white-space: nowrap; }.template-actions { display: flex; gap: 8px; flex-wrap: wrap; }.template-actions .button { font-size: 12px; padding: 7px 12px; }
.button.danger { color: #9d3838; background: #fff5f5; border-color: #eed0d0; }.empty-state { padding: 48px; text-align: center; }.empty-state p { color: var(--muted); }
.inline-notice { padding: 12px 16px; background: #f7f7f7; border: 1px solid #dedede; border-radius: 6px; }
.dialog-body { padding: 20px 24px; }.dialog-actions { padding: 16px 24px; display: flex; justify-content: flex-end; gap: 10px; border-top: 1px solid var(--line); }
#noticeDialog { position: fixed; inset: 0; margin: auto; width: min(460px, 90vw); max-height: 85vh; }
#noticeMessage { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 55vh; overflow: auto; }

/* Quiet, compact file explorer. */
.bulk-page { max-width: 1180px; margin: 36px auto; }
.back-link { color: var(--muted); text-decoration: none; font-size: 12px; }
.bulk-page .page-heading { margin: 18px 0 26px; }
.bulk-page .page-heading h1 { margin: 0 0 5px; font-size: 28px; }
.bulk-page .intro { font-size: 13px; }
.text-action { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 5px; background: transparent; padding: 5px 7px; font-size: 12px; font-weight: 500; color: #444; text-decoration: none; white-space: nowrap; cursor: pointer; }
.text-action:hover { background: #f0f0f0; color: #111; }
.icon-button { border: 0; background: transparent; color: var(--muted); font-size: 22px; width: 30px; height: 30px; border-radius: 5px; line-height: 1; }
.icon-button:hover { background: #f0f0f0; }
.file-explorer { background: #fff; border: 1px solid var(--line); border-radius: 9px; transition: border-color .15s, box-shadow .15s; }
.file-explorer.dragover { border-color: #555; box-shadow: 0 0 0 3px #ddd; background: #fafafa; }
.explorer-toolbar { padding: 14px 16px; display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--line); }
.explorer-toolbar .button { font-size: 12px; }
.explorer-toolbar .button span { font-size: 16px; padding-right: 4px; }
.explorer-hint { color: var(--muted); font-size: 12px; }
.explorer-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.overflow-menu { position: relative; padding: 0; }
.overflow-menu summary { list-style: none; padding: 5px 8px; border-radius: 5px; font-size: 12px; letter-spacing: 1px; }
.overflow-menu summary::-webkit-details-marker { display: none; }
.overflow-menu summary:hover, .overflow-menu[open] summary { background: #f2f2f2; }
.menu-items { position: absolute; z-index: 5; right: 0; top: 32px; min-width: 225px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 5px; box-shadow: 0 5px 20px #0001; }
.menu-items button, .menu-items a { display: block; text-align: left; width: 100%; padding: 9px 10px; font-size: 12px; color: var(--text); background: transparent; border: 0; text-decoration: none; border-radius: 4px; }
.menu-items button:not(:disabled):hover, .menu-items a:hover { background: #f5f5f5; }
.explorer-empty { min-height: 310px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 32px 18px; }
.empty-file-icon { display: block; color: #888; font-size: 30px; margin-bottom: 12px; }
.explorer-empty h2 { font-size: 17px; font-weight: 500; margin-bottom: 6px; }
.explorer-empty p, .explorer-empty small { color: var(--muted); font-size: 12px; margin: 0 0 8px; }
.file-table-wrap { min-height: 310px; max-height: 60vh; overflow: auto; border-radius: 0; }
.file-table { width: 100%; border-collapse: collapse; text-align: left; }
.file-table th { color: var(--muted); font-size: 11px; font-weight: 500; padding: 10px 20px; position: sticky; top: 0; background: #fafafa; z-index: 1; }
.file-table th:first-child { width: 55%; }.file-table th:nth-child(2) { width: 20%; }
.file-table td { padding: 13px 20px; border-top: 1px solid #f0f0f0; vertical-align: middle; }
.file-table tbody tr:hover { background: #fafafa; }
.file-info { display: flex; gap: 12px; align-items: center; min-width: 0; }
.file-icon { width: 19px; color: #929292; flex-shrink: 0; }.file-icon svg { display: block; width: 19px; height: 24px; }
.file-name { min-width: 0; font-size: 13px; overflow-wrap: anywhere; }.file-name small { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.file-status { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.status-symbol { display: inline-block; width: 13px; text-align: center; font-size: 15px; line-height: 1; }
.status-completed { color: #417058; }.status-failed { color: #a24444; }.status-running { color: #404040; }
.status-running .status-symbol { animation: queue-spin 1.4s linear infinite; }
@keyframes queue-spin { to { transform: rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .status-running .status-symbol { animation: none; } }
.file-actions { display: flex; gap: 8px; justify-content: flex-end; }
.explorer-footer { border-top: 1px solid var(--line); padding: 12px 18px; color: var(--muted); font-size: 11px; display: flex; justify-content: space-between; gap: 15px; }
.bulk-page > .help { margin-top: 14px; font-size: 11px; }
#bulkPreviewDialog { width: min(950px, 94vw); max-height: 90vh; }
#bulkPreviewDialog .result-heading { border-top: 0; }
#bulkOutput { background: #fafafa; color: #303030; padding: 18px; margin: 0 18px 18px; min-height: 180px; max-height: 55vh; border: 1px solid var(--line); border-radius: 6px; }
#bulkOutputName, #bulkErrorFile, #bulkSourceName, #bulkError { overflow-wrap: anywhere; }
#bulkError { white-space: pre-wrap; }#bulkHtml { width: 100%; height: 300px; background: white; border: 0; }
.field-type { background: #f0f0f0; color: #686868; font-weight: 400; }
.more-ways { max-width: 1100px; }.more-ways h2 { font-size: 18px; }.future-card { background: transparent; padding: 18px; }.coming-soon { letter-spacing: .5px; font-size: 9px; }
@media(max-width:850px) { .future-grid { grid-template-columns: 1fr; }.page-heading { align-items: start; flex-wrap: wrap; }.explorer-hint { display: none; }.file-table th, .file-table td { padding-left: 12px; padding-right: 12px; }.file-table th:first-child { width: auto; }.file-actions { gap: 2px; flex-wrap: wrap; }.file-actions .text-action { padding: 5px; }.explorer-footer { flex-wrap: wrap; gap: 4px 12px; }.explorer-toolbar { gap: 8px; padding: 12px; }.bulk-page { padding: 0 16px; }.header-actions { gap: 6px; }.app-header .button { font-size: 12px; }.file-info { gap: 8px; } }
@media(max-width:480px) { .file-icon { display: none; }.file-actions { flex-direction: column; align-items: flex-end; }.file-name { font-size: 12px; }.file-status { font-size: 11px; gap: 3px; }.explorer-actions { gap: 2px; }.explorer-toolbar .text-action { font-size: 11px; }.brand small { font-size: 10px; } }

.setup-card + .setup-card { margin-top: 18px; }

/* Focused home, editor navigation and shared input/output setup. */
.studio-home { max-width: 660px; margin: clamp(60px, 15vh, 160px) auto 70px; padding: 0 24px; text-align: center; }
.studio-home h1 { font-size: clamp(28px, 3vw, 38px); line-height: 1.25; letter-spacing: -1px; }
.studio-home p { color: var(--muted); font-size: 16px; margin: 20px 0 28px; }
.home-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.more-ways { max-width: 950px; border: 0; margin: 0 auto 30px; padding: 16px 24px; }
.more-ways > summary { text-align: center; font-size: 13px; list-style: none; text-decoration: underline; text-underline-offset: 4px; }
.app-header:has(.editor-breadcrumb) { justify-content: flex-start; }
.editor-breadcrumb { display: flex; align-items: center; gap: 14px; min-width: 0; color: var(--muted); font-size: 13px; }
.editor-breadcrumb a { text-decoration: none; }.editor-breadcrumb a:hover { text-decoration: underline; }
#breadcrumbName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.title-row .name-input { border-color: transparent; background: transparent; padding: 4px 0; margin: 0; width: 280px; }
.title-row .name-input:hover, .title-row .name-input:focus { border-color: var(--line); background: white; }
.title-row .name-edit-hint { display: inline-flex; align-items: center; gap: 5px; margin: 0; color: var(--muted); font-size: 11px; font-weight: 400; cursor: text; }
.name-edit-hint svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.name-save-status { display: block; color: var(--muted); font-size: 11px; }
.name-save-status[data-error="true"] { color: #b42318; }
#saveState, #formatSummary { font-size: 12px; }
.editor-menu { position: relative; padding: 0; }.editor-menu > summary { list-style: none; font-size: 20px; line-height: 21px; }
.editor-menu > summary::-webkit-details-marker { display: none; }
.editor-menu-items { position: absolute; right: 0; top: calc(100% + 6px); z-index: 10; min-width: 145px; padding: 5px; border: 1px solid var(--line); border-radius: 8px; background: white; box-shadow: 0 5px 20px #0001; }
.editor-menu-items button { display: block; width: 100%; text-align: left; border: 0; background: transparent; border-radius: 4px; padding: 8px 12px; }.editor-menu-items button:hover { background: #f3f3f3; }
/* ── Settings wizard ── */
.settings-wizard { position: relative; }
.wizard-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.wizard-title { margin: 0; font-size: 15px; font-weight: 600; }
.wizard-steps { display: flex; align-items: center; gap: 0; }
.wizard-step { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; color: #999; cursor: default; white-space: nowrap; }
.wizard-step .step-number { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #ccc; font-size: 11px; font-weight: 700; background: #fff; color: #999; transition: background .2s, border-color .2s, color .2s; }
.wizard-step.active { color: var(--accent); }
.wizard-step.active .step-number { background: var(--accent); border-color: var(--accent); color: #fff; }
.wizard-step.completed .step-number { background: var(--accent); border-color: var(--accent); color: #fff; }
.wizard-step.completed .step-number::after { content: '\2713'; font-size: 12px; }
.wizard-step.completed .step-number { font-size: 0; }
.step-connector { width: 32px; height: 1.5px; background: #ddd; margin: 0 6px; flex-shrink: 0; }
.wizard-actions { justify-content: space-between; }
.wizard-nav { display: flex; gap: 8px; align-items: center; }
/* Loader overlay */
.wizard-loader { position: absolute; inset: 0; background: rgba(255,255,255,.88); backdrop-filter: blur(3px); border-radius: 10px; display: flex; align-items: center; justify-content: center; z-index: 20; }
.wizard-loader[hidden] { display: none !important; }
.wizard-loader-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.wizard-spinner { width: 34px; height: 34px; border: 3px solid #e0e0e0; border-top-color: var(--accent); border-radius: 50%; animation: wiz-spin .7s linear infinite; }
@keyframes wiz-spin { to { transform: rotate(360deg); } }
.wizard-loader-msg { margin: 0; font-size: 13px; color: var(--muted); font-weight: 500; }
.settings-dialog { width: min(680px, 94vw); max-height: 90vh; }
.settings-dialog[open] { display: flex; flex-direction: column; }
.settings-dialog .wizard-header, .settings-dialog .dialog-actions { flex: 0 0 auto; }
/* Fields tab */
.fields-tab-inner { padding: 10px 4px; max-height: 580px; overflow-y: auto; }
.fields-tab-empty { margin: 24px 16px; text-align: center; }
/* Close button in toolbar */
#closeWorkbench { font-size: 18px; line-height: 1; padding: 5px 10px; border-radius: 7px; }
.settings-body { padding: 0 24px; overflow-y: auto; min-height: 0; }
#setupFields { margin: 0; padding: 0; border: 0; min-width: 0; }
.settings-section { padding: 20px 0; }.settings-section + .settings-section { border-top: 1px solid var(--line); }
.settings-section h3 { font-size: 14px; margin-bottom: 14px; }
.settings-section .file-dropzone { margin: 12px 0 0; padding: 20px; }
.settings-section .mode-options { gap: 8px 20px; margin-bottom: 0; }
.settings-section .mode-options label { margin: 8px 0; }
.settings-section .help:empty { display: none; }
.settings-section .form-row label { margin-top: 0; }
.settings-section textarea { margin-top: 12px; }
.current-sample { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
#sampleName { overflow-wrap: anywhere; min-width: 0; }.current-sample + #inputControls:not([hidden]) { margin-top: 16px; }
.static-format { margin: 0 0 4px; color: var(--muted); }
.excel-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:14px; }
.excel-options label { margin:0; }.excel-options input[type=checkbox] { width:auto; margin-right:6px; }
.workbook-tabs { display:flex; gap:6px; overflow-x:auto; padding:12px 0; }
#workbookPreview,#bulkWorkbook { padding:0 18px 18px; }
.workbook-tabs [aria-selected=true] { background:#17365d; color:white; border-color:#17365d; }
.workbook-controls { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.workbook-controls [role=status] { flex:1; font-size:12px; color:var(--muted); }
.workbook-grid { max-height:55vh; overflow:auto; }.workbook-grid table { border-collapse:collapse; }
.workbook-grid th,.workbook-grid td { min-width:10ch; max-width:var(--workbook-width,28ch); padding:8px 10px; border:1px solid #dce2e8; text-align:left; vertical-align:top; white-space:pre; }
.workbook-grid.workbook-wrap td { white-space:pre-wrap; overflow-wrap:anywhere; min-width:var(--workbook-width,28ch); }
.workbook-grid th { position:sticky; top:0; background:#f0f3f7; }.workbook-styled th { background:#17365d; color:white; }
.workbook-grid:not(.workbook-freeze) th { position:static; }
@media(max-width:600px) { .studio-home { margin-top: 65px; }.editor-breadcrumb { gap: 8px; }.editor-breadcrumb #breadcrumbName { display: none; }.settings-body { padding: 0 18px; }.workbench-toolbar { align-items: flex-start; }.future-grid { grid-template-columns: 1fr; } }

/* DakiaJsonViewer v3 — Monaco Editor JSON viewer */
#jsonViewer {
    margin: 0 18px 18px;
    flex: 0 0 auto;
    height: clamp(220px, 50vh, 520px);
    min-width: 0;
    min-height: 220px;
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
}


/* DQL editor tools */
.dql-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 16px; }
.dql-toolbar select { width: auto; max-width: 100%; }
.dql-toolbar label { margin: 0; }
.dql-toolbar #debugRecord { width: 72px; }
.dql-help { padding: 0 16px; margin: 0 0 10px; }
/* Editor-integrated debugger */
.dql-breakpoint { background: radial-gradient(circle, #d13438 0 5px, transparent 6px); cursor: pointer; }
.dql-current-line::after { content: '➜'; color: #987200; font-size: 19px; font-weight: 700; position: absolute; inset: 0; text-align: center; }
.debug-line { background: #fff4b8; border-top: 1px solid #ead77e; border-bottom: 1px solid #ead77e; }
.editor-panel.is-debugging #monacoEditorContainer, .editor-panel.is-debugging #fallbackEditor { height: clamp(160px, 27vh, 320px); }
.debug-panel { background: #fff; border-top: 1px solid #d7dce4; border-radius: 0 0 10px 10px; overflow: hidden; padding: 0; }
.debug-commandbar { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; padding: 7px 10px; background: #f7f8fa; border-bottom: 1px solid #e7eaf0; }
.debug-command { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid transparent; border-radius: 5px; background: transparent; padding: 5px 8px; font-size: 12px; color: #303846; white-space: nowrap; }
.debug-command:hover:not(:disabled) { background: #e9edf3; border-color: #dce1e8; }
.debug-command kbd { font: 10px 'Segoe UI', sans-serif; color: #727b89; }
.debug-play { color: #126744; font-weight: 600; }
.debug-play>span:first-child { font-size: 12px; }
.debug-icon { font-size: 18px; width: 30px; padding: 1px; }
#debugStop { color: #b42318; font-size: 15px; }
.debug-close { margin-left: auto; }
.debug-record { display: inline-flex; gap: 6px; align-items: center; padding-left: 9px; border-left: 1px solid #dce1e8; }
.debug-record label { margin: 0; font-size: 11px; font-weight: 400; }
.debug-record input { width: 52px; padding: 3px 5px; border-radius: 4px; font-size: 12px; }
.debug-statusbar { display: flex; gap: 7px; align-items: center; padding: 6px 14px; font-size: 11px; background: #f8fafc; color: #667085; }
.debug-status-dot { width: 6px; height: 6px; border-radius: 50%; background: #8c96a7; flex-shrink: 0; }
.debug-panel[data-status=paused] .debug-statusbar { background: #fff9e6; color: #765a0d; }
.debug-panel[data-status=paused] .debug-status-dot { background: #c18b13; }
.debug-panel[data-status=complete] .debug-status-dot { background: #168158; }
#debugStatus { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#debugLocation { margin-left: auto; white-space: nowrap; font-size: 11px; }
.debug-tabs { display: flex; align-items: center; padding: 0 10px; border-bottom: 1px solid #e4e7ec; gap: 4px; }
.debug-tabs [role=tab] { border: 0; border-bottom: 2px solid transparent; background: none; padding: 8px 10px 7px; color: #697383; font-size: 12px; }
.debug-tabs [aria-selected=true] { border-bottom-color: #4269a6; color: #243b5f; font-weight: 600; }
.debug-breakpoint-count { margin-left: auto; font-size: 10px; color: #8a6370; }
.debug-pane { height: clamp(115px, 18vh, 205px); overflow: auto; scrollbar-width: thin; }
.debug-value-row { display: grid; grid-template-columns: minmax(140px, 40%) minmax(90px, 1fr) 76px 28px; align-items: center; min-height: 29px; border-bottom: 1px solid #f0f2f5; font: 12px/1.5 Consolas, monospace; }
.debug-value-head { position: sticky; top: 0; z-index: 1; min-height: 26px; color: #778191; background: #fafbfc; font: 11px 'Segoe UI', sans-serif; }
.debug-value-head>span { padding: 4px 12px; }
.debug-value-row:not(.debug-value-head):hover { background: #f6f8fc; }
.debug-value-name { display: flex; min-width: 0; align-items: center; color: #334b73; gap: 2px; }
.debug-value-name>span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.debug-expand { flex: 0 0 19px; border: 0; background: none; padding: 0; color: #67748b; }
.debug-value-content { padding: 3px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #3b6040; }
.debug-value-changed { color: #bd4a23; font-weight: 600; }
.debug-value-type { color: #8b93a0; font: 10px 'Segoe UI', sans-serif; }
.debug-row-action { padding: 1px; width: 23px; border: 0; border-radius: 4px; background: transparent; color: #667b9b; font-size: 17px; }
.debug-row-action:hover { background: #e6edf7; }
.debug-watch-form { display: flex; padding: 8px 12px; gap: 6px; border-bottom: 1px solid #edf0f4; }
.debug-watch-form input { min-width: 0; flex: 1; padding: 5px 8px; font: 12px Consolas, monospace; background: #fff; }
.debug-watch-path { width: 100%; min-width: 0; border: 1px solid transparent; border-radius: 3px; background: transparent; padding: 3px 4px; font: inherit; color: inherit; }
.debug-watch-path:focus { background: #fff; border-color: #8fa8cc; }
.debug-watch-error { color: #b42318; margin: 6px 12px; font-size: 12px; }
.debug-empty { padding: 26px 20px; text-align: center; color: #8791a0; font-size: 12px; margin: 0; }
.debug-stack-frame { width: 100%; display: block; text-align: left; border: 0; border-bottom: 1px solid #edf0f4; background: #fff; padding: 7px 16px; font: 12px Consolas, monospace; color: #626f81; }
.debug-stack-frame.is-current { background: #f5f8fd; color: #345b91; }
.debug-footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 12px; border-top: 1px solid #e7eaf0; background: #fafbfc; color: #89919e; font-size: 10px; }
.debug-footer .text-action { white-space: nowrap; font-size: 11px; }
.debug-panel.is-running .debug-pane { opacity: .55; }
@media (max-width: 700px) { .debug-command { padding: 5px; gap: 4px; } .debug-command kbd { display: none; } .debug-value-row { grid-template-columns: minmax(120px, 45%) minmax(80px, 1fr) 28px; } .debug-value-type, .debug-value-head>span:nth-child(3) { display: none; } .debug-footer { flex-wrap: wrap; } }
#dqlReferenceDialog { width: min(760px, 95vw); }
#dqlReferenceDialog .dialog-body { max-height: 72vh; overflow-y: auto; }
.dql-function { border-top: 1px solid #e5e7eb; padding: 16px 0; }
.dql-function pre { white-space: pre-wrap; overflow-wrap: anywhere; background: #f5f6f8; padding: 10px; border-radius: 6px; }


.editor-panel { container-type: inline-size; }
.editor-panel.is-debugging .dql-help { display: none; }
@container (max-width: 600px) { .debug-command kbd { display: none; } .debug-commandbar { gap: 1px; } .debug-command { padding: 5px 6px; } }

/* Keep code and paused values together on shorter laptop screens. */
body:has(.editor-panel.is-debugging) .app-header { height: 52px; }
.workbench:has(.editor-panel.is-debugging) { padding-top: 12px; }
.workbench:has(.editor-panel.is-debugging) .workbench-toolbar { margin-bottom: 12px; }
.workbench:has(.editor-panel.is-debugging) .name-input { font-size: 18px; padding-top: 4px; padding-bottom: 4px; margin-bottom: 0; }
.editor-panel.is-debugging > .panel-heading { padding: 7px 14px; }
.editor-panel.is-debugging > .dql-toolbar { padding: 7px 14px; }
.editor-panel.is-debugging > .dql-toolbar select { padding: 5px 8px; }

/* Primary transformation actions and discoverable breakpoint gutter. */
.workbench-toolbar .toolbar-actions { gap: 8px; }
.workbench-toolbar .studio-action { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 39px; padding: 8px 13px; border: 1px solid #d9dfe8; background: #fff; color: #344054; box-shadow: 0 1px 2px #10182808; border-radius: 8px; font-size: 13px; font-weight: 600; transition: background .15s, border-color .15s, box-shadow .15s; }
.studio-action svg { width: 17px; height: 17px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.workbench-toolbar .studio-action:hover:not(:disabled) { background: #f5f7fb; border-color: #b8c4d5; filter: none; }
.workbench-toolbar .studio-action:focus-visible { outline: 2px solid #6395e8; outline-offset: 3px; }
.workbench-toolbar .studio-run { background: #2563eb; border-color: #2563eb; color: #fff; box-shadow: 0 2px 4px #2563eb25; min-width: 130px; }
.workbench-toolbar .studio-run:hover:not(:disabled) { background: #1d4ed8; border-color: #1d4ed8; }
.studio-run svg { width: 15px; fill: currentColor; stroke-width: 1; }
.workbench-toolbar .studio-help { color: #2159b5; background: #eef5ff; border-color: #bcd3f5; }
.workbench-toolbar .studio-help:hover:not(:disabled) { color: #16458f; background: #e1edff; border-color: #87afea; }
.studio-run kbd { font: 10px 'Segoe UI', sans-serif; border: 1px solid #ffffff55; border-radius: 4px; padding: 0 4px; color: #e0eaff; margin-left: 2px; }
.workbench-toolbar .studio-icon { width: 37px; padding: 8px; }
.app-header:has(#closeWorkbench:not([hidden])) { position: relative; padding-right: 120px; }
#closeWorkbench { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 8px 12px; background: #feecec; border: 1px solid #f3b4b4; color: #b42318; font-size: 13px; font-weight: 600; }
#closeWorkbench:hover { background: #fbd5d5; border-color: #df8888; }
.help-menu .editor-menu-items { width: min(290px, calc(100vw - 32px)); }
.field-guide-steps { padding-left: 23px; }
.field-guide-steps li { margin: 16px 0; }
.dql-editor-status { justify-content: flex-start; gap: 9px; padding: 9px 16px; background: #fafbfc; border-bottom: 1px solid #edf0f4; }
.dql-editor-status .help { margin: 0; font-size: 11px; }
.dql-language-badge { padding: 2px 6px; border: 1px solid #dbe3ed; color: #52647e; border-radius: 4px; font: 600 10px Consolas, monospace; }
.run-mode-hint { margin-left: auto; font-size: 10px; color: #7b8493; }
.run-mode-hint.has-breakpoints { color: #a83535; }
#monacoEditorContainer .monaco-editor .margin { background: #e5e7eb !important; border-right: 1px solid #d0d5dd; }
#monacoEditorContainer .monaco-editor .glyph-margin { background: #d2d7df; }
#monacoEditorContainer .monaco-editor .glyph-margin-widgets { cursor: pointer; }
.dql-breakpoint-line { background: #edf0f4; }
.dql-breakpoint { background: radial-gradient(circle, #ce3039 0 5px, #fff 5px 6px, transparent 7px); }
.debug-line.dql-breakpoint-line, .debug-line { background: #fff4b8; }
@container (max-width: 600px) { .dql-editor-status .help { display: none; } }
@media (max-width: 600px) { .workbench-toolbar .toolbar-actions { gap: 5px; } .workbench-toolbar .studio-action { padding: 7px 9px; } .workbench-toolbar .studio-icon { width: 32px; } .studio-run kbd { display: none; } }

/* Contextual mapping guide: vector animation stays sharp at every screen size. */
.mapping-welcome { width: min(640px, 94vw); }
.mapping-welcome .dialog-body { padding: 28px; }
.mapping-welcome h2 { font-size: 25px; margin: 8px 0 12px; color: #213555; }
.mapping-welcome p { line-height: 1.7; color: #65748b; }
.mapping-welcome .guide-context-controls { margin-top: 22px; }
.tour-remember { display: flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 13px; }
.tour-remember input { margin: 0; width: auto; }
#tourPreferenceHelp { font-size: 11px; margin-bottom: 0; }
.tour-welcome-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 18px; border-radius: 14px; background: #eaf1ff; color: #2563eb; font-size: 27px; }
.live-mapping-tour { position: fixed; inset: 0; margin: 0; padding: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: hidden; }
.live-mapping-tour::backdrop { background: #13243b18; }
.tour-spotlight { position: absolute; border: 2px solid #2563eb; border-radius: 6px; box-shadow: 0 0 0 5px #2563eb25; pointer-events: none; }
.tour-target { border-color: #15976b; box-shadow: 0 0 0 5px #15976b25; }
.tour-cursor { position: absolute; left: 0; top: 0; padding: 9px 13px; max-width: min(340px, 65vw); background: #2563eb; color: #fff; border-radius: 7px; box-shadow: 0 6px 20px #183b7155; font: 13px Consolas, monospace; pointer-events: none; }
.tour-cursor span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tour-cursor svg { position: absolute; width: 27px; height: 31px; bottom: -22px; right: -7px; fill: #fff; stroke: #23344e; stroke-width: 1.5; }
.live-tour-card { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); width: min(720px, calc(100vw - 32px)); padding: 14px 20px 18px; border: 1px solid #c4d5ef; border-radius: 12px; background: #fff; box-shadow: 0 8px 35px #183b7130; }
.live-tour-heading { display: flex; justify-content: space-between; align-items: center; }
.live-tour-heading .text-action { font-size: 22px; padding: 0 4px; }
.live-tour-card h2 { margin: 4px 0 8px; color: #243c60; font-size: 18px; }
.live-tour-card p { margin: 0; font-size: 13px; color: #5e6f87; line-height: 1.6; overflow-wrap: anywhere; max-height: 14vh; overflow: auto; }
.live-tour-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.live-tour-active #monacoEditorContainer, .live-tour-active #fallbackEditor { height: clamp(180px, 42vh, 390px); }
@media (max-width: 700px) { .live-tour-active .workspace-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 8px; } .live-tour-card { bottom: 8px; padding: 10px 14px; } .live-tour-actions .button { padding: 6px 8px; font-size: 12px; } }
.preview-feedback { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 20px; border-top: 1px solid #dfe6f0; background: #f5f8ff; margin-top: auto; flex-shrink: 0; }
.preview-feedback strong, .preview-feedback span { display: block; }
.preview-feedback strong { color: #243b5f; font-size: 13px; }
.preview-feedback span { color: #63728a; font-size: 12px; margin-top: 3px; }
.preview-feedback button { white-space: nowrap; }
.mapping-guide { width: min(820px, 95vw); padding: 0; max-height: 92vh; }
.mapping-guide[open] { display: flex; flex-direction: column; }
.mapping-guide .panel-heading, .mapping-guide .dialog-actions { flex-shrink: 0; }
.guide-eyebrow { display: block; color: #4771ad; letter-spacing: .12em; font-size: 10px; font-weight: 700; margin-bottom: 5px; }
.guide-body { padding: 0 24px 14px; overflow-y: auto; }
.guide-body p { color: #56647a; font-size: 13px; line-height: 1.65; }
.guide-lessons { display: flex; gap: 12px; margin: 12px 0; }
.guide-lessons button { display: flex; align-items: center; justify-content: center; gap: 9px; flex: 1; padding: 12px; background: #f8fafc; color: #64748b; border: 1px solid #e2e8f0; border-radius: 8px; font-weight: 600; }
.guide-lessons button[aria-pressed=true] { background: #eff5ff; color: #2455aa; border-color: #9cbcef; }
.guide-lessons button span { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #e1e9f5; font-size: 12px; }
.guide-body h3 { font-size: 17px; margin: 0 0 6px; color: #23344e; }
.guide-body section>p { margin: 8px 0 12px; }
.guide-context-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.guide-context-controls>div { min-width: 0; }
.guide-context-controls label { font-size: 12px; }
.guide-context-controls select { width: 100%; font: 12px Consolas, monospace; text-overflow: ellipsis; }
.guide-live-scene { position: relative; display: grid; grid-template-columns: 35% 1fr; gap: 12px; }
.guide-live-input, .guide-live-output { min-width: 0; border: 1px solid #dce5f1; border-radius: 9px; background: #fafcff; overflow: hidden; }
.guide-live-field { margin: 12px; padding: 10px; border: 1px solid #c2d5f4; border-radius: 6px; background: #e9f1ff; }
.guide-live-field strong, .guide-live-field code { display: block; overflow-wrap: anywhere; font: 12px/1.6 Consolas, monospace; }
.guide-live-field strong { color: #2455aa; }
.guide-live-field code { max-height: 60px; overflow: auto; }
.guide-live-scene pre { font: 12px/1.8 Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; padding: 12px; color: #334d76; }
#guideInputContext { max-height: 100px; overflow: auto; color: #79869a; }
.guide-output-frames { display: grid; max-height: 195px; overflow: auto; }
.guide-output-frames>pre { grid-area: 1 / 1; }
.guide-before { animation: guide-before 7s infinite; }
.guide-after { animation: guide-after 7s infinite; }
.guide-output-frames mark { padding: 2px 0; background: #fff0c4; color: #684d12; box-decoration-break: clone; }
.guide-output-frames .guide-after mark { background: #d9f3e6; color: #1c6944; }
.guide-live-token { position: absolute; left: 3%; top: 70px; max-width: 58%; border-radius: 6px; padding: 7px 10px; color: white; background: #2563eb; box-shadow: 0 4px 12px #2563eb30; font: 12px Consolas, monospace; pointer-events: none; animation: guide-live-drag 7s infinite; }
.guide-live-token span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guide-live-token svg { position: absolute; width: 24px; height: 28px; right: -8px; bottom: -19px; fill: white; stroke: #23344e; stroke-width: 1.5; }
.guide-mapping-summary { overflow-wrap: anywhere; }
.guide-current-output { max-height: 180px; overflow: auto; padding: 12px; border: 1px solid #e1e7f0; border-radius: 6px; font: 12px/1.7 Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
#guideOutputDetails { margin: 12px 0; font-size: 12px; color: #56647a; }
.guide-no-mapping .guide-live-token, .guide-no-mapping .guide-after { display: none; }
.guide-no-mapping .guide-before { animation: none; opacity: 1; }
.guide-code-scene { border: 1px solid #dce5f1; border-radius: 10px; background: #fafcff; overflow: hidden; }
.guide-code-heading { padding: 13px 18px; border-bottom: 1px solid #e1e7f0; color: #73839b; font: 600 11px 'Segoe UI', sans-serif; letter-spacing: 1px; }
.guide-code-scene pre { margin: 0; padding: 18px; overflow-x: auto; color: #334d76; font: 14px/1.9 Consolas, monospace; }
.guide-code-body { color: #28724e; }
.guide-typing { display: inline-block; vertical-align: bottom; animation: guide-type 7s steps(36, end) infinite; }
.guide-code-result { display: flex; flex-wrap: wrap; gap: 14px; padding: 10px 18px; background: #eaf4ee; color: #37654b; font-size: 12px; }
.guide-tip { background: #f5f7fa; border-radius: 6px; padding: 12px 14px; }
.guide-playback { display: flex; justify-content: flex-end; align-items: center; gap: 15px; color: #8993a2; font-size: 11px; }
.guide-playback>span { margin-right: auto; }
.guide-playback button { font-size: 12px; }
.guide-actions { align-items: center; justify-content: space-between; background: #fafbfc; }
.guide-actions>span { font-size: 12px; color: #64748b; }
.mapping-guide.animation-paused .guide-animation * { animation-play-state: paused; }
.mapping-guide:not([open]) .guide-animation * { animation: none; }
@keyframes guide-live-drag { 0%, 12% { left: 3%; top: 70px; opacity: 0; } 18%, 25% { left: 3%; top: 70px; opacity: 1; } 53%, 59% { left: 41%; top: 85px; opacity: 1; } 63%, 100% { left: 41%; top: 85px; opacity: 0; } }
@keyframes guide-before { 0%, 59% { opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes guide-after { 0%, 59% { opacity: 0; } 65%, 100% { opacity: 1; } }
@keyframes guide-type { 0%, 14% { clip-path: inset(0 100% 0 0); } 58%, 100% { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) {
    .mapping-guide .guide-animation * { animation: none !important; }
    .guide-live-token, .guide-before, .guide-playback { display: none; }
    .guide-after { opacity: 1; }
}
@media (max-width: 600px) {
    .preview-feedback, .guide-actions { align-items: stretch; flex-direction: column; gap: 10px; }
    .guide-body { padding: 0 14px 12px; }
    .guide-lessons { gap: 6px; }
    .guide-lessons button { font-size: 12px; padding: 8px 5px; }
    .guide-context-controls { grid-template-columns: 1fr; }
    .guide-code-heading { font-size: 9px; padding: 10px; }
    .guide-live-field { margin: 6px; padding: 6px; }
    .guide-code-scene pre { font-size: 12px; padding: 12px; }
}

/* Keep document actions aligned in a single wrapping toolbar. */
.pdf-toolbar > button, .pdf-toolbar > select { height: 32px; padding: 5px 10px; font-size: 12px; border-radius: 6px; line-height: 20px; }
.pdf-toolbar > .icon-button { width: 32px; padding: 0; }
.input-panel-header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:8px;padding-right:14px;flex-wrap:wrap}.input-panel-header .input-tabs{border-bottom:0;flex-wrap:wrap}.input-panel-header > .button{margin:8px 0 8px auto;font-size:12px}

.settings-error{margin:0 24px 16px}

#inputPreview{display:block;width:calc(100% - 32px);height:clamp(400px,55vh,585px);max-height:none;border:1px solid var(--line);font:13px/1.6 Consolas,monospace;white-space:pre;overflow:auto;resize:vertical}.sample-input-message{margin:8px 16px 16px}

#sampleEditorContainer{height:clamp(400px,55vh,585px);margin:16px;width:calc(100% - 32px);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.dql-error-line{background:rgba(220,38,38,.10)}
.dql-error-glyph{background:radial-gradient(circle,#dc2626 0 4px,transparent 5px)}
.field-tab-counts{display:inline-flex;gap:6px;flex-wrap:wrap;margin-left:4px;vertical-align:middle}
.field-tab-counts .badge,[data-theme=dark] .field-tab-counts .badge{color:#b77900}
#workspaceInput,#inputStep{position:relative}
.input-loader{position:absolute;inset:48px 0 0;z-index:20;display:flex;align-items:center;justify-content:center;gap:12px;padding:24px;background:var(--panel);opacity:.95;border-radius:0 0 10px 10px}
.input-loader .wizard-spinner{flex-shrink:0}
.input-loader{flex-direction:column;text-align:center;gap:10px}
.input-tabs{gap:6px;padding:4px 10px 0;align-items:stretch;justify-content:flex-start}
.input-tabs button{flex:0 0 auto;margin:0;border:0;border-radius:0;border-bottom:3px solid transparent;background:transparent;padding:10px 12px;white-space:nowrap;font-weight:500}
.input-tabs button[aria-selected="true"]{border:0;border-bottom:3px solid var(--accent);background:transparent;color:var(--accent);font-weight:600;padding:10px 12px}
.input-tabs button.has-review,[data-theme=dark] .input-tabs button.has-review{background:transparent;border-color:transparent}
.input-tabs button.has-review[aria-selected="true"]{border-bottom:3px solid var(--accent)}
.input-panel-header .input-tabs{width:100%;flex-wrap:nowrap}
.workspace-panel-title>#changeInput{margin-left:auto;font-size:12px}
.pdf-toolbar{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap;gap:8px;padding:8px 0}
#pdfZoom{margin-left:8px;flex:0 0 auto;width:auto}
#pdfSelectRegion{margin-left:auto;flex:0 0 auto;order:10}
.pdf-review-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.input-panel-header .input-tabs{width:auto;flex-wrap:wrap}
.workbench #fieldsPane .pdf-fields,.workbench #fieldsPane .fields-tab-inner{max-height:none;overflow:visible}
.pdf-field-filters{display:flex;gap:6px;flex-wrap:wrap;padding:10px 8px;background:var(--panel);position:sticky;top:0;z-index:2;border-bottom:1px solid var(--line)}
.pdf-field-filters button{font-size:12px;padding:6px 10px}
.pdf-field-filters button[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);background:var(--bg);font-weight:600}
.pdf-field-pager{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 8px;border-top:1px solid var(--line);background:var(--panel);position:sticky;bottom:0;font-size:12px}
.pdf-field-pager button{padding:5px 8px;font-size:12px}
#fieldsPane .pdf-field-row{padding:8px;gap:8px;min-width:0}
#fieldsPane .pdf-field-drag{min-width:0;flex:1}
#fieldsPane .pdf-field-drag span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.workbench-toolbar .toolbar-actions{gap:6px}
.workbench-toolbar .studio-action.studio-compact{width:auto;min-width:0;height:32px;min-height:32px;padding:0 10px;gap:6px;font-size:12px;position:relative}
.studio-compact>kbd{display:none}
.toolbar-action-divider{height:20px;width:1px;background:var(--line);margin:0 4px}
#toolbarMore .editor-menu-items{min-width:175px}
.dialog-titlebar{position:relative;padding-right:104px!important;min-height:46px}
.dialog-window-controls{position:absolute;right:0;top:0;display:flex;gap:0;height:40px}
dialog .dialog-window-button{display:inline-flex;align-items:center;justify-content:center;position:relative;width:46px;height:40px;min-width:46px;padding:0;border:0;border-radius:0;box-shadow:none;background:transparent;color:var(--text);font-size:0;cursor:pointer}
dialog .dialog-window-button:hover{background:#e5e5e5;filter:none}
dialog .dialog-maximize::after{content:'□';font:20px 'Segoe UI',sans-serif}
dialog .dialog-maximize.is-restored::after{content:'❐';font-size:18px}
dialog .dialog-window-close::after{content:'×';font:24px 'Segoe UI',sans-serif}
dialog .dialog-window-close:hover{background:#c42b1c;color:#fff}
dialog.dialog-expanded{width:calc(100vw - 24px)!important;height:calc(100dvh - 24px)!important;max-width:calc(100vw - 24px)!important;max-height:calc(100dvh - 24px)!important;overflow:auto}
#inputOutputDialog .wizard-header{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:10px}
#inputOutputDialog .wizard-steps{justify-content:flex-start}
#inputOutputDialog #cancelSettings{display:none}