@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600&display=swap');

  html {
    scroll-padding-top: var(--preview-sticky-height);
    scroll-snap-type: y proximity;
    overflow-y: scroll;
    scrollbar-gutter: stable;
  }

  :root {
    color-scheme: dark;
    --bg:        #222120;
    --bg-detail: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.03));
    --bg-detail-size: 100% 100%;
    --bg-detail-position: center;
    --panel:     #2c2b29;
    --panel2:    #323130;
    --border:    #3a3937;
    --border2:   #454340;
    --text-faint:#777777;
    --text:      #ddd8d0;
    --text-dim:  #a8a8a8;
    --text-mid:  #c8c8c8;
    --accent:    #cc785c;
    --accent2:   #d4956a;
    --accent-rgb:204,120,92;
    --green:     #4ec9b0;
    --blue:      #569cd6;
    --red:       #f44747;
    --yellow:    #dcdcaa;
    --purple:    #c586c0;
    --string:    #ce9178;
    --warn-bg:   rgba(220,220,170,0.08);
    --warn-panel:#2e2c28;
    --warn-border:rgba(220,220,170,0.22);
    --green-bg:  rgba(78,201,176,0.08);
    --green-border:rgba(78,201,176,0.18);
    --import-ok-bg:#20332f;
    --import-ok-panel:#273a34;
    --import-ok-border:#2e4a44;
    --import-ok-card-border:#42675f;
    --import-ok-text:#7dd7c7;
    --status-ok-icon-bg:#35a994;
    --status-warn-icon-bg:#c89d1d;
    --status-icon-fg:#fffaf3;
  }

  @media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
      color-scheme: light;
      --bg:        #f7f7f7;
      --bg-detail: none;
      --bg-detail-size: auto;
      --bg-detail-position: 0 0;
      --panel:     #ffffff;
      --panel2:    #f3f3f3;
      --border:    #e5e5e5;
      --border2:   #d6d6d6;
      --text-faint:#8a8a8a;
      --text:      #1f1f1f;
      --text-dim:  #5f5f5f;
      --text-mid:  #3b3b3b;
      --accent:    #cc785c;
      --accent2:   #d4956a;
      --accent-rgb:204,120,92;
      --green:     #107c10;
      --blue:      #0067c0;
      --red:       #c42b1c;
      --yellow:    #8a6d00;
      --purple:    #5c2d91;
      --string:    #3b3b3b;
      --warn-bg:   #fff8d6;
      --warn-panel:#fff4ce;
      --warn-border:#f9d44a;
      --green-bg:  #edf7ed;
      --green-border:#c7e0c7;
      --import-ok-bg:#edf7ed;
      --import-ok-panel:#e5f3e5;
      --import-ok-border:#9fd89f;
      --import-ok-card-border:#7fba7f;
      --import-ok-text:#0b6a0b;
      --status-ok-icon-bg:#107c10;
      --status-warn-icon-bg:#f9d44a;
      --status-icon-fg:#ffffff;
    }
  }

  :root[data-theme="light"] {
    color-scheme: light;
    --bg:        #f7f7f7;
    --bg-detail: none;
    --bg-detail-size: auto;
    --bg-detail-position: 0 0;
    --panel:     #ffffff;
    --panel2:    #f3f3f3;
    --border:    #e5e5e5;
    --border2:   #d6d6d6;
    --text-faint:#8a8a8a;
    --text:      #1f1f1f;
    --text-dim:  #5f5f5f;
    --text-mid:  #3b3b3b;
    --accent:    #cc785c;
    --accent2:   #d4956a;
    --accent-rgb:204,120,92;
    --green:     #107c10;
    --blue:      #0067c0;
    --red:       #c42b1c;
    --yellow:    #8a6d00;
    --purple:    #5c2d91;
    --string:    #3b3b3b;
    --warn-bg:   #fff8d6;
    --warn-panel:#fff4ce;
    --warn-border:#f9d44a;
    --green-bg:  #edf7ed;
    --green-border:#c7e0c7;
    --import-ok-bg:#edf7ed;
    --import-ok-panel:#e5f3e5;
    --import-ok-border:#9fd89f;
    --import-ok-card-border:#7fba7f;
    --import-ok-text:#0b6a0b;
    --status-ok-icon-bg:#107c10;
    --status-warn-icon-bg:#f9d44a;
    --status-icon-fg:#ffffff;
  }

  :root[data-theme="dark"] { color-scheme: dark; }

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

  html, body {
    min-height: 100%;
    background: var(--bg);
    background-image: var(--bg-detail);
    background-size: var(--bg-detail-size);
    background-position: var(--bg-detail-position);
    background-attachment: fixed;
    color: var(--text);
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.5;
    zoom: 1.05;
  }

  /* Reserva goteira lateral p/ os botões fixos (☀ tema, ← voltar, ↑↓ nav)
     não sobreporem o conteúdo em zoom alto. Vale p/ todas as páginas. */
  body {
    padding-inline: 44px;
  }

  body.sicoob-details-modal-open {
    overflow: hidden;
  }

  .content {
    max-width: 1180px;
    margin: 0 auto;
    padding: 40px 28px 80px;
  }

  /* ── Page title ── */
  .page-title {
    margin-bottom: 36px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
  }

  .page-title-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    min-height: 24px;
  }

  .page-title h1 {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-mid);
    letter-spacing: 0.3px;
  }

  .page-title h1 strong {
    color: var(--accent);
    font-weight: 600;
  }

  .page-title .sub {
    font-size: 10px;
    color: var(--text-dim);
    margin-top: 5px;
    letter-spacing: 0.5px;
  }

  .info-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--border2);
    background: var(--panel2);
    color: var(--text-dim);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    flex: 0 0 auto;
  }

  .page-title-head .info-btn {
    margin-left: 0;
  }

  .info-btn:hover,
  .info-btn:focus-visible {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(var(--accent-rgb),0.08);
    outline: none;
  }

  /* ── Blocks ── */
  .block { margin-bottom: 28px; }

  .block-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
  }

  .block-num {
    font-size: 10px;
    color: var(--accent);
    background: rgba(var(--accent-rgb),0.1);
    border: 1px solid rgba(var(--accent-rgb),0.2);
    padding: 1px 7px;
    border-radius: 2px;
  }

  .btn-reset {
    margin-left: auto;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--text-faint);
    border: 1px solid var(--border);
    border-radius: 50%;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.4s ease, color 0.15s, border-color 0.15s;
  }
  .btn-reset:hover {
    transform: rotate(-180deg);
    color: var(--red, #cc785c);
    border-color: var(--red, #cc785c);
  }
  .btn-reset[hidden] {
    display: inline-flex;
    visibility: hidden;
    pointer-events: none;
  }

  .block-title {
    font-size: 11px;
    color: var(--text-mid);
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }

  /* ── Form ── */
  .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
  }

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

  @media (max-width: 900px) {
    .summary-row { grid-template-columns: 1fr; }
  }

  .field { display: flex; flex-direction: column; gap: 5px; }

  .field label {
    font-size: 10px;
    color: var(--text-dim);
    letter-spacing: 1px;
    text-transform: uppercase;
  }

  .field-wrap {
    display: flex;
    align-items: center;
    background: var(--panel);
    border: 1px solid var(--border2);
    border-radius: 4px;
    overflow: hidden;
    transition: border-color 0.15s;
  }

  .field-wrap:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb),0.1);
  }

  .field-wrap.invalid {
    border-color: var(--red);
    box-shadow: 0 0 0 2px rgba(244,71,71,0.1);
  }

  .field-prefix {
    padding: 0 8px;
    color: var(--text-dim);
    background: var(--panel2);
    border-right: 1px solid var(--border);
    font-size: 11px;
    height: 32px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  input[type="text"], input[type="date"] {
    background: transparent;
    border: none;
    padding: 0 10px;
    height: 32px;
    color: var(--string);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    outline: none;
    width: 100%;
  }

  input::placeholder { color: var(--text-faint); opacity: 0.55; }

  .comment { display: none; }
  .field-status { display: none !important; }

  /* ── Dropzone ── */
  .dropzone {
    border: 1px dashed var(--border2);
    border-radius: 4px;
    padding: 36px 20px;
    text-align: center;
    cursor: pointer;
    background: var(--panel);
    position: relative;
    transition: all 0.15s;
  }

  .dropzone:hover {
    border-color: var(--accent);
    background: rgba(var(--accent-rgb),0.04);
  }

  .dropzone:focus-visible {
    border-color: var(--accent);
    background: rgba(var(--accent-rgb),0.04);
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb),0.12);
    outline: none;
  }

  .dropzone.import-ok {
    border-color: var(--import-ok-border);
    background: var(--import-ok-bg);
  }

  .dropzone.import-warn {
    border-color: var(--yellow);
    background: rgba(220,220,170,0.05);
  }

  .dropzone.import-ok::after {
    content: '\2713';
    color: var(--status-icon-fg);
    background: var(--status-ok-icon-bg);
  }

  .dropzone.import-warn::after {
    content: '!';
    color: var(--status-icon-fg);
    background: var(--status-warn-icon-bg);
  }

  .dropzone.import-ok::after,
  .dropzone.import-warn::after {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
  }

  .dropzone.drag-over,
  .dropzone.import-ok.drag-over,
  .dropzone.import-warn.drag-over {
    border-color: var(--accent);
    background: rgba(var(--accent-rgb),0.04);
  }

  .dropzone.import-ok:hover,
  .dropzone.import-warn:hover {
    border-color: var(--accent);
    background: rgba(var(--accent-rgb),0.04);
  }

  .dropzone input[type="file"] {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
    width: 1px;
    height: 1px;
  }

  .dz-prompt {
    font-size: 12px;
    color: var(--text-dim);
    margin-bottom: 6px;
  }
  .dz-prompt strong { color: var(--blue); }

  .dz-sub {
    font-size: 10px;
    color: var(--text-faint);
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }

  .dz-cmd {
    display: inline-block;
    margin-top: 12px;
    background: var(--panel2);
    border: 1px solid var(--border2);
    border-radius: 3px;
    padding: 4px 12px;
    font-size: 11px;
    color: var(--text-mid);
  }
  .dz-cmd::before { content: '$ '; color: var(--accent); }

  .file-name {
    width: min(100%, 332px);
    margin: 16px auto 0;
    padding: 10px 12px;
    font-size: 11px;
    color: var(--text);
    text-align: left;
    background: var(--import-ok-panel);
    border: 1px solid var(--import-ok-card-border);
    border-radius: 4px;
    display: none;
  }
  .file-name::before { content: ''; }

  .embedded-import-card {
    display: block;
    width: 100%;
    margin: 0 0 7px;
  }

  .import-file-title {
    color: var(--text);
    font-weight: 600;
    overflow-wrap: anywhere;
  }

  .import-file-meta {
    margin-top: 3px;
    color: var(--import-ok-text);
    font-size: 10px;
  }



  .dropzone.import-warn .file-name {
    background: var(--warn-bg);
    border-color: var(--warn-border);
  }

  .dropzone.import-warn .import-file-meta {
    color: var(--yellow);
  }

  .dropzone.import-warn .missing-imports-group.ok .file-name {
    background: var(--import-ok-panel);
    border-color: var(--import-ok-card-border);
  }

  .dropzone.import-warn .missing-imports-group.ok .import-file-meta {
    color: var(--import-ok-text);
  }

  .missing-imports {
    display: none;
    width: min(100%, 760px);
    margin: 8px auto 0;
    padding: 9px 11px;
    text-align: left;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    font-size: 10px;
  }

  .missing-imports.visible { display: block; }

  .missing-imports.single-type {
    width: min(100%, 460px);
  }

  .missing-imports-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .missing-imports-grid.single-type {
    grid-template-columns: minmax(0, min(100%, 400px));
    justify-content: center;
  }

  .missing-imports-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .missing-imports-col-title {
    margin-bottom: 4px;
    font-weight: 600;
  }

  .missing-imports-col-title.warn { color: var(--yellow); }
  .missing-imports-col-title.ok   { color: var(--import-ok-text); }
  .missing-imports-col-title.neutral { color: var(--text-mid); }

  .missing-imports-group {
    min-width: 0;
    min-height: 56px;
    padding: 8px 9px;
    border-radius: 4px;
    flex: 1;
  }

  .missing-imports-group.warn {
    background: var(--warn-panel);
    border: 1px solid var(--warn-border);
  }

  .missing-imports-group.ok {
    background: var(--import-ok-bg);
    border: 1px solid var(--import-ok-border);
  }

  .missing-imports-group.neutral {
    background: var(--panel);
    border: 1px solid var(--border);
  }

  .missing-imports-group-title {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 5px;
    font-weight: 600;
  }

  .missing-imports-group.warn .missing-imports-group-title { color: var(--yellow); }
  .missing-imports-group.ok  .missing-imports-group-title { color: var(--import-ok-text); }
  .missing-imports-group.neutral .missing-imports-group-title { color: var(--text-mid); }

  .missing-imports-count {
    color: var(--text-dim);
    font-weight: 400;
    white-space: nowrap;
  }

  .missing-imports-item {
    color: var(--text-mid);
    overflow-wrap: anywhere;
  }

  .missing-imports-empty {
    color: var(--text-faint);
  }

  .missing-imports-item + .missing-imports-item { margin-top: 3px; }

  .missing-imports-item::before {
    content: '! ';
    color: var(--yellow);
  }

  .missing-imports-item.outside::before {
    content: '- ';
    color: var(--text-faint);
  }

  .details-upload {
    display: none;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
  }

  .details-upload.visible { display: block; }

  .details-upload .dropzone {
    padding: 22px 18px;
  }

  .details-status {
    margin-top: 8px;
    font-size: 10px;
    color: var(--text-dim);
  }

  .details-status.ok { color: var(--green); }
  .details-status.warn { color: var(--red); }

  .details-import-summary {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .details-import-summary.single-type {
    grid-template-columns: 1fr;
  }

  .details-import-box {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto 24px;
    gap: 8px;
    align-items: center;
    min-width: 0;
    padding: 7px 9px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 4px;
  }

  .details-import-check {
    min-width: 58px;
    min-height: 18px;
    padding: 0 8px;
    border: 1px solid var(--border2);
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    line-height: 1;
  }

  .details-import-box.ok {
    background: var(--import-ok-bg);
    border-color: var(--import-ok-border);
  }

  .details-import-box.ok .details-import-check {
    color: var(--import-ok-text);
    border-color: var(--import-ok-card-border);
  }

  .details-import-box.pending {
    background: var(--warn-bg);
    border-color: var(--warn-border);
  }

  .details-import-box.warn {
    background: color-mix(in srgb, var(--warn-bg) 72%, var(--panel) 28%);
    border-color: color-mix(in srgb, var(--warn-border) 72%, var(--border) 28%);
    box-shadow: inset 3px 0 0 var(--yellow);
  }

  .details-import-box.pending .details-import-check {
    color: var(--yellow);
    border-color: rgba(220,220,170,0.45);
  }

  .details-import-box.warn .details-import-check {
    color: var(--yellow);
    min-width: 96px;
    min-height: 24px;
    background: rgba(220,220,170,0.12);
    border-color: rgba(220,220,170,0.55);
    font-weight: 700;
  }

  .details-import-label {
    min-width: 0;
    color: var(--text-mid);
    font-size: 10px;
    overflow-wrap: anywhere;
  }

  .details-import-count {
    color: var(--purple);
    font-size: 10px;
    text-align: right;
  }

  .details-import-info {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--border2);
    background: var(--panel2);
    color: var(--text-dim);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
  }

  .details-import-info:hover,
  .details-import-info:focus-visible {
    border-color: var(--accent);
    color: var(--accent);
    outline: none;
  }

  .details-checklist {
    margin-top: 10px;
    display: grid;
    gap: 6px;
    max-height: min(62vh, 560px);
    /* área rolável do modal — título acima e botão abaixo ficam fixos */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--border2) transparent;
  }

  .details-checklist:empty { display: none; }

  .details-checklist::-webkit-scrollbar { width: 6px; }
  .details-checklist::-webkit-scrollbar-thumb {
    background: var(--border2);
    border-radius: 999px;
  }
  .details-checklist::-webkit-scrollbar-track { background: transparent; }

  .details-checklist-title {
    font-size: 10px;
    color: var(--text-dim);
    letter-spacing: 0.8px;
    text-transform: uppercase;
  }

  .details-check-empty {
    padding: 9px 10px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-dim);
    font-size: 10px;
  }

  .details-checklist-item {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 8px;
    align-items: start;
    padding: 7px 9px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 4px;
  }

  .details-check-icon {
    width: 26px;
    min-height: 18px;
    border: 1px solid var(--border2);
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    line-height: 1;
  }

  .details-checklist-item.ok .details-check-icon {
    color: var(--green);
    border-color: rgba(78,201,176,0.35);
  }

  .details-checklist-item.warn .details-check-icon {
    color: var(--red);
    border-color: rgba(244,71,71,0.35);
  }

  .details-check-main {
    min-width: 0;
    display: grid;
    gap: 2px;
  }

  .details-check-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 9px;
    color: var(--text-dim);
  }

  .details-check-type {
    color: var(--accent);
  }

  .details-check-key {
    color: var(--purple);
  }

  .details-check-name {
    color: var(--text-mid);
    font-size: 10px;
    overflow-wrap: anywhere;
  }

  /* ── Status ── */
  .status-bar {
    display: none;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 8px 12px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 11px;
    color: var(--text-dim);
  }
  .status-bar.visible { display: flex; }

  .status-details {
    color: var(--text-faint);
    font-size: 10px;
  }

  .status-action {
    margin-left: auto;
    border: 1px solid var(--border2);
    background: transparent;
    color: var(--text-mid);
    padding: 4px 8px;
    font: inherit;
    font-size: 10px;
    cursor: pointer;
  }

  .status-action:hover {
    color: var(--red);
    border-color: var(--red);
  }

  .ocr-advanced-btn {
    margin-top: 12px;
    border: 1px solid var(--border2);
    background: var(--panel2);
    color: var(--text-mid);
    padding: 8px 12px;
    font: inherit;
    font-size: 11px;
    cursor: pointer;
  }

  .ocr-advanced-btn:hover {
    color: var(--accent);
    border-color: var(--accent);
  }

  .spinner {
    width: 11px; height: 11px;
    border: 1.5px solid var(--border2);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    flex-shrink: 0;
  }

  .loading-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }

  .loading-overlay.visible { display: flex; }

  .loading-status-card {
    width: min(100% - 48px, 430px);
    padding: 16px 18px;
    background: color-mix(in srgb, var(--panel) 92%, transparent);
    border: 1px solid var(--border2);
    border-radius: 6px;
    box-shadow: 0 18px 50px rgba(0,0,0,0.36);
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 12px;
    align-items: start;
  }

  .loading-spinner {
    width: 24px;
    height: 24px;
    border: 2.5px solid color-mix(in srgb, var(--text) 22%, transparent);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
  }

  .loading-status-main {
    min-width: 0;
    display: grid;
    gap: 8px;
  }

  .loading-status-title {
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
  }

  .loading-status-meta {
    color: var(--text-dim);
    font-size: 10px;
    line-height: 1.45;
  }

  .loading-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .loading-step {
    padding: 2px 6px;
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--text-faint);
    font-size: 9px;
  }

  .loading-step.done {
    color: var(--green);
    border-color: rgba(78,201,176,0.25);
  }

  .loading-step.active {
    color: var(--accent2);
    border-color: rgba(var(--accent-rgb),0.45);
  }

  .loading-progress-track {
    height: 4px;
    overflow: hidden;
    background: var(--panel2);
    border: 1px solid var(--border);
    border-radius: 999px;
  }

  .loading-progress-fill {
    height: 100%;
    width: 0;
    background: var(--accent);
    transition: width 0.2s ease;
  }

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

  /* ── Error ── */
  .error-msg {
    display: none;
    margin-top: 10px;
    padding: 8px 12px;
    background: rgba(244,71,71,0.06);
    border: 1px solid rgba(244,71,71,0.2);
    border-radius: 4px;
    font-size: 11px;
    color: var(--red);
  }
  .error-msg.visible { display: block; }
  .error-msg::before { content: '✗ '; }

  /* ── Summary ── */
  .summary-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 10px;
    margin-bottom: 16px;
  }

  .summary-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 12px 14px;
    position: relative;
    overflow: hidden;
    min-width: 0;
  }

  .summary-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 2px;
  }
  .summary-card.c-red::before    { background: var(--red); }
  .summary-card.c-green::before  { background: var(--green); }
  .summary-card.c-yellow::before { background: var(--yellow); }

  .s-label {
    font-size: 9px;
    color: var(--text-dim);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 6px;
  }

  .s-value {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.5px;
    overflow-wrap: anywhere;
  }
  .s-value.red    { color: var(--red); }
  .s-value.green  { color: var(--green); }
  .s-value.yellow { color: var(--yellow); }

  /* ── Table ── */
  .count-badge {
    margin-left: auto;
    font-size: 10px;
    color: var(--text-dim);
    background: var(--panel2);
    border: 1px solid var(--border);
    padding: 1px 8px;
    border-radius: 2px;
  }
  .preview-history-actions {
    display: flex;
    gap: 6px;
    margin-left: 8px;
  }
  .preview-history-menu-wrap {
    position: relative;
    margin-left: 8px;
  }
  .preview-history-menu-wrap[hidden] { display: none; }
  .preview-history-menu-btn {
    padding: 2px 7px;
    border: 1px solid var(--border2);
    border-radius: 2px;
    background: var(--panel2);
    color: var(--text-dim);
    font: 11px 'JetBrains Mono', monospace;
    cursor: pointer;
    line-height: 1;
    letter-spacing: 1px;
  }
  .preview-history-menu-btn:hover,
  .preview-history-menu-btn:focus-visible {
    border-color: var(--accent);
    color: var(--accent);
    outline: none;
  }
  .preview-history-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 200;
    background: var(--panel);
    border: 1px solid var(--border2);
    border-radius: 3px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
    min-width: 180px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .preview-history-dropdown[hidden] { display: none; }
  .preview-history-dropdown .preview-history-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid var(--border);
    background: transparent;
    text-align: left;
    font: 11px 'JetBrains Mono', monospace;
    color: var(--text-dim);
    cursor: pointer;
  }
  .preview-history-dropdown .preview-history-btn:last-child { border-bottom: none; }
  .preview-history-dropdown .preview-history-btn:hover:not(:disabled),
  .preview-history-dropdown .preview-history-btn:focus-visible:not(:disabled) {
    background: rgba(var(--accent-rgb),0.07);
    color: var(--accent);
    outline: none;
  }
  .preview-history-dropdown .preview-history-btn:disabled {
    opacity: 0.4;
    cursor: default;
  }
  .preview-history-btn-restore:not(:disabled) { color: var(--red) !important; }
  .preview-history-btn-restore:hover:not(:disabled),
  .preview-history-btn-restore:focus-visible:not(:disabled) {
    background: rgba(var(--red-rgb, 220,50,50),0.07) !important;
    color: var(--red) !important;
  }
  .phd-icon { font-size: 12px; }
  .preview-history-btn {
    padding: 3px 8px;
    border: 1px solid var(--border2);
    border-radius: 2px;
    background: var(--panel2);
    color: var(--text-dim);
    font: 10px 'JetBrains Mono', monospace;
    cursor: pointer;
  }
  .preview-history-btn:hover:not(:disabled),
  .preview-history-btn:focus-visible:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent);
    outline: none;
  }
  .preview-history-btn:disabled {
    opacity: 0.45;
    cursor: default;
  }

  .format-badge {
    font-size: 10px;
    color: var(--accent);
    background: rgba(var(--accent-rgb),0.08);
    border: 1px solid rgba(var(--accent-rgb),0.2);
    padding: 1px 8px;
    border-radius: 2px;
  }
  .format-badge:empty { display: none; }

  .preview-wrapper {
    --preview-header-height: 34px;
    --preview-sticky-height: 58px;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    border: 1px solid var(--border);
    border-radius: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--border2) transparent;
  }

  .preview-wrapper::-webkit-scrollbar { height: 6px; }
  .preview-wrapper::-webkit-scrollbar-thumb {
    background: var(--border2);
    border-radius: 999px;
  }
  .preview-wrapper::-webkit-scrollbar-track { background: transparent; }

  .preview-fixed-scroll {
    position: sticky;
    bottom: 0;
    z-index: 5;
    max-width: 100%;
    height: 14px;
    margin-top: -1px;
    overflow-x: auto;
    overflow-y: hidden;
    background: var(--panel);
    border: 1px solid var(--border);
    border-top: 0;
    border-radius: 0 0 4px 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--border2) transparent;
  }

  .preview-fixed-scroll.is-hidden {
    display: none;
  }

  .preview-fixed-scroll::-webkit-scrollbar { height: 6px; }
  .preview-fixed-scroll::-webkit-scrollbar-thumb {
    background: var(--border2);
    border-radius: 999px;
  }
  .preview-fixed-scroll::-webkit-scrollbar-track { background: transparent; }
  .preview-fixed-scroll-track { height: 1px; }

  .preview-sticky-header {
    position: fixed;
    top: 0;
    z-index: 20;
    display: none;
    box-sizing: border-box;
    overflow: hidden;
    pointer-events: none;
    background: var(--panel2);
    border: 0;
    box-shadow: inset 0 0 0 1px var(--border), 0 6px 16px rgba(0,0,0,0.22);
  }

  .preview-sticky-header.is-visible {
    display: block;
  }

  .preview-sticky-header .hist-master-scroll {
    pointer-events: auto;
  }

  .preview-sticky-header-viewport {
    overflow: hidden;
    width: 100%;
  }

  .preview-sticky-header table {
    margin: 0;
    transform: translateX(0);
  }

  .preview-sticky-header thead {
    position: static;
  }

  table {
    width: 100%;
    /* Minimo util: em viewport/zoom alto, rola em vez de esmagar colunas. */
    min-width: 780px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 10px;
    table-layout: fixed;
  }

  /* larguras proporcionais (somam 100%) → escalam juntas em qualquer zoom */
  col.col-date { width: 10%; }
  col.col-history { width: 37%; }
  col.col-document { width: 14%; }
  col.col-debit { width: 13%; }
  col.col-credit { width: 13%; }
  col.col-balance { width: 13%; }

  thead {
    position: sticky;
    top: 0;
    z-index: 4;
    background: var(--panel2);
    box-shadow: 0 1px 0 var(--border);
  }
  thead tr { background: var(--panel2); }
  #previewBody tr {
    scroll-snap-align: start;
    scroll-margin-top: var(--preview-sticky-height);
  }

  th {
    text-align: center;
    padding: 8px 10px;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-dim);
    border-bottom: 1px solid var(--border2);
    white-space: normal;
    line-height: 1.35;
    word-break: keep-all;
    font-weight: 500;
  }

  td {
    padding: 7px 14px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
  }

  tr:last-child td { border-bottom: none; }
  tr:hover td { background: rgba(255,255,255,0.02); }
  #previewBody tr { position: relative; }
  tr.row-ocr-warning td {
    background: var(--warn-bg);
  }
  tr.row-ocr-warning td:first-child { box-shadow: inset 2px 0 0 var(--warn-border); }
  tr.row-ocr-warning:hover td { background: var(--warn-panel); }
  tr.row-muted td {
    color: var(--text-faint);
    opacity: 0.58;
  }
  tr.row-muted:hover td { background: rgba(255,255,255,0.01); }
  tr.row-muted .td-doc,
  tr.row-muted .td-date,
  tr.row-muted .td-balance-pos,
  tr.row-muted .td-balance-neg,
  tr.row-muted .td-balance-neutral {
    color: var(--text-faint);
  }
  tr.row-muted .badge {
    background: rgba(255,255,255,0.025);
    border-color: rgba(255,255,255,0.06);
    color: var(--text-dim);
  }

  .td-date { color: var(--text-dim); font-size: 10px; }
  .td-doc  { color: var(--purple);   font-size: 10px; }
  th:nth-child(1),
  td:nth-child(1) {
    text-align: center;
    padding-left: 6px;
    padding-right: 6px;
  }
  th:nth-child(2),
  td:nth-child(2) { min-width: 0; }
  th:nth-child(3),
  td:nth-child(3) {
    white-space: normal;
    word-break: break-word;
    text-align: center;
  }
  th:nth-child(4),
  td:nth-child(4) { text-align: center; }
  th:nth-child(5),
  td:nth-child(5) { text-align: center; }
  th:nth-child(6),
  td:nth-child(6) { text-align: right; }
  .hist-master-row th {
    padding-top: 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
    background: var(--panel2);
  }
  .hist-master-cell {
    padding-top: 0;
    padding-bottom: 8px;
  }
  .hist-master-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--border2) transparent;
  }
  .hist-master-scroll::-webkit-scrollbar { height: 6px; }
  .hist-master-scroll::-webkit-scrollbar-thumb {
    background: var(--border2);
    border-radius: 999px;
  }
  .hist-master-scroll::-webkit-scrollbar-track { background: transparent; }
  .hist-master-track { height: 1px; }
  .preview-history-scroll-row th:not(:nth-child(2)) {
    padding: 0;
    border-bottom: 1px solid var(--border);
  }
  .hist-clip {
    overflow: hidden;
    width: 100%;
  }
  .hist-content {
    display: inline-block;
    min-width: max-content;
    white-space: nowrap;
  }
  .td-balance-pos     { color: var(--green);    font-size: 10px; font-weight: 500; text-align: right; white-space: nowrap; }
  .td-balance-neg     { color: var(--red);      font-size: 10px; font-weight: 500; text-align: right; white-space: nowrap; }
  .td-balance-neutral { color: var(--yellow);   font-size: 10px; font-weight: 500; text-align: right; white-space: nowrap; }
  .td-balance-pos,
  .td-balance-neg,
  .td-balance-neutral {
    position: relative;
    overflow: visible;
  }
  th:last-child { text-align: center; }

  .badge {
    display: inline-block;
    max-width: 100%;
    padding: 1px 7px;
    border-radius: 2px;
    font-size: 10px;
    overflow: hidden;
    text-overflow: clip;
    vertical-align: middle;
  }
  .value-edit-trigger { cursor: text; }
  .preview-cell-edited {
    background: rgba(var(--accent-rgb),0.08);
    box-shadow: inset 0 -1px 0 rgba(var(--accent-rgb),0.35);
  }
  tr:hover .preview-cell-edited { background: rgba(var(--accent-rgb),0.12); }
  .preview-cell-input {
    width: 100%;
    min-width: 0;
    padding: 0;
  }
  .cell-placeholder {
    font: inherit;
    font-size: 10px;
    line-height: inherit;
    letter-spacing: 0;
    color: inherit;
    background: transparent;
    border: 0;
    outline: none;
    box-shadow: none;
  }
  input.cell-placeholder {
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 0;
    font: inherit;
    font-size: 10px;
    line-height: inherit;
    color: inherit;
    background: transparent;
    border: 0;
    outline: none;
    box-shadow: none;
  }
  .cell-placeholder:focus {
    border: 0;
    outline: none;
    box-shadow: none;
  }
  input.cell-placeholder:focus {
    border: 0;
    outline: none;
    box-shadow: none;
  }
  .cell-placeholder.value-placeholder {
    width: 10ch;
    max-width: 100%;
    height: auto;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
  }
  .cell-placeholder.value-placeholder::placeholder {
    color: var(--text-faint);
    opacity: 0.55;
  }
  .preview-area {
    position: relative;
  }
  .preview-row-gutter {
    position: absolute;
    top: 0;
    left: 100%;
    margin-left: 8px;
    width: 48px;
    pointer-events: none;
  }
  .preview-row-gutter-item {
    position: absolute;
    left: 0;
    display: flex;
    flex-direction: row;
    gap: 4px;
    align-items: center;
    justify-content: flex-start;
    opacity: 0;
    transition: opacity 0.12s;
    pointer-events: none;
  }
  .preview-row-gutter-item.is-active {
    opacity: 1;
    pointer-events: auto;
  }
  .preview-row-action {
    width: 20px;
    height: 20px;
    padding: 0;
    border: 1px solid var(--border2);
    border-radius: 2px;
    background: var(--panel2);
    color: var(--text-dim);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    line-height: 18px;
    cursor: pointer;
    transition: color 0.12s, border-color 0.12s, background 0.12s;
  }
  .preview-row-action:hover,
  .preview-row-action:focus-visible {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(var(--accent-rgb),0.08);
    outline: none;
  }
  .preview-row-delete:hover,
  .preview-row-delete:focus-visible {
    border-color: var(--red);
    color: var(--red);
    background: rgba(244,71,71,0.08);
  }
  .badge-debit   { background: rgba(78,201,176,0.1);  color: var(--green);  border: 1px solid rgba(78,201,176,0.2);  }
  .badge-credit  { background: rgba(244,71,71,0.1);   color: var(--red);    border: 1px solid rgba(244,71,71,0.2);   }
  .badge-neutral { background: rgba(220,220,170,0.1); color: var(--yellow); border: 1px solid rgba(220,220,170,0.2); }

  .nil { color: var(--text-faint); }

  .empty-state {
    text-align: center;
    padding: 32px;
    color: var(--text-dim);
    font-size: 11px;
  }
  .empty-state::before { content: '// '; }

  /* ── Button ── */
  .btn-export {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 20px;
    background: var(--accent);
    color: #1a1a1a;
    border: none;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.15s;
  }

  .btn-export:hover:not(:disabled) {
    background: var(--accent2);
    box-shadow: 0 2px 12px rgba(var(--accent-rgb),0.3);
  }

  .btn-export:disabled { opacity: 0.3; cursor: not-allowed; }
  .btn-export + .btn-export { margin-top: 8px; }
  .btn-export-secondary {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
  }
  .btn-export-secondary:hover:not(:disabled) {
    color: #1a1a1a;
    border-color: var(--accent2);
  }
  .btn-arrow { opacity: 0.7; }

  /* ── Divergence indicator ── */
  .divergence {
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 11px;
    letter-spacing: 0.2px;
  }
  .divergence.ok   { background: rgba(78,201,176,0.08); border: 1px solid rgba(78,201,176,0.25); color: var(--green); }
  .divergence.warn { background: rgba(244,71,71,0.08);  border: 1px solid rgba(244,71,71,0.25);  color: var(--red); }

  /* ── Modal ── */
  html.modal-open,
  body.modal-open {
    overflow: hidden;
    overscroll-behavior: none;
  }

  .modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(74,74,74,0.38);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    /* folga até as bordas da viewport — o modal nunca encosta no topo/base */
    padding: 32px;
    backdrop-filter: blur(8px) grayscale(0.25);
    -webkit-backdrop-filter: blur(8px) grayscale(0.25);
    touch-action: none;
  }

  .modal-overlay.visible { display: flex; }

  .modal {
    background: var(--panel);
    border: 1px solid var(--border2);
    border-radius: 6px;
    width: 100%;
    max-width: 380px;
    /* % do overlay (que tem padding) — acompanha o zoom sem estourar a tela */
    max-height: 100%;
    padding: 28px 28px 24px;
    position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    display: flex;
    flex-direction: column;
    /* título e botão ficam fixos; só a área de conteúdo rola (regras abaixo) */
    overflow: hidden;
  }

  .modal.modal-wide {
    max-width: 560px;
  }

  .modal-icon {
    font-size: 22px;
    margin-bottom: 12px;
  }

  .modal-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
    letter-spacing: 0.3px;
  }

  .modal-msg {
    font-size: 11.5px;
    color: var(--text-mid);
    line-height: 1.6;
    margin-bottom: 4px;
  }

  .modal-timer {
    margin: 12px 0 2px;
    font-size: 10.5px;
    color: var(--accent2);
    line-height: 1.45;
  }

  .modal-fields {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 20px;
    /* rola se estourar (zoom alto); título acima e botão abaixo ficam fixos */
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .modal-field-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--red);
  }

  .modal-field-item::before {
    content: '›';
    color: var(--accent);
  }

  .modal-btn {
    width: 100%;
    padding: 9px;
    background: var(--accent);
    color: #1a1a1a;
    border: none;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
  }

  .modal-btn:hover { background: var(--accent2); }

  .xlsx-columns-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 16px 0 20px;
  }

  .xlsx-col-option {
    text-align: left;
    background: var(--bg2, rgba(255,255,255,0.03));
    border: 1px solid var(--border2);
    border-radius: 6px;
    padding: 12px 14px;
    cursor: pointer;
    font-family: 'JetBrains Mono', monospace;
    transition: border-color 0.15s, background 0.15s;
  }

  .xlsx-col-option:hover,
  .xlsx-col-option:focus-visible {
    border-color: var(--accent);
    background: rgba(var(--accent-rgb, 208, 90, 59), 0.08);
  }

  .xlsx-col-option-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
  }

  .xlsx-col-option-desc {
    font-size: 10.5px;
    color: var(--text-mid);
    line-height: 1.5;
  }

  .formats-modal-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 6px;
    margin: 16px 0 20px;
    /* única área rolável do modal — título fixo acima, botão fixo abaixo */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--border2) transparent;
  }

  .formats-modal-list::-webkit-scrollbar { width: 6px; }
  .formats-modal-list::-webkit-scrollbar-thumb {
    background: var(--border2);
    border-radius: 999px;
  }
  .formats-modal-list::-webkit-scrollbar-track { background: transparent; }

  .formats-modal-item {
    padding: 7px 9px;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-mid);
    background: var(--panel2);
    font-size: 10.5px;
    line-height: 1.35;
  }

  /* ── Nav scroll buttons ── */
  .nav-btn {
    position: fixed;
    /* offset contra-escalado: folga até a borda constante em qualquer zoom */
    right: calc(24px * var(--ui-fix-scale, 1));
    width: 32px;
    height: 32px;
    background: var(--panel2);
    border: 1px solid var(--border2);
    border-radius: 4px;
    color: var(--text-dim);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, color 0.15s, opacity 0.2s;
    z-index: 100;
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    /* tamanho de tela fixo em qualquer zoom: cancela o zoom da página */
    transform: scale(var(--ui-fix-scale, 1));
  }
  .nav-btn.visible { opacity: 1; pointer-events: auto; }
  .nav-btn:hover { border-color: var(--accent); color: var(--accent); }
  /* origem na quina ancorada (right + top/bottom) p/ não deslocar ao escalar */
  .nav-btn-top  { top: calc(20px * var(--ui-fix-scale, 1));    transform-origin: top right; }
  .nav-btn-bot  { bottom: calc(20px * var(--ui-fix-scale, 1)); transform-origin: bottom right; }

  .theme-toggle {
    position: fixed;
    /* offset contra-escalado: folga até a borda constante em qualquer zoom */
    top: calc(20px * var(--ui-fix-scale, 1));
    left: calc(24px * var(--ui-fix-scale, 1));
    width: 32px;
    height: 32px;
    background: var(--panel2);
    border: 1px solid var(--border2);
    border-radius: 4px;
    color: var(--text-dim);
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    z-index: 100;
    line-height: 1;
    /* tamanho de tela fixo em qualquer zoom: cancela o zoom da página */
    transform: scale(var(--ui-fix-scale, 1));
    transform-origin: top left;
  }
  .theme-toggle:hover { border-color: var(--accent); color: var(--accent); }

  /* ── Nav page button (link para outras páginas) ── */
  .nav-page-btn {
    position: fixed;
    /* offset contra-escalado: folga até a borda constante em qualquer zoom */
    top: calc(60px * var(--ui-fix-scale, 1));
    left: calc(24px * var(--ui-fix-scale, 1));
    width: 32px;
    height: 32px;
    background: var(--panel2);
    border: 1px solid var(--border2);
    border-radius: 4px;
    color: var(--text-dim);
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    z-index: 100;
    line-height: 1;
    text-decoration: none;
    appearance: none;
    /* tamanho de tela fixo em qualquer zoom: cancela o zoom da página */
    transform: scale(var(--ui-fix-scale, 1));
    transform-origin: top left;
  }
  .nav-page-btn:hover { border-color: var(--accent); color: var(--accent); }

  @media (max-width: 760px) {
    body {
      padding-inline: 8px;
    }

    .content {
      padding-inline: 8px;
    }

    .theme-toggle {
      left: calc(-26px * var(--ui-fix-scale, 1));
      opacity: 0.2;
      transition: left 0.15s, opacity 0.15s, border-color 0.15s, color 0.15s, background 0.15s;
    }

    .nav-page-btn {
      left: calc(-26px * var(--ui-fix-scale, 1));
      opacity: 0.2;
      transition: left 0.15s, opacity 0.15s, border-color 0.15s, color 0.15s, background 0.15s;
    }

    .theme-toggle:hover,
    .theme-toggle:focus-visible,
    .nav-page-btn:hover,
    .nav-page-btn:focus-visible {
      left: calc(6px * var(--ui-fix-scale, 1));
      opacity: 1;
    }

    /* Zona de hover invisível: inclui o espaço de "fundo" à esquerda (gutter),
       onde o botão fica escondido. Cobre o botão tanto na posição de repouso
       (left:-26px) quanto na aberta (left:6px) → o mouse nunca sai do :hover ao
       deslizar, eliminando o flicker abre/fecha. Escala junto via transform. */
    .theme-toggle::before,
    .nav-page-btn::before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: -32px;
      width: 64px;
    }

    .nav-btn {
      right: calc(-26px * var(--ui-fix-scale, 1));
      transition: right 0.15s, opacity 0.15s, border-color 0.15s, color 0.15s;
    }

    .nav-btn.visible {
      opacity: 0.2;
    }

    /* Mesma zona de hover, espelhada p/ a direita (gutter à direita). Só captura
       quando o botão está ativo (.visible), evitando interceptar conteúdo. */
    .nav-btn.visible::before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      right: -32px;
      width: 64px;
    }

    .nav-btn:hover,
    .nav-btn:focus-visible {
      right: calc(6px * var(--ui-fix-scale, 1));
      opacity: 1;
    }
  }

  /* ── Copy button ── */
  .btn-copy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 8px 20px;
    background: transparent;
    color: var(--text-dim);
    border: 1px solid var(--border2);
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s;
    margin-top: 8px;
  }
  .btn-copy:hover { border-color: var(--accent); color: var(--accent); }
  .btn-copy.copied { border-color: var(--green); color: var(--green); }

.mini-table-toggle {
  margin-left: 8px;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 2px;
  color: var(--text-dim);
  cursor: pointer;
  padding: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.mini-table-toggle-icon {
  display: block;
  transition: transform 0.15s ease;
}
.mini-table-toggle[aria-expanded="false"] .mini-table-toggle-icon {
  transform: rotate(-90deg);
}
.mini-table-toggle:hover,
.mini-table-toggle:focus-visible {
  border-color: var(--accent);
  color: var(--accent2);
  outline: none;
}
.preview-wrapper.is-collapsed {
  display: none;
}

.preview-wrapper th:not(:last-child),
.preview-wrapper td:not(:last-child) {
  border-right: 1px solid var(--border);
}

/* ── Utilitário base: grupo de botões responsivo ──
   Quebra linha sozinho em zoom alto / container estreito, sem media query.
   Aplique em qualquer linha de botões de ação (todas as páginas). */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.btn-row > * {
  min-width: 0;
}