:root {
  --navy-950: #0d2742;
  --navy-900: #12345a;
  --navy-800: #1b4570;
  --navy-700: #24506f;
  --green-700: #066a43;
  --green-600: #087f50;
  --green-500: #19a966;
  --green-300: #58c888;
  --green-100: #c9e8d7;
  --green-50: #e7f5ee;
  --blue-800: #12345a;
  --blue-700: #16446f;
  --blue-500: #3b72b0;
  --blue-100: #cfe0f3;
  --blue-50: #eaf2fc;
  --yellow-500: #f6c84e;
  --yellow-100: #f3e3b0;
  --yellow-50: #fff7df;
  --yellow-800: #6f520f;
  --red-700: #b42335;
  --red-100: #f5ccd2;
  --red-50: #fdf0f2;
  --ink: #172b45;
  --ink-2: #334862;
  --muted: #64748b;
  --line: #e2e8f0;
  --line-strong: #cbd5e1;
  --surface: #fff;
  --surface-2: #f8fafc;
  --bg: #f4f7f7;
  --canvas: #e9edf1;
  --stage: #1d2f3f;
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgb(23 43 69 / 6%);
  --shadow: 0 1px 2px rgb(23 43 69 / 5%), 0 4px 14px rgb(23 43 69 / 4%);
  --shadow-lg: 0 24px 64px rgb(13 39 66 / 26%);
  --font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
  --ocrsd-height: clamp(38px, calc(5vw - 12px), 60px);
  --labrec-height: calc(var(--ocrsd-height) * 0.8);
  --brand-gap: 12px;
  --topbar: max(56px, calc(var(--ocrsd-height) + 16px));
  /* Global stacking scale. Local values (1-10) stay inside a component; dialogs and fullscreen use the top layer. */
  --z-sticky: 30;
  --z-nav: 40;
  --z-dropdown: 60;
  --z-popover: 120;
  --z-toast: 150;
  --z-skip-link: 200;
  --z-tooltip: 300;
  --cat-basicos: #2f6db5;
  --cat-pessoais: #7655c2;
  --cat-geograficos: #0f8478;
  --cat-estruturados: #b2600c;
  --cat-personalizados: #b23e78;
  --cat-layout: #5b6b80;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--topbar) + 16px); }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 0.875rem;
  line-height: 1.5;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; line-height: 1.25; color: var(--ink); }
p { margin: 0; }
a { color: var(--blue-700); text-underline-offset: 3px; }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--yellow-500); outline-offset: 2px; }
::selection { background: var(--green-100); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 16px; top: -48px; z-index: var(--z-skip-link);
  padding: 10px 14px; border-radius: var(--radius);
  background: var(--yellow-500); color: var(--navy-950); font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 12px; }

.icon { width: 18px; height: 18px; flex: 0 0 auto; }

.topbar {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  max-width: 1600px; margin: 0 auto; padding: 0 24px;
  height: var(--topbar);
  display: flex; align-items: center; gap: 28px;
}
.is-editor .topbar-inner { max-width: none; }
.brand {
  display: flex; align-items: center; gap: var(--brand-gap); text-decoration: none; flex: 0 0 auto;
}
.brand-logo { display: block; width: auto; }
.brand-ocrsd { height: var(--ocrsd-height); }
.brand-labrec { height: var(--labrec-height); }
.brand-divider { flex: 0 0 auto; width: 1px; height: calc(var(--ocrsd-height) * 0.7); background: var(--line-strong); }
.nav { display: flex; align-items: center; gap: 2px; min-width: 0; }
.nav a, .menu > summary {
  display: inline-flex; align-items: center; gap: 6px; height: 36px;
  padding: 0 12px; border-radius: var(--radius);
  color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 0.875rem; white-space: nowrap;
  transition: background-color 0.15s, color 0.15s;
}
.nav a:hover, .menu > summary:hover { background: var(--surface-2); color: var(--ink); }
.nav a[aria-current="page"], .menu > summary.is-current { background: var(--blue-50); color: var(--blue-800); box-shadow: inset 0 -2px 0 var(--blue-700); }
.nav-static { color: var(--ink-2); font-weight: 600; font-size: 0.875rem; }
.nav-menus { display: flex; gap: 2px; margin-left: auto; }
.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; color: var(--muted); }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary .icon { width: 15px; height: 15px; transition: transform 0.15s; }
.menu[open] > summary { background: var(--surface-2); color: var(--ink); }
.menu[open] > summary .icon { transform: rotate(180deg); }
.menu > summary.btn { color: var(--ink); height: 38px; }
.menu > summary.btn .icon { transform: none; width: 18px; height: 18px; }
.menu-list {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: var(--z-dropdown); min-width: 260px;
  display: flex; flex-direction: column; gap: 2px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.menu-list a, .menu-list button {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 9px 10px;
  border: 0; border-radius: var(--radius); background: transparent; color: var(--ink);
  text-align: left; text-decoration: none; font-size: 0.875rem; font-weight: 600; cursor: pointer;
}
.menu-list a:hover, .menu-list button:hover { background: var(--blue-50); }
.menu-list .icon { margin-top: 1px; color: var(--blue-700); }
.menu-list span { display: flex; flex-direction: column; }
.menu-list small { color: var(--muted); font-weight: 400; font-size: 0.75rem; }
.menu-list .menu-danger, .menu-list .menu-danger .icon { color: var(--red-700); }
.menu-list .menu-danger:hover { background: var(--red-50); }

.page { flex: 1; width: 100%; max-width: 1600px; margin: 0 auto; padding: 28px 24px 64px; }

.footer { background: #c4c6c6; color: var(--ink-2); font-size: 0.8rem; }
.footer-inner {
  max-width: 1600px; margin: 0 auto; padding: 16px 24px;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px 24px;
}
.footer-text { display: flex; flex-direction: column; gap: 4px; }
.footer-logo { display: block; width: auto; height: 46px; }
.footer b { color: var(--navy-900); }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 32px; margin-bottom: 26px; flex-wrap: wrap; }
.page-intro { max-width: 760px; }
.eyebrow { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-600); margin-bottom: 6px; }
.page-head h1 { font-size: 1.5rem; font-weight: 750; letter-spacing: -0.02em; margin-bottom: 6px; }
.lead { color: var(--muted); font-size: 0.9375rem; max-width: 72ch; }
.lead-small { color: var(--muted); font-size: 0.875rem; }
.page-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }

.breadcrumb { display: flex; gap: 8px; align-items: center; font-size: 0.82rem; color: var(--muted); margin-bottom: 10px; flex-wrap: wrap; }
.breadcrumb a { color: var(--blue-700); text-decoration: none; font-weight: 600; }
.breadcrumb a:hover { text-decoration: underline; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 38px; padding: 0 14px;
  border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--surface); color: var(--ink);
  font-size: 0.875rem; font-weight: 650; line-height: 1.2; text-decoration: none; white-space: nowrap;
  cursor: pointer; box-shadow: var(--shadow-sm);
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.btn:hover { background: var(--surface-2); border-color: #a9bcc8; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn small { color: var(--muted); font-weight: 500; }
.btn-primary { background: var(--green-600); border-color: var(--green-600); color: #fff; }
.btn-primary:hover { background: var(--green-700); border-color: var(--green-700); }
.btn-primary small { color: rgb(255 255 255 / 75%); }
.btn-danger { color: var(--red-700); border-color: var(--red-100); }
.btn-danger:hover { background: var(--red-50); border-color: #e3aeb3; }
.btn-sm { min-height: 32px; padding: 0 10px; font-size: 0.8125rem; gap: 6px; }
.btn-sm .icon { width: 16px; height: 16px; }
.btn-lg { min-height: 46px; font-size: 0.95rem; }
.btn-block { width: 100%; }
.btn-icon { padding: 0; width: 32px; }
.icon-btn {
  display: inline-grid; place-items: center; flex: 0 0 auto;
  width: 34px; height: 34px; border: 0; border-radius: 8px;
  background: transparent; color: var(--muted); cursor: pointer;
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }

.field { display: flex; flex-direction: column; gap: 6px; font-size: 0.8125rem; font-weight: 650; color: var(--ink-2); min-width: 0; }
.field output { font-weight: 700; color: var(--green-700); }

input, select, textarea {
  width: 100%; min-width: 0;
  border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--surface); color: var(--ink);
  font-size: 0.9rem; font-weight: 400;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input, select { height: 40px; padding: 0 12px; }
textarea { padding: 10px 12px; min-height: 76px; resize: vertical; line-height: 1.45; }
select {
  appearance: none; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d6f7f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 16px;
}
input:hover, select:hover, textarea:hover { border-color: #a9bcc8; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--green-600); box-shadow: 0 0 0 3px rgb(8 127 80 / 16%); }
input:disabled, select:disabled, textarea:disabled { background: var(--surface-2); color: var(--muted); cursor: not-allowed; }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; padding: 0; margin: 0; accent-color: var(--green-600); flex: 0 0 auto; }
input[type="range"] { height: 26px; padding: 0; border: 0; background: transparent; accent-color: var(--green-600); box-shadow: none; }
input[type="color"] { padding: 4px; cursor: pointer; }
input[type="file"] { height: auto; padding: 7px; }
input[type="file"]::file-selector-button {
  margin-right: 12px; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 6px;
  background: var(--surface-2); color: var(--ink); font-weight: 600; cursor: pointer;
}
input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
[aria-invalid="true"] { border-color: var(--red-700) !important; }
.hint { font-size: 0.75rem; font-weight: 400; color: var(--muted); }
.code { font-family: var(--mono); font-size: 0.78rem; min-height: 120px; }

.check { display: flex; align-items: center; gap: 10px; font-size: 0.875rem; font-weight: 400; color: var(--ink); cursor: pointer; }
.check-row { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 16px 0 4px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.grid-2 + .field, .grid-3 + .field { margin-top: 16px; }
.align-end { align-items: end; }
.form-stack { display: flex; flex-direction: column; gap: 16px; }
.form-stack.compact { gap: 12px; }

.search-field { position: relative; display: flex; align-items: center; flex: 1; min-width: 180px; }
.search-field .icon { position: absolute; left: 11px; width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.search-field input { padding-left: 34px; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.card-head h2 { font-size: 1rem; }
.card-head p { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }

.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line);
  font-size: 0.72rem; font-weight: 700; white-space: nowrap;
}
.tag-green { background: var(--green-50); color: var(--green-700); border-color: var(--green-100); }
.tag-blue { background: var(--blue-50); color: var(--blue-700); border-color: var(--blue-100); }
.tag-yellow { background: var(--yellow-50); color: var(--yellow-800); border-color: var(--yellow-100); }
.tag-red { background: var(--red-50); color: var(--red-700); border-color: var(--red-100); }

.status {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 3px 10px 3px 8px; border-radius: 999px;
  font-size: 0.75rem; font-weight: 700; white-space: nowrap;
  background: var(--surface-2); color: var(--ink-2);
}
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-succeeded { background: var(--green-50); color: var(--green-700); }
.status-queued, .status-running { background: var(--yellow-50); color: var(--yellow-800); }
.status-running::before { animation: pulse 1.2s ease-in-out infinite; }
.status-failed { background: var(--red-50); color: var(--red-700); }
.status-cancelled, .status-expired { background: #eef1f3; color: #55636f; }

.notice {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; margin-bottom: 18px; border: 1px solid; border-radius: var(--radius);
  font-size: 0.875rem;
}
.notice .icon { margin-top: 1px; }
.notice-warning { background: var(--yellow-50); border-color: var(--yellow-100); color: var(--yellow-800); }

.empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 24px; text-align: center; color: var(--muted); }
.empty h3 { font-size: 1.05rem; }
.empty .btn { margin-top: 8px; }
.empty-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--green-50); color: var(--green-600); }
.empty-icon .icon { width: 26px; height: 26px; }
.empty-hint { padding: 14px; color: var(--muted); font-size: 0.85rem; text-align: center; }

.spinner {
  display: inline-block; width: 15px; height: 15px; flex: 0 0 auto;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: spin 0.7s linear infinite; opacity: 0.85;
}
.spinner-lg { width: 32px; height: 32px; border-width: 3px; color: var(--green-500); }
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline-block; }

.flow { list-style: none; padding: 0; margin: -6px 0 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.flow li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 6px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--muted); font-size: 0.82rem; font-weight: 600;
}
.flow b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-2); color: var(--ink-2); font-size: 0.75rem; }
.flow .is-current { border-color: var(--green-100); background: var(--green-50); color: var(--green-700); }
.flow .is-current b { background: var(--green-600); color: #fff; }

.model-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 20px; }
.model-card { display: flex; flex-direction: column; overflow: hidden; transition: box-shadow 0.2s, transform 0.2s; }
.model-card:hover { box-shadow: 0 2px 4px rgb(16 44 70 / 6%), 0 18px 40px rgb(16 44 70 / 10%); transform: translateY(-2px); }
.model-thumb {
  height: 220px; padding: 20px 20px 0; overflow: hidden;
  display: flex; justify-content: center;
  background: linear-gradient(110deg, #e3eaee 8%, #eef3f5 18%, #e3eaee 33%) 0 0 / 200% 100%;
  animation: shine 1.6s linear infinite;
  border-bottom: 1px solid var(--line);
}
.model-thumb img { width: 78%; height: auto; align-self: flex-start; background: #fff; box-shadow: 0 6px 22px rgb(16 44 70 / 22%); }
.model-body { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; flex: 1; }
.model-body h2 { font-size: 1.08rem; letter-spacing: -0.01em; }
.model-body > p { color: var(--muted); font-size: 0.85rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.model-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 2px 0 6px; font-size: 0.78rem; }
.model-meta dt { color: var(--muted); }
.model-meta dd { margin: 0; font-weight: 650; color: var(--ink-2); }
.model-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: auto; }
.model-actions .btn { white-space: normal; text-align: center; }
.model-actions form { grid-column: 1 / -1; }
.model-actions form .btn { width: 100%; }
.model-new {
  min-height: 420px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 24px; border: 1.5px dashed var(--line-strong); border-radius: var(--radius-lg);
  background: rgb(255 255 255 / 55%); color: var(--ink); text-align: center; cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.model-new:hover { border-color: var(--green-600); background: var(--green-50); }
.model-new { text-decoration: none; }
.model-new small { max-width: 240px; color: var(--muted); }
.model-new-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--green-50); color: var(--green-600); }
.model-new-icon .icon { width: 28px; height: 28px; }

.generation { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 24px; align-items: start; }
.generation-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.generation-side { position: sticky; top: calc(var(--topbar) + 20px); display: flex; flex-direction: column; gap: 16px; }
.section-card { padding: 22px 24px 24px; }
.section-card + .section-card { margin-top: 0; }
.section-title { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.section-title h2 { font-size: 1.02rem; }
.section-title p { font-size: 0.82rem; color: var(--muted); margin-top: 2px; }
.step {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--green-50); color: var(--green-700); font-weight: 800; font-size: 0.9rem;
  box-shadow: inset 0 0 0 1px var(--green-100);
}
.step .icon { width: 17px; height: 17px; }
.field-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.field-toolbar-actions { display: flex; gap: 8px; }
.field-count { margin: 14px 0 8px; font-size: 0.82rem; color: var(--muted); }
.field-count b { color: var(--ink); }
.field-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px;
  max-height: 320px; overflow: auto; padding: 6px 14px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2);
}
.field-grid .check { padding: 8px 0; align-items: flex-start; border-bottom: 1px solid #e8eef1; }
.field-grid .check input { margin-top: 2px; }
.field-grid .check span { display: flex; flex-direction: column; min-width: 0; }
.field-grid small { font-family: var(--mono); font-size: 0.7rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.advanced { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.advanced summary {
  cursor: pointer; font-size: 0.85rem; font-weight: 700; color: var(--blue-700);
  list-style: none; display: flex; align-items: center; gap: 8px;
}
.advanced summary::-webkit-details-marker { display: none; }
.advanced summary::before { content: "▸"; transition: transform 0.15s; }
.advanced[open] summary::before { transform: rotate(90deg); }
.advanced[open] summary { margin-bottom: 14px; }

.preview-card { overflow: hidden; }
.preview-stage { display: flex; justify-content: center; align-items: flex-start; padding: 18px; background: var(--stage); max-height: 560px; overflow: auto; }
.preview-stage img { display: block; width: 100%; height: auto; background: #fff; box-shadow: 0 8px 26px rgb(0 0 0 / 35%); }
.cta-card { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; border-color: #bfe0cd; background: linear-gradient(180deg, #f8fcfa, #fff); }
.summary-main { font-size: 1.02rem; }
.summary-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: 0.8rem; color: var(--muted); }
.summary-list .is-warning { color: var(--red-700); font-weight: 700; }
.job-card { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.job-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.job-head b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-meta { font-size: 0.8rem; color: var(--muted); }
.job-error { font-size: 0.85rem; color: var(--red-700); }
.job-actions:empty { display: none; }
progress { width: 100%; height: 8px; border: 0; border-radius: 999px; overflow: hidden; background: #e3eaee; appearance: none; accent-color: var(--green-600); }
progress::-webkit-progress-bar { background: #e3eaee; border-radius: 999px; }
progress::-webkit-progress-value { background: var(--green-500); border-radius: 999px; transition: width 0.3s; }
progress::-moz-progress-bar { background: var(--green-500); border-radius: 999px; }
.wizard { max-width: 1560px; margin: 0 auto 64px; }
.wizard-fields-page { margin-bottom: 0; }
.wizard-fields-page .wizard-heading { margin: 0 0 12px; }
.wizard-fields-page .wizard-heading h1 { margin: 0; font-size: 1.2rem; }
.wizard-fields-page .wizard-heading .eyebrow, .wizard-fields-page .wizard-heading p { display: none; }
body:has(.wizard-fields-page) .page { padding-bottom: 12px; }
.is-wizard:has(.wizard-fields-page) .footer { display: none; }
.wizard-heading { margin: 22px 0 26px; }
.wizard-heading h1 { margin: 5px 0 4px; color: #12345a; }
.wizard-heading p, .wizard-section-heading p { color: #64748b; margin: 0; }
.wizard .eyebrow { color: #087f50; font-size: .72rem; font-weight: 800; letter-spacing: .1em; }
.wizard-steps { position: sticky; top: var(--topbar); z-index: var(--z-sticky); display: grid; grid-template-columns: repeat(5, 1fr); margin: 0 0 20px; padding: 10px 8px; gap: 0; background: #f4f7f7f2; border: 1px solid var(--line); border-radius: 10px; backdrop-filter: blur(8px); }
.wizard-step { position: relative; text-align: center; color: #64748b; font-size: .82rem; font-weight: 650; }
.wizard-step:not(:last-child)::after { content: ''; position: absolute; left: calc(50% + 25px); right: calc(-50% + 25px); top: 18px; height: 2px; background: #e2e8f0; }
.wizard-step.is-done::after { background: #087f50; }
.wizard-step a, .wizard-step-inner { display: flex; flex-direction: column; align-items: center; gap: 7px; color: inherit; text-decoration: none; }
.wizard-step.is-current { color: #16446f; font-weight: 800; }
.wizard-step.is-done { color: #087f50; }
.wizard-number { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 2px solid #cbd5e1; background: #fff; font-weight: 800; font-size: .95rem; }
.wizard-step.is-current .wizard-number { background: #16446f; border-color: #16446f; color: #fff; box-shadow: 0 0 0 5px #eaf2fc; }
.wizard-step.is-done .wizard-number { background: #087f50; border-color: #087f50; color: #fff; }
.wizard-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .9fr); gap: 22px; align-items: start; }
.wizard-layout-wide { display: block; }
.wizard-layout-fields { grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); height: max(480px, calc(100dvh - var(--topbar) - 185px)); align-items: stretch; }
.wizard-layout-fields .wizard-panel, .wizard-layout-fields .wizard-preview { min-height: 0; height: 100%; }
.wizard-layout-fields .wizard-panel { display: flex; flex-direction: column; padding-bottom: 0; }
.wizard-layout-fields .wizard-section-heading { margin-bottom: 14px; }
.wizard-layout-fields form[data-field-form] { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.wizard-layout-fields .wizard-field-controls { flex: 0 0 auto; }
.wizard-layout-fields .wizard-field-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -12px; padding: 0 12px; }
.wizard-layout-fields .wizard-actions { flex: 0 0 auto; margin: 0 -28px; padding: 12px 28px; border-top: 1px solid var(--line); background: #fff; }
.wizard-panel, .wizard-review { padding: 28px; min-width: 0; }
.wizard-section-heading { margin-bottom: 24px; }
.wizard-section-heading h2 { margin: 0 0 5px; color: #172b45; }
.wizard-panel h3 { margin: 26px 0 12px; }
.wizard-org-group { margin: 0 0 16px; }
.wizard-org-group > summary { cursor: pointer; font-weight: 650; padding: 6px 0; color: #172b45; list-style: revert; }
.wizard-org-group > summary small { font-weight: 400; color: #64748b; margin-left: 6px; }
.wizard-org-planned { margin: 8px 2px 0; color: var(--muted); font-size: .82rem; }
.wizard-model-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; margin-top: 8px; }
.wizard-model { position: relative; display: flex; flex-direction: column; min-width: 0; border: 2px solid #e2e8f0; border-radius: 12px; overflow: hidden; background: #fff; }
.wizard-model:hover, .wizard-model:focus-within, .wizard-model.is-selected { border-color: #16446f; box-shadow: 0 0 0 3px #eaf2fc; }
.wizard-model-link { display: flex; flex-direction: column; min-width: 0; text-decoration: none; color: #172b45; }
.wizard-model-thumb { display: grid; place-items: center; height: 135px; padding: 8px; background: #f4f7f7; overflow: hidden; }
.wizard-model-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 3px 10px #172b4529; }
.wizard-model-detail { display: flex; flex-direction: column; gap: 3px; padding: 10px; }
.wizard-model-detail b { font-size: .84rem; line-height: 1.35; }
.wizard-model-detail small, .wizard-choice small, .wizard-style-copy small { color: #64748b; }
.wizard-model-actions { position: absolute; top: 8px; right: 8px; display: flex; flex-direction: column; gap: 6px; opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity .15s, transform .15s; }
.wizard-model:hover .wizard-model-actions, .wizard-model:focus-within .wizard-model-actions { opacity: 1; pointer-events: auto; transform: none; }
.wizard-model-action { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; background: #fff; color: #172b45; box-shadow: 0 2px 6px #172b4533; }
.wizard-model-action:hover, .wizard-model-action:focus-visible { background: #16446f; color: #fff; }
.wizard-model-action .icon { width: 15px; height: 15px; }
@media (hover: none) { .wizard-model-actions { opacity: 1; pointer-events: auto; transform: none; } }
.wizard-model-description { margin: 14px 0 0; color: var(--muted); line-height: 1.5; }
.wizard-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.wizard-model-summary { margin: 18px 0 0; color: var(--muted); }
.wizard-model-summary b { color: var(--ink); }
.result-details-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.wizard-choice { display: flex; gap: 11px; align-items: flex-start; padding: 16px; border: 1px solid #e2e8f0; border-radius: 10px; cursor: pointer; }
.wizard-choice:has(input:checked) { border-color: #16446f; background: #eaf2fc; }
.wizard-choice input { margin-top: 3px; accent-color: #16446f; }
.wizard-choice span { display: flex; flex-direction: column; gap: 4px; }
.wizard-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 28px; }
.wizard-actions .btn-primary { background: #087f50; border-color: #087f50; }
.wizard-preview { overflow: hidden; min-width: 0; display: flex; flex-direction: column; }
.wizard-preview .card-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wizard-preview .card-head h2 { margin: 0; }
.wizard-pdf-controls { display: flex; align-items: center; gap: 3px; }
.wizard-pdf-controls .zoom-value { min-width: 42px; font-size: .72rem; }
.wizard-pdf-stage { position: relative; flex: 1; min-height: 0; overflow: auto; background: #e9eef1; padding: 14px; overscroll-behavior: contain; }
.wizard-layout:not(.wizard-layout-fields) .wizard-pdf-stage { flex: none; height: min(70dvh, 760px); }
.wizard-pdf-stage > div:first-child { display: flex; justify-content: center; min-width: 100%; width: max-content; }
.wizard-pdf { position: relative; width: min(100%, 850px); flex: 0 0 auto; line-height: 0; box-shadow: 0 5px 18px #172b4526; }
.wizard-pdf > img { display: block; width: 100%; height: auto; }
.wizard-overlay { position: absolute; inset: 0; }
.wizard-box { position: absolute; border: 1px solid #94a3b8; background: #16446f0d; padding: 0; cursor: pointer; }
.wizard-overlay span.wizard-box { cursor: default; pointer-events: none; }
.wizard-box.is-selected { border: 2px solid #087f50; background: #087f5040; box-shadow: inset 0 0 0 1px #ffffffb3; z-index: 1; }
.wizard-box.is-hovered, .wizard-box:hover, .wizard-box:focus-visible { border: 2px solid #f6c84e; background: #f6c84e40; z-index: 2; }
.wizard-box.is-located { animation: wizard-locate 1.1s ease-out; z-index: 3; }
@keyframes wizard-locate { 0%, 60% { box-shadow: 0 0 0 4px #087f5066, inset 0 0 0 1px #ffffffb3; } 100% { box-shadow: inset 0 0 0 1px #ffffffb3; } }
.wizard-field.is-hovered { background: #fff8e1; }
.wizard-field.is-located { animation: wizard-entry 1.1s ease-out; }
@keyframes wizard-entry { 0%, 50% { background: #f6c84e55; } }
.wizard-pdf-stage.is-panning, .wizard-pdf-stage.is-panning * { cursor: grabbing; user-select: none; }
.wizard-preview-loading { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); background: #fff; padding: 8px 12px; border-radius: 8px; box-shadow: var(--shadow-lg); }
.wizard-preview-loading.is-visible { display: inline-block; opacity: 1; }
.wizard-preview:fullscreen { width: 100vw; max-width: none; height: 100dvh; background: #fff; }
.wizard-edit-mapping { margin-top: 12px; }
.wizard-field-toolbar { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.wizard-field-toolbar .search-field { flex: 1; min-width: 180px; }
.wizard-field-toolbar span { color: #64748b; font-size: .85rem; }
.wizard-bulk, .wizard-shortcuts, .wizard-extra-links { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.wizard-field-group { border-top: 1px solid #e2e8f0; padding: 10px 0; }
.wizard-field-group summary { cursor: pointer; font-weight: 700; color: #172b45; }
.wizard-field-group summary small { margin-left: 6px; color: #64748b; font-weight: 400; }
.wizard-field-items { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; padding: 8px 0 0; }
.wizard-group-select { padding: 6px 8px; color: var(--blue-700); font-weight: 650; }
.wizard-selected-filter { white-space: nowrap; font-size: .8rem; }
.wizard-field { padding: 10px 8px; border-radius: 7px; min-height: 42px; }
.wizard-field:hover { background: #f4f7f7; }
.wizard-field:has(input:checked) { background: #e7f5ee; }
.wizard-field[hidden] { display: none; }
.wizard-field-group[hidden] { display: none; }
.wizard-field span { min-width: 0; overflow-wrap: anywhere; }
.wizard-field small { display: block; color: #64748b; font-size: .7rem; overflow: hidden; text-overflow: ellipsis; }
.wizard-count { max-width: 360px; }
.wizard-count input { font-size: 1.55rem; font-weight: 700; }
.wizard-style-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.wizard-style { border: 2px solid #e2e8f0; border-radius: 12px; overflow: hidden; cursor: pointer; }
.wizard-style:has(input:checked) { border-color: #16446f; box-shadow: 0 0 0 3px #eaf2fc; }
.wizard-style input { position: absolute; opacity: 0; }
.wizard-style:has(input:focus-visible) { outline: 3px solid #f6c84e; }
.wizard-style-image { display: grid; place-items: center; height: 90px; padding: 10px; background: #f4f7f7; }
.wizard-style-image img { display: block; width: 100%; max-height: 100%; object-fit: contain; }
.wizard-style-copy { display: flex; flex-direction: column; gap: 4px; padding: 12px; }
.wizard-style.is-incompatible { cursor: not-allowed; border-style: dashed; }
.wizard-style.is-incompatible .wizard-style-image { opacity: .45; }
.wizard-style-copy .wizard-style-conflict { display: flex; align-items: flex-start; gap: 6px; margin-top: 4px; color: #8a1c1c; font-size: .72rem; line-height: 1.35; }
.wizard-style-conflict .icon { flex: 0 0 14px; width: 14px; height: 14px; margin-top: 1px; }
.wizard-style-conflict span { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.wizard-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px; }
.wizard-comparison figure { margin: 0; min-width: 0; }
.wizard-comparison img { width: 100%; height: auto; }
.wizard-comparison figcaption { text-align: center; color: #64748b; font-size: .78rem; }
.wizard-review { max-width: 790px; margin: auto; }
.review-list { margin: 0; }
.review-list > div { display: grid; grid-template-columns: 150px 1fr; padding: 14px 0; border-bottom: 1px solid #e2e8f0; }
.review-list dt { color: #64748b; }
.review-list dd { display: flex; justify-content: space-between; gap: 12px; margin: 0; font-weight: 700; }
.review-list a { font-weight: 500; }
.export-form { display: flex; align-items: end; gap: 8px; flex-wrap: wrap; }
.export-form label { display: flex; flex-direction: column; gap: 3px; color: #64748b; font-size: .72rem; }
.export-form input { width: 160px; min-height: 36px; border: 1px solid #e2e8f0; border-radius: 7px; padding: 0 9px; }
.results-library { max-width: 1500px; margin: 0 auto; }
.results-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; }
.results-head h1 { margin: 0; font-size: 1.55rem; color: var(--navy-900); }
.results-filters { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.results-filters .search-field { flex: 1 1 270px; max-width: 430px; }
.results-filters select { min-width: 150px; min-height: 40px; }
.results-list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.results-table { min-width: 1000px; table-layout: fixed; }
.results-count-col { width: 64px; }
.results-model-col { width: 150px; }
.results-date-col { width: 150px; }
.results-time-col { width: 86px; }
.results-open-col, .results-download-col { width: 68px; }
.results-share-col { width: 108px; }
.results-details-col { width: 80px; }
.results-table th { background: #f8fafb; }
.table.results-table th { padding: 8px 6px; letter-spacing: .03em; font-size: .62rem; white-space: nowrap; }
.table.results-table td { height: 50px; padding: 8px 6px; }
.results-table td, .results-table th { text-align: center; vertical-align: middle; }
.results-dataset { min-width: 0; }
.result-name-cell { display: grid; grid-template-columns: 26px minmax(0, 1fr) 26px; align-items: center; column-gap: 8px; width: 100%; min-width: 0; height: 32px; text-align: center; }
.result-name { grid-column: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; cursor: text; }
.result-name:focus-visible { outline: 2px solid var(--blue-700); outline-offset: 3px; border-radius: 3px; }
.result-status-dot { grid-column: 1; justify-self: start; display: block; box-sizing: border-box; width: 10px; height: 10px; border-radius: 50%; background: #94a3b8; border: 1px solid #64748b; cursor: help; }
.result-status-dot:focus-visible { outline: 2px solid var(--blue-700); outline-offset: 3px; }
.status-dot-succeeded { background: #087f50; border-color: #087f50; }
.status-dot-running { background: #2563a5; border-color: #2563a5; }
.status-dot-queued { background: #f6c84e; border-color: #b98900; }
.status-dot-failed { background: #c2414b; border-color: #c2414b; }
.status-dot-cancelled, .status-dot-expired { background: #64748b; border-color: #64748b; }
.result-rename-control { grid-column: 3; width: 26px; height: 26px; opacity: .45; }
.result-name-cell:hover .result-rename-control, .result-rename-control:focus-visible { opacity: 1; }
.result-rename-form { grid-column: 2 / 4; grid-row: 1; display: flex; align-items: center; min-width: 0; height: 32px; margin: 0; }
.result-rename-form[hidden], .result-name[hidden], .result-rename-control[hidden] { display: none; }
.result-rename-form input { box-sizing: border-box; width: 100%; min-width: 0; height: 30px; min-height: 30px; margin: 0; padding: 0 8px; font: inherit; font-weight: 600; text-align: left; }
.result-rename-form input[readonly] { opacity: .7; }
.results-duration { white-space: nowrap; font-variant-numeric: tabular-nums; }
.results-heading-combined { position: relative; display: flex; align-items: center; justify-content: center; padding: 0 30px; }
.results-heading-combined .menu { position: absolute; top: 0; right: 0; bottom: 0; display: flex; align-items: center; }
.table-sort { position: relative; display: inline-flex; align-items: center; border: 0; padding: 5px 0; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.table-sort:hover, .table-sort:focus-visible { color: var(--blue-700); }
.table-sort-mark { position: absolute; top: 50%; left: calc(100% + 3px); font-size: .9rem; line-height: 1; translate: 0 -50%; }
.results-heading-combined .menu > summary { width: 26px; height: 26px; display: grid; place-items: center; }
.results-heading-combined .menu > summary.is-filtered { color: var(--blue-700); background: var(--blue-50); }
.results-heading-combined .menu-list { position: fixed; top: 0; left: 0; right: auto; min-width: 190px; z-index: var(--z-popover); text-align: left; letter-spacing: 0; text-transform: none; }
.results-heading-combined .menu-list b { padding: 6px 8px; color: var(--ink); font-size: .75rem; }
.results-heading-combined .menu-list label { display: flex; align-items: center; gap: 8px; padding: 6px 8px; cursor: pointer; font-size: .8rem; font-weight: 500; color: var(--ink); }
.results-heading-combined .menu-list label:hover { background: var(--blue-50); }
.results-action { margin: auto; width: 34px; height: 34px; display: grid; place-items: center; color: var(--blue-700); }
.results-action-placeholder { color: #cbd5e1; cursor: default; }
.result-tree-row .menu-list { position: fixed; top: 0; right: auto; left: 0; z-index: var(--z-popover); }
.results-pagination { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: .82rem; }
.results-pagination div { display: flex; gap: 8px; }
.results-empty { display: grid; justify-items: center; gap: 9px; padding: 70px 20px; text-align: center; }
.results-empty > span { color: var(--blue-700); }
.results-empty h2 { margin: 0; font-size: 1.05rem; }
.results-empty p { margin: 0 0 10px; color: var(--muted); }
body.is-result-detail .page { max-width: none; padding: 0; min-height: 0; height: calc(100dvh - var(--topbar) - 1px); }
.result-page { display: flex; flex-direction: column; height: calc(100dvh - var(--topbar) - 1px); min-height: 0; }
.result-toolbar { height: 56px; min-height: 56px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: #fff; border-bottom: 1px solid var(--line); }
.result-toolbar-title, .result-toolbar-actions { display: flex; align-items: center; gap: 9px; min-width: 0; }
.result-toolbar-title h1 { margin: 0; font-size: .96rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-toolbar-actions { flex: 0 0 auto; }
.result-toolbar .status { font-size: .7rem; }
.result-workspace { display: grid; grid-template-columns: 242px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); flex: 1 1 0; min-height: 0; background: #e9eef1; }
.result-workspace.is-tree-collapsed { grid-template-columns: 0 minmax(0, 1fr); }
.result-tree { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: #fff; border-right: 1px solid var(--line); overflow: hidden; }
.is-tree-collapsed .result-tree { visibility: hidden; }
.result-tree-head { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 12px 0 16px; border-bottom: 1px solid var(--line); font-size: .83rem; }
.result-tree-head b { margin-right: auto; }
.result-tree-head span { color: var(--muted); font-size: .73rem; }
.result-tree .search-field { flex: 0 0 auto; margin: 10px; }
.result-tree .search-field[hidden] { display: none; }
.result-tree-list { flex: 1; min-height: 0; overflow-y: auto; padding: 8px; }
.result-tree-row { display: flex; align-items: center; gap: 2px; border-radius: 7px; }
.result-tree-row:hover { background: #f4f7f7; }
.result-tree-row.is-active { background: var(--blue-50); }
.result-tree-row > a { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; padding: 9px 8px; color: var(--ink); text-decoration: none; font-size: .82rem; }
.result-tree-row.is-active > a { color: var(--blue-700); font-weight: 750; }
.result-tree-row > a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-tree-row .icon { flex: 0 0 auto; }
.result-tree-row .menu { margin-right: 4px; }
.result-tree-row .menu summary { width: 26px; height: 26px; }
.result-tree-row[hidden] { display: none; }
.result-reader { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.reader-toolbar { display: flex; align-items: center; gap: 2px; min-height: 48px; padding: 6px 8px; background: #fff; border-bottom: 1px solid var(--line); }
.reader-counter { min-width: 70px; text-align: center; color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.tool.is-disabled, .btn.is-disabled { opacity: .35; pointer-events: none; }
.btn.is-disabled[data-tooltip] { pointer-events: auto; cursor: not-allowed; }
.reader-stage { flex: 1 1 0; min-height: 0; contain: size; overflow: auto; scrollbar-gutter: stable; display: flex; flex-direction: column; gap: 20px; padding: 20px; background: #e9eef1; cursor: grab; overscroll-behavior: contain; }
.reader-stage:focus-visible { outline: 3px solid var(--blue-500); outline-offset: -3px; }
.result-live-update { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 5px 14px; background: #eaf2fc; color: #16446f; font-size: .75rem; border-bottom: 1px solid #d5e3f3; }
.result-live-update .spinner { width: 13px; height: 13px; }
.result-live-update progress { width: min(180px, 35vw); height: 5px; }
.result-live-update details { margin-left: auto; }
.reader-stage.is-panning { cursor: grabbing; user-select: none; }
.reader-stage img { display: block; width: min(100%, 950px); max-width: none; height: auto; flex: 0 0 auto; margin-inline: auto; background: #fff; box-shadow: 0 6px 24px #172b4533; user-select: none; -webkit-user-drag: none; }
.result-workspace:fullscreen { background: #e9eef1; }
.result-workspace:fullscreen .result-reader { height: 100dvh; }
.result-workspace:fullscreen .reader-stage { flex: 1; }
.result-state { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 0; padding: 28px; background: #f4f7f7; text-align: center; }
.result-state h2 { margin: 0; font-size: 1.2rem; }
.result-state p { margin: 0; color: var(--muted); max-width: 550px; }
.result-state progress { max-width: 360px; }
.result-state-actions { display: flex; gap: 10px; margin-top: 8px; }
.result-state details { max-width: 560px; text-align: left; font-size: .82rem; }
.result-state details summary { cursor: pointer; color: var(--blue-700); }
.result-state details dl, .result-details-list { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 18px; }
.result-state details dt, .result-details-list dt { color: var(--muted); }
.result-state details dd, .result-details-list dd { margin: 0; overflow-wrap: anywhere; }
.document-info-dialog { width: min(900px, calc(100vw - 40px)); }
.document-info-actions { display: flex; gap: 8px; margin-bottom: 14px; }
.metadata-table-scroll { max-height: min(50vh, 500px); overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.metadata-table { min-width: 0; }
.metadata-table th, .metadata-table td { padding: 8px 12px; vertical-align: top; overflow-wrap: anywhere; }
.metadata-table tbody th { width: 40%; font-weight: 600; }
.metadata-raw { margin-top: 16px; }
.metadata-raw summary { cursor: pointer; color: var(--blue-700); font-weight: 700; }
.metadata-raw textarea { display: block; width: 100%; min-height: 230px; margin-top: 8px; font-family: var(--mono); font-size: .75rem; }
@media (max-width: 900px) { .result-toolbar-actions .btn { font-size: 0; gap: 0; } .result-toolbar-actions .btn .icon { width: 18px; height: 18px; } .result-workspace { grid-template-columns: 200px minmax(0, 1fr); } .reader-toolbar [data-pdf-action='center'], .reader-toolbar [data-pdf-action='fit-width'] { display: none; } }
@media (max-width: 650px) { body.is-result-detail .page, .result-page { height: calc(100dvh - 102px); } .result-toolbar { padding: 0 8px; } .result-toolbar-title .status { display: none; } .result-workspace { display: block; position: relative; } .result-tree { display: none; position: absolute; z-index: 10; top: 0; bottom: 0; left: 0; width: min(260px, 85vw); box-shadow: 8px 0 22px #172b4526; } .result-workspace.is-tree-open .result-tree { display: flex; visibility: visible; } .result-reader { height: 100%; } .reader-toolbar { padding: 0 5px; gap: 4px; } .reader-counter { min-width: 60px; } .reader-stage { padding: 12px; } }
@media (max-width: 800px) { .wizard-layout { grid-template-columns: 1fr; } .wizard-layout-fields { height: auto; } .wizard-layout-fields .wizard-panel { height: min(620px, calc(100dvh - 170px)); min-height: 420px; } .wizard-layout-fields .wizard-preview { height: min(650px, 75dvh); max-width: none; } .wizard-preview:not(.wizard-layout-fields .wizard-preview) { max-width: 560px; } .wizard-steps { gap: 3px; } .wizard-step { font-size: .68rem; } .wizard-step:not(:last-child)::after { left: calc(50% + 22px); right: calc(-50% + 22px); } }
@media (max-width: 720px) { .wizard-steps { top: 0; } }
@media (max-width: 550px) { .wizard-panel, .wizard-review { padding: 18px; } .wizard-step span:last-child { display: none; } .wizard-step.is-current span:last-child { display: block; } .wizard-field-items { grid-template-columns: 1fr; } .review-list > div { grid-template-columns: 100px 1fr; } }
.config-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.config-bar select { width: 240px; }
.config-bar input { width: 210px; }

.segmented { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 16px; border: 0; }
.segmented legend { float: left; margin-right: 10px; font-size: 0.85rem; font-weight: 700; }
.segmented label { position: relative; cursor: pointer; }
.segmented input { position: absolute; opacity: 0; }
.segmented span { display: inline-block; padding: 7px 16px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 0.85rem; font-weight: 650; background: var(--surface); }
.segmented input:checked + span { background: var(--green-600); border-color: var(--green-600); color: #fff; }
.segmented input:focus-visible + span { outline: 3px solid var(--yellow-500); outline-offset: 2px; }
.before-after { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 16px; border-radius: 12px; background: var(--stage); }
.before-after figure { margin: 0; color: #fff; min-width: 0; }
.before-after figcaption { margin-bottom: 8px; font-size: 0.82rem; font-weight: 650; color: #d8e3e9; }
.before-after img { display: block; width: 100%; max-height: 640px; object-fit: contain; background: #fff; border-radius: 4px; }
.realism-form { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 14px; align-items: end; margin-bottom: 18px; }
.sample-empty {
  display: grid; place-items: center; min-height: 180px; padding: 20px; text-align: center;
  border: 1.5px dashed var(--line-strong); border-radius: var(--radius); background: var(--surface-2); color: var(--muted); font-size: 0.875rem;
}


.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.filters .search-field { width: 260px; flex: 0 1 auto; }
.filters select { width: 190px; }
.table-card { overflow: hidden; }
.table-scroll { overflow-x: auto; }
.table { width: 100%; min-width: 820px; border-collapse: collapse; font-size: 0.875rem; }
.table th {
  padding: 11px 16px; text-align: center; vertical-align: middle; background: var(--surface-2); border-bottom: 1px solid var(--line);
  color: var(--muted); font-size: 0.7rem; font-weight: 750; letter-spacing: 0.07em; text-transform: uppercase;
}
.table td { padding: 13px 16px; border-top: 1px solid var(--line); vertical-align: middle; text-align: center; }
.table tbody tr:first-child td { border-top: 0; }
.table tbody tr:hover { background: #fafcfd; }
.table tr.is-selected { background: var(--green-50); box-shadow: inset 3px 0 0 var(--green-600); }
.table td b { display: block; }
.table td small { display: block; color: var(--muted); }
.num { text-align: center !important; font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: 0.72rem; }
.row-action { text-align: center; width: 1%; }
.viewer-card { overflow: hidden; min-width: 0; }
.viewer-stage { height: clamp(460px, 72vh, 860px); background: var(--stage); display: flex; }
.viewer-stage iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.shares { padding: 14px 20px 18px; border-top: 1px solid var(--line); }
.shares h3 { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; margin-bottom: 6px; }
.shares ul { list-style: none; padding: 0; margin: 0; }
.shares li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid #edf1f3; font-size: 0.82rem; }
.share-state { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.share-state small { color: var(--muted); }
.copy-field { display: flex; gap: 8px; }
.copy-field input { font-family: var(--mono); font-size: 0.78rem; }

.dialog {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 48px);
  padding: 0; border: 0; border-radius: 16px; background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.dialog:has(.dialog-wide) { width: min(1140px, calc(100vw - 32px)); }
.dialog[open] { animation: dialog-in 0.18s ease-out; }
.dialog::backdrop { background: rgb(10 31 49 / 58%); backdrop-filter: blur(2px); }
.dialog-panel { display: flex; flex-direction: column; max-height: calc(100dvh - 48px); }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px 16px 24px; border-bottom: 1px solid var(--line); }
.dialog-head h2 { font-size: 1.1rem; }
.dialog-body { padding: 22px 24px; overflow: auto; }
.dialog-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 24px; border-top: 1px solid var(--line); background: var(--surface-2); flex-wrap: wrap; }

.toasts { position: fixed; right: 20px; bottom: 20px; z-index: var(--z-toast); display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.toast {
  --toast-accent: var(--green-600);
  position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 12px 10px 12px 13px;
  border: 1px solid var(--line); border-left: 4px solid var(--toast-accent); border-radius: 10px; background: #fff; color: var(--ink);
  box-shadow: 0 10px 28px #172b4529; font-size: .84rem; pointer-events: auto; animation: toast-in .2s ease-out; transition: opacity .18s, transform .18s;
}
.toast-erro { --toast-accent: #c2414b; }
.toast-progresso { --toast-accent: var(--blue-700); }
.toast.is-leaving { opacity: 0; transform: translateY(6px); }
.toast[data-notice-href] { cursor: pointer; }
.toast-icon { display: grid; place-items: center; height: 22px; color: var(--toast-accent); }
.toast-icon .icon { width: 18px; height: 18px; }
.toast-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding-top: 2px; }
.toast-title { font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.toast-detail { color: var(--muted); font-size: .78rem; line-height: 1.4; overflow-wrap: anywhere; }
.toast-body progress { width: 100%; height: 5px; }
.toast-body a { width: fit-content; color: var(--blue-700); font-size: .8rem; font-weight: 700; }
.toast-controls { display: flex; align-items: center; gap: 2px; margin: -1px -2px 0 0; }
.toast-timer { width: 16px; height: 16px; rotate: -90deg; }
.toast-timer circle { fill: none; stroke-width: 2.5; }
.toast-timer-track { stroke: #e8edf1; }
.toast-timer-value { stroke: #a3afbf; stroke-dasharray: 100; stroke-dashoffset: 0; }
.toast[data-notice-lifetime="0"] .toast-timer { display: none; }
.toast-close { display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 6px; background: transparent; color: #64748b; cursor: pointer; }
.toast-close:hover, .toast-close:focus-visible { background: var(--surface-2); color: var(--ink); }
.toast-close .icon { width: 15px; height: 15px; }

.error-card, .shared-pending { max-width: 620px; margin: 40px auto; padding: 44px 32px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.error-card h1, .shared-pending h1 { font-size: 1.5rem; }
.error-card .btn { margin-top: 8px; }
.error-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--yellow-50); color: var(--yellow-800); }
.error-icon .icon { width: 28px; height: 28px; }
.shared-pending [data-abrindo] { display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--muted); }
.shared-pending [data-sem-token] { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.shared-viewer .viewer-stage { height: clamp(520px, 78vh, 940px); }


/* Shared tooltip (tooltips.js). The popover top layer keeps it above cards, tables, sticky bars, dialogs and fullscreen viewers. */
.tooltip {
  position: fixed; inset: auto; left: 0; top: 0; z-index: var(--z-tooltip); margin: 0; overflow: visible;
  box-sizing: border-box; width: max-content; max-width: min(260px, calc(100vw - 16px)); padding: 5px 8px; border: 0; border-radius: 6px;
  background: var(--navy-900); color: #fff; box-shadow: 0 4px 14px rgb(13 39 66 / 22%);
  font: 500 0.72rem/1.35 var(--font); letter-spacing: normal; text-transform: none; text-align: center; white-space: normal; overflow-wrap: anywhere;
  pointer-events: none;
}
.tooltip[hidden], .tooltip[popover]:not(:popover-open) { display: none; }
.optional { color: var(--muted); font-weight: 400; font-size: 0.75rem; }

.new-model { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.new-model-head h1 { font-size: 1.5rem; letter-spacing: -0.02em; margin-bottom: 4px; }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.choice-card {
  display: flex; flex-direction: column; gap: 6px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color 0.15s, background-color 0.15s;
}
.choice-card:hover { border-color: var(--blue-500); }
.choice-card[aria-current="true"] { border-color: var(--blue-700); background: var(--blue-50); box-shadow: inset 0 0 0 1px var(--blue-700); }
.choice-card b { font-size: 1rem; }
.choice-card small { color: var(--muted); font-size: 0.8125rem; }
.choice-icon { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 6px; border-radius: 10px; background: var(--blue-50); color: var(--blue-700); }
.choice-card[aria-current="true"] .choice-icon { background: var(--blue-700); color: #fff; }
.form-card { padding: 22px 24px; display: flex; flex-direction: column; gap: 18px; }
.form-card h2 { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; }
.form-card h2 .icon { color: var(--blue-700); }
.form-foot { display: flex; justify-content: flex-end; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.segmented-field { margin: 0; flex-direction: column; align-items: flex-start; }
.segmented-field legend { float: none; margin: 0 0 6px; font-size: 0.8125rem; font-weight: 650; color: var(--ink-2); }
.check-field { align-self: end; min-height: 40px; }
.only-lista, .only-intervalo, .only-mascara, .only-date, .only-document, .only-decimal { display: none; }
.dialog-panel:has(select[name="rule"] option[value="lista"]:checked) .only-lista,
.dialog-panel:has(select[name="rule"] option[value="mascara"]:checked) .only-mascara,
.dialog-panel:has(select[name="base_type"] option[value="date"]:checked) .only-date,
.dialog-panel:has(select[name="base_type"] option[value="document"]:checked) .only-document,
.dialog-panel:has(select[name="base_type"] option[value="decimal"]:checked) .only-decimal { display: flex; }
.dialog-panel:has(select[name="rule"] option[value="intervalo"]:checked) .only-intervalo { display: grid; }
.rule-panels { display: flex; flex-direction: column; gap: 14px; }
.inline-form { display: contents; }
.preview-body { display: flex; flex-direction: column; gap: 14px; background: var(--canvas); }
.preview-sheet { display: flex; justify-content: center; }
.preview-sheet img { max-width: 100%; background: #fff; box-shadow: 0 8px 26px rgb(23 43 69 / 18%); }

.is-editor { height: 100vh; overflow: hidden; }
.is-editor .page { max-width: none; padding: 0; display: flex; flex-direction: column; min-height: 0; }
.editor-app { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--bg); }
.editor-app:fullscreen { height: 100vh; }
.editor-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap;
  padding: 10px 20px; background: var(--surface); border-bottom: 1px solid var(--line);
}
.editor-header .breadcrumb { margin-bottom: 2px; font-size: 0.78rem; }
.editor-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.editor-title h1 { font-size: 1.15rem; font-weight: 750; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 52vw; }
.editor-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.publication { display: flex; align-items: center; gap: 8px; }
.save-state { display: inline-flex; align-items: center; gap: 7px; padding: 0 6px; color: var(--muted); font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }
.save-state i { width: 8px; height: 8px; border-radius: 50%; background: var(--green-500); }
.save-state[data-estado="pendente"] { color: var(--yellow-800); }
.save-state[data-estado="pendente"] i { background: var(--yellow-500); box-shadow: 0 0 0 3px rgb(246 200 78 / 25%); }
.save-state[data-estado="salvando"] i { background: var(--blue-500); animation: pulse 1s ease-in-out infinite; }
.save-state[data-estado="erro"] { color: var(--red-700); }
.save-state[data-estado="erro"] i { background: var(--red-700); }
.btn-save { min-height: 40px; }
.btn-save:not(:disabled) { border-color: var(--blue-700); color: var(--blue-800); }
.btn-ai-map { border-color: var(--blue-100); color: var(--blue-800); white-space: nowrap; }
.btn-ai-map[hidden] { display: none; }
.btn-ai-map:hover { background: var(--blue-50); border-color: var(--blue-700); }
.state-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; }
.state-chip .icon { width: 14px; height: 14px; }
.state-published { background: var(--green-50); color: var(--green-700); }
.state-draft { background: var(--yellow-50); color: var(--yellow-800); }
.btn-dashed { border-style: dashed; color: var(--blue-800); box-shadow: none; }
.btn-dashed:hover { border-color: var(--blue-700); background: var(--blue-50); }

.editor-shell {
  --left: 290px; --right: 330px;
  flex: 1; min-height: 0; position: relative;
  display: grid; grid-template-columns: var(--left) 5px minmax(0, 1fr) 5px var(--right);
}
.mapping-progress { display: flex; align-items: center; gap: 12px; padding: 9px 16px; border-bottom: 1px solid var(--blue-100); background: var(--blue-50); color: var(--blue-800); font-size: 0.78rem; }
.mapping-progress[hidden] { display: none; }
.mapping-progress .btn[hidden] { display: none; }
.mapping-progress-icon { display: inline-flex; flex: 0 0 auto; }
.mapping-progress-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.mapping-progress strong { font-size: 0.82rem; }
.mapping-progress span[data-ai-progress-detail] { color: var(--ink-2); }
.mapping-progress small[data-ai-progress-note] { color: var(--muted); font-size: 0.72rem; }
.mapping-progress [hidden] { display: none; }
.mapping-progress-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.mapping-progress progress { width: min(180px, 20vw); height: 7px; accent-color: var(--blue-700); }
.mapping-progress[data-status="failed"] { border-color: var(--red-100); background: var(--red-50); color: var(--red-700); }
.mapping-progress[data-status="succeeded"] { border-color: var(--green-100); background: var(--green-50); color: var(--green-700); }
.editor-shell[data-esquerdo="fechado"] { grid-template-columns: 0 0 minmax(0, 1fr) 5px var(--right); }
.editor-shell[data-direito="fechado"] { grid-template-columns: var(--left) 5px minmax(0, 1fr) 0 0; }
.editor-shell[data-esquerdo="fechado"][data-direito="fechado"] { grid-template-columns: 0 0 minmax(0, 1fr) 0 0; }
.editor-shell[data-esquerdo="fechado"] .panel-left, .editor-shell[data-direito="fechado"] .panel-right,
.editor-shell[data-esquerdo="fechado"] [data-redimensionar="esquerdo"], .editor-shell[data-direito="fechado"] [data-redimensionar="direito"] { display: none; }
.panel { min-height: 0; display: flex; flex-direction: column; background: var(--surface); }
.panel-left { grid-column: 1; }
[data-redimensionar="esquerdo"] { grid-column: 2; }
.workspace { grid-column: 3; grid-row: 1; }
[data-redimensionar="direito"] { grid-column: 4; }
.panel-right { grid-column: 5; }
.panel-left { border-right: 1px solid var(--line); }
.panel-right { border-left: 1px solid var(--line); }
.panel-body { flex: 1; min-height: 0; overflow: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.panel-body[hidden] { display: none; }
.panel-body .search-field { flex: 0 0 auto; min-width: 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.panel-head h2 { font-size: 0.9375rem; }
.panel-close { display: none; }
.panel-tabs { display: flex; gap: 4px; padding: 8px 10px 0; border-bottom: 1px solid var(--line); }
.panel-tabs [role="tab"] {
  display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; margin-bottom: -1px;
  border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted);
  font-size: 0.8125rem; font-weight: 700; cursor: pointer;
}
.panel-tabs [role="tab"] .icon { width: 16px; height: 16px; }
.panel-tabs [aria-selected="true"] { color: var(--blue-800); border-bottom-color: var(--blue-700); }
.panel-tabs .panel-close { margin-left: auto; align-self: center; }
.count { display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); font-size: 0.68rem; font-weight: 700; }
.resizer { cursor: col-resize; background: transparent; position: relative; z-index: 2; }
.resizer::after { content: ""; position: absolute; inset: 0 2px; background: transparent; transition: background-color 0.15s; }
.resizer:hover::after, .resizer:focus-visible::after, .resizer.is-dragging::after { background: var(--blue-500); }

.palette-group { display: flex; flex-direction: column; gap: 8px; }
.group-toggle {
  display: flex; align-items: center; gap: 6px; padding: 4px 2px; border: 0; background: transparent; cursor: pointer;
  color: var(--muted); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; text-align: left;
}
.group-toggle span:first-of-type { flex: 1; }
.group-toggle .icon { width: 14px; height: 14px; transition: transform 0.15s; }
.group-toggle[aria-expanded="false"] .icon { transform: rotate(-90deg); }
.group-toggle[aria-expanded="false"] + .card-grid { display: none; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.element-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; padding: 10px;
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink);
  text-align: left; cursor: grab; transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
.element-card:hover { border-color: var(--line-strong); background: var(--surface-2); }
.element-card:active { cursor: grabbing; }
.element-card[aria-pressed="true"] { border-color: var(--blue-700); background: var(--blue-50); box-shadow: inset 0 0 0 1px var(--blue-700); }
.element-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: var(--tone, var(--cat-basicos)); background: color-mix(in srgb, var(--tone, var(--cat-basicos)) 12%, white); }
.element-icon .icon { width: 17px; height: 17px; }
.element-text { display: flex; flex-direction: column; min-width: 0; }
.element-text b { font-size: 0.8125rem; line-height: 1.25; }
.element-text small { font-size: 0.72rem; line-height: 1.3; color: var(--muted); }
.palette-empty { font-size: 0.78rem; color: var(--muted); padding: 4px 2px; grid-column: 1 / -1; }

.tree { display: flex; flex-direction: column; gap: 2px; }
.tree-group { margin-top: 6px; padding: 4px 2px; color: var(--muted); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.tree-item {
  display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; padding: 6px 8px;
  border: 0; border-radius: var(--radius); background: transparent; color: var(--ink); text-align: left; cursor: pointer;
}
.tree-item:hover { background: var(--surface-2); }
.tree-item[aria-selected="true"] { background: var(--blue-50); box-shadow: inset 3px 0 0 var(--blue-700); }
.tree-item.is-child { padding-left: 30px; }
.tree-item .dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 2px; background: var(--tone, var(--cat-basicos)); }
.tree-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tree-text b { font-size: 0.8125rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-text small { font-family: var(--mono); font-size: 0.68rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-flag { flex: 0 0 auto; font-size: 0.65rem; font-weight: 800; padding: 1px 6px; border-radius: 999px; }
.tree-flag.is-invalid { background: var(--red-50); color: var(--red-700); }
.tree-flag.is-unsaved { background: var(--yellow-50); color: var(--yellow-800); }

.workspace { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--canvas); }
.guide { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 16px; background: var(--surface); border-bottom: 1px solid var(--line); }
.guide ol { flex: 1; display: flex; gap: 8px 24px; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
.guide li { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--muted); }
.guide li b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--blue-50); color: var(--blue-700); font-size: 0.7rem; }
.guide li strong { color: var(--ink); font-weight: 650; margin-right: 6px; }
.canvas-toolbar { display: flex; align-items: center; gap: 4px; padding: 6px 10px; background: var(--surface); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.canvas-toolbar .tool-group, .reader-toolbar .tool-group, .wizard-pdf-controls .tool-group { display: flex; align-items: center; gap: 2px; padding: 0 6px; }
.canvas-toolbar .tool-group + .tool-group, .reader-toolbar .tool-group + .tool-group { border-left: 1px solid var(--line); }
.wizard-pdf-controls .tool-group { padding: 0; }
.wizard-pdf-controls .tool { width: 30px; height: 30px; }
.toolbar-spacer { flex: 1; }
.tool {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid transparent; border-radius: var(--radius);
  background: transparent; color: var(--ink-2); cursor: pointer; transition: background-color 0.15s, border-color 0.15s;
}
.tool:hover { background: var(--surface-2); border-color: var(--line); }
.tool:disabled { opacity: 0.4; cursor: not-allowed; background: transparent; border-color: transparent; }
.tool[aria-pressed="true"] { background: var(--blue-50); border-color: var(--blue-100); color: var(--blue-800); }
.zoom-value { min-width: 48px; text-align: center; font-size: 0.78rem; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.page-indicator { padding: 0 10px; font-size: 0.78rem; color: var(--muted); }
.canvas { flex: 1; min-height: 0; position: relative; overflow: auto; padding: 32px; display: flex; align-items: flex-start; }
.canvas-stage { margin: 0 auto; flex: 0 0 auto; }
.canvas svg { display: block; background: #fff; box-shadow: 0 1px 3px rgb(23 43 69 / 12%), 0 12px 32px rgb(23 43 69 / 14%); touch-action: none; user-select: none; }
.editor-app[data-tool="pan"] .canvas, .editor-app.is-panning .canvas { cursor: grab; }
.editor-app.is-panning-active .canvas, .editor-app.is-panning-active .canvas * { cursor: grabbing !important; }
.editor-app.is-placing svg, .editor-app.is-placing .box-hit { cursor: crosshair; }
.canvas.is-drop-target svg { outline: 3px dashed var(--blue-500); outline-offset: 6px; }
.placement-banner {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 5;
  display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 14px; border-radius: 999px;
  background: var(--navy-900); color: #fff; font-size: 0.8125rem; box-shadow: var(--shadow-lg);
}
.placement-banner .btn { min-height: 30px; background: rgb(255 255 255 / 10%); border-color: rgb(255 255 255 / 25%); color: #fff; box-shadow: none; }

.cat-basicos { --tone: var(--cat-basicos); }
.cat-pessoais { --tone: var(--cat-pessoais); }
.cat-geograficos { --tone: var(--cat-geograficos); }
.cat-estruturados { --tone: var(--cat-estruturados); }
.cat-personalizados { --tone: var(--cat-personalizados); }
.cat-layout { --tone: var(--cat-layout); }
.box-hit { fill: color-mix(in srgb, var(--tone, var(--cat-basicos)) 7%, transparent); stroke: transparent; stroke-width: 10; vector-effect: non-scaling-stroke; cursor: pointer; }
.box-outline { fill: none; stroke: var(--tone, var(--cat-basicos)); stroke-opacity: 0.55; stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; }
.box:hover > .box-hit { fill: color-mix(in srgb, var(--tone, var(--cat-basicos)) 14%, transparent); }
.box:hover > .box-outline { stroke-opacity: 1; }
.box.is-unsaved > .box-outline { stroke-dasharray: 5 3; stroke-opacity: 0.9; }
.box.is-suggestion { --tone: var(--blue-700); }
.box.is-suggestion > .box-hit { fill: rgb(48 108 173 / 8%); }
.box.is-suggestion > .box-outline { stroke-dasharray: 5 4; stroke-opacity: 0.85; stroke-width: 1.5; }
.box.is-invalid { --tone: var(--red-700); }
.box.is-invalid > .box-outline { stroke-opacity: 1; stroke-width: 1.5; }
.box.is-selected > .box-hit { fill: color-mix(in srgb, var(--tone, var(--cat-basicos)) 12%, transparent); cursor: move; }
.box.is-selected > .box-outline { stroke: var(--blue-800); stroke-opacity: 1; stroke-width: 2; stroke-dasharray: none; }
.box.is-child > .box-outline { stroke-opacity: 0.8; }
.box.is-located > .box-outline { animation: locate 0.9s ease-out 2; }
.box-handle { fill: #fff; stroke: var(--blue-800); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.box-label { opacity: 0; pointer-events: none; transition: opacity 0.12s; }
.box:hover > .box-label, .box.is-selected > .box-label { opacity: 1; }
.box-label rect { fill: var(--tone, var(--cat-basicos)); }
.box.is-selected > .box-label rect { fill: var(--blue-800); }
.box-label text { fill: #fff; font-family: var(--font); font-weight: 600; }
.layout-text { font-family: Helvetica, Arial, sans-serif; fill: #111; }
.layout-line, .layout-box { stroke: #111; fill: none; }
.layout-box.is-filled { fill: #edeff2; }
.draft-rect { fill: rgb(59 114 176 / 10%); stroke: var(--blue-700); stroke-width: 1.5; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }

.document-panel { display: flex; flex-direction: column; gap: 12px; }
.document-panel[hidden] { display: none; }
.empty-state { display: flex; align-items: center; gap: 10px; padding: 14px; border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); color: var(--muted); font-size: 0.8125rem; }
.empty-state .icon { color: var(--blue-700); }
.inspector { display: flex; flex-direction: column; gap: 12px; }
.inspector-head { display: flex; align-items: center; gap: 10px; }
.inspector-head .element-icon { flex: 0 0 auto; }
.inspector-head div { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.inspector-head b { font-size: 0.9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inspector-head small { color: var(--muted); font-size: 0.75rem; }
.inspector-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.btn-accept-suggestion { border-color: var(--green-500); color: var(--green-700); }
.suggestion-summary { font-weight: 650; color: var(--ink); }
.suggestion-new-definition { border-top: 1px solid var(--line); padding-top: 8px; }
.suggestion-new-definition summary { cursor: pointer; color: var(--blue-800); font-weight: 650; }
.suggestion-new-definition > .form-stack { padding-top: 10px; }
.suggestion-new-definition [data-generator-options][hidden] { display: none; }
.tree-flag.is-suggestion { background: var(--blue-50); color: var(--blue-800); }
.inspector-section { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.inspector-section > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; cursor: pointer; list-style: none;
  font-size: 0.8125rem; font-weight: 750; color: var(--ink);
}
.inspector-section > summary::-webkit-details-marker { display: none; }
.inspector-section > summary::after { content: "▾"; color: var(--muted); transition: transform 0.15s; }
.inspector-section:not([open]) > summary::after { transform: rotate(-90deg); }
.inspector-section > .form-stack, .inspector-section > .issues, .inspector-section > .element-list { padding: 0 12px 12px; }
.inspector .field input, .inspector .field select, .inspector .field textarea, .document-panel .field input, .document-panel .field textarea { height: 36px; font-size: 0.8125rem; }
.inspector .field textarea, .document-panel .field textarea { height: auto; }
.inspector .field { font-size: 0.75rem; }
.field-invalid input, .field-invalid select, .field-invalid textarea { border-color: var(--red-700); }
.field-message { font-size: 0.72rem; font-weight: 600; color: var(--red-700); }
.issues { list-style: none; margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 0.78rem; }
.issues li { display: flex; gap: 8px; align-items: flex-start; }
.issues li::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: var(--red-700); }
.issues li.is-ok::before { background: var(--green-500); }
.facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: 0.78rem; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; text-align: right; font-weight: 600; }
.element-list { display: flex; flex-direction: column; gap: 6px; }
.element-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) auto; gap: 6px; align-items: center; }
.inline-number input { width: 64px; height: 32px; padding: 0 8px; }
.inspector-issues { padding: 10px 12px; border: 1px solid var(--red-100); border-radius: var(--radius); background: var(--red-50); color: var(--red-700); }
.element-row input { height: 32px; font-size: 0.78rem; padding: 0 8px; }
.element-row.is-active input { border-color: var(--blue-700); }
.element-tools { display: flex; gap: 6px; flex-wrap: wrap; }
.mm-hint { font-size: 0.72rem; color: var(--muted); }

@keyframes locate { 50% { stroke-width: 6; stroke-opacity: 0.4; } }

@media (max-width: 1180px) {
  .editor-shell { grid-template-columns: 0 0 minmax(0, 1fr) 0 0 !important; }
  .resizer { display: none !important; }
  .panel-left, .panel-right { position: absolute; top: 0; bottom: 0; z-index: 30; width: min(340px, 88vw); box-shadow: var(--shadow-lg); }
  .panel-left { left: 0; }
  .panel-right { right: 0; }
  .panel-close { display: inline-grid; }
  .editor-shell:not([data-esquerdo="aberto"]) .panel-left, .editor-shell:not([data-direito="aberto"]) .panel-right { display: none; }
  .editor-title h1 { max-width: 40vw; }
}

@media (max-width: 720px) {
  .guide { display: none; }
  .editor-header { padding: 8px 12px; }
  .editor-actions .save-state { display: none; }
  .choice-grid { grid-template-columns: 1fr; }
  .canvas { padding: 16px; }
  .mapping-progress { flex-wrap: wrap; }
  .mapping-progress progress { width: 100%; order: 3; }
}


.page-head-compact { align-items: center; margin-bottom: 18px; }
.page-head-compact h1 { margin: 0; }
.return-banner {
  display: flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 10px 12px 10px 14px;
  border: 1px solid var(--blue-100); border-radius: var(--radius-lg); background: var(--blue-50); color: var(--blue-800); font-size: 0.875rem;
}
.return-banner span { flex: 1; }
.gallery-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px; }
.gallery-toolbar .search-field { flex: 1 1 220px; max-width: 340px; }
.gallery-toolbar select { width: auto; min-width: 180px; }
.segmented-tabs { margin: 0; flex-wrap: wrap; }
.segmented-tabs span { display: inline-flex; align-items: center; gap: 6px; }
.segmented input:checked + span .count { background: rgb(255 255 255 / 20%); border-color: transparent; color: #fff; }
.preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 16px; }
.preset-card {
  display: flex; flex-direction: column; min-width: 0; overflow: visible;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.preset-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.preset-card.is-selected { border-color: var(--blue-700); box-shadow: inset 0 0 0 1px var(--blue-700); }
.preset-card:focus-within { border-color: var(--blue-500); }
.preset-sample {
  display: block; text-decoration: none; aspect-ratio: 520 / 464; overflow: hidden; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(110deg, #eef2f5 8%, #f7f9fb 18%, #eef2f5 33%) 0 0 / 200% 100%; animation: shine 1.6s linear infinite;
}
.preset-sample img { display: block; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.preset-sample-off { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px; text-align: center; color: var(--muted); font-size: 0.8rem; background: var(--surface-2); }
.preset-card-body { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 12px; }
.preset-card-head { display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
.preset-card-title { flex: 1; min-width: 0; color: var(--ink); font-weight: 700; font-size: 0.875rem; line-height: 1.3; text-decoration: none; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.preset-card-title:hover { color: var(--blue-700); text-decoration: underline; }
.preset-model { color: var(--muted); font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preset-card-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.preset-card-foot .tag .icon { width: 12px; height: 12px; }
.preset-use { margin-left: auto; }
.menu-card > summary.icon-btn { width: 30px; height: 30px; padding: 0; justify-content: center; }
.menu-card .menu-list { min-width: 210px; }
.preset-more { grid-column: 1 / -1; justify-self: center; }

.preset-page { display: flex; flex-direction: column; gap: 16px; }
.preset-head { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.preset-head-title { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.preset-head-title h1 { font-size: 1.4rem; letter-spacing: -0.02em; margin: 0; }
.preset-layout { display: grid; grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); gap: 20px; align-items: start; }
.preset-config { display: flex; flex-direction: column; gap: 14px; }
.config-section { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.config-section h2 { font-size: 0.9375rem; }
.config-section fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.config-section legend { padding: 0; margin-bottom: 6px; font-size: 0.8125rem; font-weight: 650; color: var(--ink-2); }
.config-section .check-row { flex-direction: row; flex-wrap: wrap; gap: 8px 20px; }
.model-options { display: flex; flex-direction: column; gap: 6px; }
.model-option {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: border-color 0.15s, background-color 0.15s;
}
.model-option:hover { border-color: var(--line-strong); }
.model-option:has(input:checked) { border-color: var(--blue-700); background: var(--blue-50); box-shadow: inset 0 0 0 1px var(--blue-700); }
.model-option:has(input:focus-visible) { outline: 3px solid var(--yellow-500); outline-offset: 2px; }
.model-option.is-disabled { cursor: not-allowed; opacity: 0.6; }
.model-option-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.model-option-text b { font-size: 0.8125rem; }
.model-option-text small { font-size: 0.72rem; color: var(--muted); }
.subtle-link { font-size: 0.78rem; color: var(--blue-700); }
.writer-choice select, .writer-choice input[type="number"] { max-width: 200px; }
.writer-choice .is-muted { opacity: 0.55; }
.color-field { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.color-field input[type="color"] { width: 48px; height: 38px; padding: 3px; }
.color-field input[type="text"] { width: 104px; height: 38px; }
.swatches { display: flex; gap: 6px; }
.swatch { width: 28px; height: 28px; padding: 3px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface); cursor: pointer; }
.swatch i { display: block; width: 100%; height: 100%; border-radius: 50%; }
.swatch:hover { border-color: var(--blue-700); }
.slider-field { display: grid; grid-template-columns: minmax(0, 1fr) 88px; gap: 10px; align-items: center; }
.slider-field input[type="number"] { height: 36px; }
.field output { font-weight: 700; color: var(--blue-800); margin-left: 4px; }
.playground-panel {
  position: sticky; top: calc(var(--topbar) + 16px); display: flex; flex-direction: column; gap: 12px; padding: 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  max-height: calc(100vh - var(--topbar) - 32px); overflow: auto;
}
.playground-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.playground-toolbar h2 { font-size: 0.9375rem; margin-right: auto; }
.playground-toolbar .segmented { margin: 0; }
.playground-toolbar .segmented legend { float: left; margin-right: 8px; font-size: 0.8125rem; }
.playground-stale { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--radius); background: var(--yellow-50); color: var(--yellow-800); font-size: 0.8125rem; }
.playground { position: relative; min-height: 240px; }
.playground.htmx-request > * { opacity: 0.35; transition: opacity 0.2s; }
.playground.htmx-request::after {
  content: "Gerando escrita com o motor OCRSD…"; position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%);
  padding: 10px 16px; border-radius: 999px; background: var(--navy-900); color: #fff; font-size: 0.8125rem; box-shadow: var(--shadow-lg);
}
.sample-rows { display: flex; flex-direction: column; gap: 4px; }
.sample-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.sample-row:first-child { border-top: 0; }
.sample-ref { display: flex; flex-direction: column; gap: 2px; font-size: 0.8125rem; }
.sample-ref .mono { color: var(--muted); font-size: 0.78rem; }
.sample-cells { display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); gap: 10px; }
.cols-2 .sample-cells { --cols: 2; }
.cols-3 .sample-cells { --cols: 3; }
.sample-cell { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.sample-cell img { display: block; width: 100%; max-width: 560px; height: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.sample-cell figcaption { font-size: 0.72rem; color: var(--muted); }
.sample-loading { aspect-ratio: 520 / 116; border-radius: var(--radius); background: linear-gradient(110deg, #eef2f5 8%, #f7f9fb 18%, #eef2f5 33%) 0 0 / 200% 100%; animation: shine 1.6s linear infinite; }
.sample-error { display: flex; align-items: center; gap: 8px; min-height: 64px; padding: 10px 12px; border: 1px dashed var(--line-strong); border-radius: var(--radius); color: var(--muted); font-size: 0.78rem; }
.sample-error .icon { color: var(--yellow-800); }
.playground-off { display: flex; gap: 10px; padding: 16px; border: 1px dashed var(--line-strong); border-radius: var(--radius); color: var(--muted); font-size: 0.875rem; }
.share-state-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.8125rem; color: var(--muted); }
.share-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.writing-models { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin: 16px 0; }
.writing-model { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.writing-model header { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.writing-model h2 { font-size: 1rem; }
.writing-model > p { color: var(--muted); font-size: 0.8125rem; }
.writing-model .btn { align-self: flex-start; }
.model-lead { margin-bottom: 4px; }
.future-note { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.future-note h2 { display: flex; align-items: center; gap: 8px; font-size: 0.9375rem; }
.future-note p { color: var(--muted); font-size: 0.8125rem; }
.future-note code { font-family: var(--mono); font-size: 0.78rem; background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }
.preset-strip-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.field-label { font-size: 0.8125rem; font-weight: 650; color: var(--ink-2); }
.preset-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin: 10px 0 6px; }
.preset-chip { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; background: var(--surface); }
.preset-chip:hover { border-color: var(--line-strong); }
.preset-chip:has(input:checked) { border-color: var(--blue-700); background: var(--blue-50); box-shadow: inset 0 0 0 1px var(--blue-700); }
.preset-chip:has(input:focus-visible) { outline: 3px solid var(--yellow-500); outline-offset: 2px; }
.preset-chip input { position: absolute; opacity: 0; }
.preset-chip-sample { display: grid; place-items: center; aspect-ratio: 520 / 116; border-radius: 6px; overflow: hidden; background: #fff; border: 1px solid var(--line); }
.preset-chip-sample img { width: 100%; height: 100%; object-fit: contain; }
.preset-chip-custom .preset-chip-sample { color: var(--blue-700); background: var(--surface-2); }
.preset-chip-text { display: flex; flex-direction: column; min-width: 0; }
.preset-chip-text b { font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preset-chip-text small { font-size: 0.7rem; color: var(--muted); }

@media (max-width: 1024px) {
  .preset-layout { grid-template-columns: 1fr; }
  .playground-panel { position: static; max-height: none; }
}

@media (max-width: 720px) {
  .gallery-toolbar .search-field, .gallery-toolbar select { max-width: none; flex: 1 1 100%; }
  .preset-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
  .sample-row { grid-template-columns: 1fr; gap: 6px; }
  .cols-3 .sample-cells, .cols-2 .sample-cells { --cols: 1; }
  .preset-head .page-actions .btn { flex: 1 1 auto; }
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shine { to { background-position-x: -200%; } }
@keyframes pulse { 50% { opacity: 0.35; } }
@keyframes dialog-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

@media (max-width: 1240px) {
  .generation { grid-template-columns: minmax(0, 1fr) 360px; }
  .realism-form { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1180px) {
}

@media (max-width: 1024px) {
  :root { --ocrsd-height: clamp(26px, 4.1vw, 42px); }
  .nav-prefix { display: none; }
}

@media (max-width: 900px) and (min-width: 721px) {
  .topbar-inner { gap: 8px; padding: 0 12px; }
  :root { --ocrsd-height: clamp(24px, 3.3vw, 30px); --brand-gap: 6px; }
  .nav a, .menu > summary { gap: 4px; padding: 0 6px; }
}

@media (max-width: 1024px) {
  .topbar-inner { gap: 20px; }
  .generation { grid-template-columns: 1fr; }
  .generation-side { position: static; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .generation-side #job { grid-column: 1 / -1; }
  .preview-stage { max-height: 420px; }
}

@media (max-width: 720px) {
  :root { --topbar: auto; --ocrsd-height: clamp(28px, calc((100vw - 49px) / 6.51), 44px); --brand-gap: 8px; }
  .topbar { position: relative; }
  .topbar-inner { height: auto; flex-wrap: wrap; gap: 8px 12px; padding: 10px 16px 8px; }
  .nav { order: 3; flex: 1 0 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .nav a { justify-content: center; padding: 0 6px; }
  .nav-prefix { display: none; }
  .nav-menus { margin-left: auto; gap: 0; }
  .menu > summary { padding: 0 6px; }
  .menu-list { right: auto; left: 0; }
  .nav-menus .menu:last-child .menu-list { left: auto; right: 0; }
  .nav-static { display: block; }
  .page { padding: 22px 16px 48px; }
  .page-head { flex-direction: column; align-items: stretch; margin-bottom: 20px; }
  .page-head h1 { font-size: 1.5rem; }
  .page-actions { justify-content: flex-start; }
  .grid-2, .grid-3, .field-grid, .summary-list { grid-template-columns: 1fr; }
  .generation-side { grid-template-columns: 1fr; }
  .section-card { padding: 18px 16px 20px; }
  .config-bar, .config-bar select, .config-bar input, .config-bar .btn { width: 100%; }
  .filters, .filters .search-field, .filters select { width: 100%; }
  .page-actions > .btn { flex: 1 1 auto; }
  .model-grid { grid-template-columns: 1fr; }
  .model-new { min-height: 200px; }
  .before-after { grid-template-columns: 1fr; }
  .realism-form { grid-template-columns: 1fr; }
  .viewer-stage { height: 70vh; }
  .card-head { flex-wrap: wrap; }
  .dialog-body { padding: 18px 16px; }
  .dialog-foot { padding: 12px 16px; }
  .dialog-foot .btn { flex: 1 1 auto; }
  .copy-field { flex-direction: column; }
  .toasts { right: 16px; bottom: 16px; }
  .footer-inner { padding: 16px; flex-direction: column; align-items: flex-start; }
  .footer-logo { height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
.wizard-mode { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 4px 0 14px; padding: 12px 0 0; border: 0; border-top: 1px solid #e2e8f0; }
.wizard-mode legend { float: left; width: 100%; padding: 0; margin-bottom: 6px; font-size: .85rem; font-weight: 700; color: #172b45; }
.wizard-mode-option { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; cursor: pointer; }
.wizard-mode-option input { accent-color: #16446f; }
.wizard-mode-option.is-disabled { color: #94a3b8; cursor: not-allowed; }
.wizard-mode .hint, .wizard-mode-unavailable { flex-basis: 100%; font-size: .78rem; color: #64748b; }
.wizard-mode-unavailable { color: #8a5a00; }
.wizard-field.is-blocked { cursor: not-allowed; color: #94a3b8; }
.wizard-field.is-blocked:hover { background: none; }
.wizard-field .wizard-field-blocked { color: #8a5a00; }