/* kilu.com.br: one stylesheet, system fonts, light and dark from the device's setting. */
:root {
  --bg: #f7f5f0; --surface: #ffffff; --text: #1d1f23; --muted: #5d6169; --line: #dedad2;
  --accent: #1f6f5c; --accent-text: #ffffff; --accent-soft: #e2f0eb; --warn-bg: #fff4dc; --warn-text: #6b4a00;
  --danger: #a33a2c; --radius: 12px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16181c; --surface: #1f2228; --text: #eceae6; --muted: #a5a9b1; --line: #343841;
    --accent: #5cc3a6; --accent-text: #0d1f1a; --accent-soft: #1d332d; --warn-bg: #3a3020; --warn-text: #f3d9a4;
    --danger: #f08a7a;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  overflow-wrap: anywhere;
}
a { color: var(--accent); }
img, canvas { max-width: 100%; height: auto; }
.top, main, .foot { max-width: 760px; margin: 0 auto; padding: 0 16px; }
.top { padding-top: 14px; padding-bottom: 6px; }
.brand { font-weight: 700; font-size: 1.15rem; color: var(--text); text-decoration: none; }
.brand span { font-weight: 400; color: var(--muted); }
h1 { font-size: 1.75rem; line-height: 1.2; margin: 18px 0 8px; }
h2 { font-size: 1.2rem; margin: 28px 0 10px; }
.lead { color: var(--muted); margin: 0 0 18px; font-size: 1.05rem; }
.crumbs { margin: 10px 0 0; color: var(--muted); font-size: .9rem; }
.crumbs a { color: var(--muted); }

.cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.cards a { display: block; height: 100%; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text); text-decoration: none; }
.cards a:hover, .cards a:focus-visible { border-color: var(--accent); }
.cards strong { display: block; margin-bottom: 4px; }
.cards span { color: var(--muted); font-size: .92rem; }

.work { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.drop { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 12px; border: 2px dashed var(--line); border-radius: var(--radius); text-align: center; cursor: pointer; }
.drop.over { border-color: var(--accent); background: var(--accent-soft); }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.drop:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.drop .hint { color: var(--muted); font-size: .9rem; }
.button, button { font: inherit; border-radius: 10px; border: 1px solid transparent; padding: 10px 16px; min-height: 44px; cursor: pointer; }
.button, button.go { background: var(--accent); color: var(--accent-text); font-weight: 600; }
button.go:disabled { opacity: .45; cursor: not-allowed; }
button.secondary { background: transparent; color: var(--text); border-color: var(--line); }
button.small { min-height: 36px; padding: 4px 10px; font-size: .9rem; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px 0 0; }

.items, .results { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; }
.items li, .results li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.items li[draggable="true"] { cursor: grab; }
.items li.dragging { opacity: .5; }
.items .name, .results .name { flex: 1 1 160px; min-width: 0; }
.items .meta, .results .meta { color: var(--muted); font-size: .88rem; display: block; }
.items .actions, .results .actions { display: flex; gap: 6px; }
.results a.dl { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border-radius: 10px; background: var(--accent); color: var(--accent-text); font-weight: 600; text-decoration: none; }
.results .worse { color: var(--danger); }
.thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; background: var(--line); }

.options { margin-top: 14px; display: grid; gap: 10px; }
.field { display: grid; gap: 4px; border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.field { gap: 6px; }
legend { font-weight: 600; padding: 0; margin-bottom: 4px; }
.field input[type="text"], .field input[type="number"], select { font: inherit; padding: 9px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--text); width: 100%; max-width: 360px; min-height: 44px; }
input[type="range"] { width: 100%; max-width: 360px; accent-color: var(--accent); }
.choice { display: block; padding-left: 28px; text-indent: -28px; }
.choice input { accent-color: var(--accent); width: 18px; height: 18px; margin: 0 10px 0 0; vertical-align: -3px; }
.indent { margin-left: 26px; }
.hint { color: var(--muted); font-size: .88rem; margin: 0; }
.note { background: var(--warn-bg); color: var(--warn-text); border-radius: 10px; padding: 10px 12px; margin: 14px 0 0; font-size: .95rem; }
.status { min-height: 1.5em; margin: 10px 0 0; color: var(--muted); }
.status.error { color: var(--danger); }
.private { margin: 16px 0; padding: 10px 12px; border-left: 4px solid var(--accent); background: var(--accent-soft); border-radius: 6px; font-size: .95rem; }

.pages { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.pages figure { margin: 0; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); display: grid; gap: 6px; justify-items: center; }
.pages .frame { width: 100%; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; }
.pages img { max-height: 100%; transition: transform .15s; box-shadow: 0 1px 3px rgba(0,0,0,.25); background: #fff; }
.pages figure.removed img { opacity: .25; }
.pages figcaption { font-size: .85rem; color: var(--muted); }
.pages .actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }

.howto ol { padding-left: 1.3em; }
.faq details { border-bottom: 1px solid var(--line); padding: 10px 0; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq p { margin: 8px 0 0; }
.more { margin-bottom: 20px; }

.text h2 { margin-top: 24px; }
.text .updated { color: var(--muted); font-size: .9rem; }
.table { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }

.foot { margin-top: 32px; padding-top: 16px; padding-bottom: 28px; border-top: 1px solid var(--line); color: var(--muted); font-size: .88rem; }
.foot a { color: var(--muted); }
.foot p { margin: 6px 0 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* /salvar-pagina-pdf/: the bookmarklet (order 051) */
.bm-row { margin: 0 0 10px; text-align: center; }
.bm { display: inline-block; padding: 12px 20px; border-radius: 999px; background: var(--accent); color: var(--accent-text); font-weight: 700; text-decoration: none; cursor: grab; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.bm-h { margin-top: 20px; }
.bm-phone { border-bottom: 1px solid var(--line); padding: 8px 0; }
.bm-phone summary { cursor: pointer; font-weight: 600; }
.bm-phone ol { padding-left: 1.3em; }
.bm-code { width: 100%; min-height: 90px; font: .8rem/1.3 ui-monospace, monospace; margin-top: 8px; }
.builtin ul { padding-left: 1.2em; }
.builtin li { margin: 6px 0; }

/* "Para o seu site e e-mail" (order 051) */
.host { margin: 24px 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.host h2 { margin-top: 0; font-size: 1.05rem; }
.host p { margin: 0 0 8px; color: var(--muted); font-size: .95rem; }
.host ul { margin: 0; padding-left: 1.2em; }
.host li { margin: 6px 0; }
.host li span { color: var(--muted); font-size: .9rem; }

/* Kit do balcão (markup and page.js shared with host.eco.br) */
.kb-lead { margin: 0 0 10px; color: var(--muted); }
.kb-choices { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.kb-choice { display: flex; align-items: center; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--text); text-decoration: none; min-height: 64px; }
.kb-choice:hover, .kb-choice:focus-visible { border-color: var(--accent); }
.kb-choice-text { display: grid; gap: 2px; min-width: 0; }
.kb-choice-text small { color: var(--muted); }
.kb-on { margin-left: auto; font-size: .8rem; font-weight: 600; background: var(--accent); color: var(--accent-text); border-radius: 999px; padding: 2px 8px; }
.kb-adding { padding: 10px 12px; border-radius: 10px; background: var(--accent-soft); margin: 0 0 12px; }
.kb-form { display: grid; gap: 12px; }
.kb-form input, .kb-form select { font: inherit; padding: 9px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--text); width: 100%; min-height: 44px; }
.kb-back { justify-self: start; }
.kb-form-title { margin: 0; }
.kb-form-title:focus { outline: none; }
.kb-part { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 12px; }
.kb-more { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.kb-more summary { cursor: pointer; font-weight: 600; }
.kb-more .field { margin-top: 10px; }
.kb-textbtn { font: inherit; min-height: 0; padding: 0 4px; background: none; border: 0; color: var(--accent); text-decoration: underline; }
.kb-result { margin-top: 18px; }
.kb-result:focus { outline: none; }
.kb-cards { display: grid; gap: 14px; }
.kb-card { padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); min-width: 0; }
.kb-card .kb-qr { display: block; width: 100%; max-width: 240px; margin: 0 auto 12px; }
.ss-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.btn { font: inherit; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--text); padding: 8px 14px; min-height: 44px; }
.kb-facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 10px 0; font-size: .95rem; }
.kb-facts dt { color: var(--muted); }
.kb-facts dd { margin: 0; min-width: 0; }
.kb-code { display: block; width: 100%; font: .82rem/1.4 ui-monospace, monospace; padding: 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--text); resize: none; }
.kb-link { display: block; font-size: .95rem; }
.kb-status { margin: 0 0 8px; color: var(--accent); }
.kb-warning { margin: 10px 0 0; font-size: .92rem; color: var(--warn-text); background: var(--warn-bg); border-radius: 8px; padding: 8px 10px; }
.kb-onsign { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 10px 0 0; padding: 0; }
.kb-onsign li { display: flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: .92rem; }
.kb-off { font: inherit; font-size: .88rem; min-height: 32px; padding: 2px 8px; background: none; border: 0; color: var(--accent); text-decoration: underline; }
.kb-sign { container-type: inline-size; display: flex; flex-direction: column; aspect-ratio: 210 / 297; max-width: 420px; margin-top: 12px; padding: 6cqw 5cqw 4cqw; border-radius: 8px; background: #fff; color: #111; text-align: center; box-shadow: 0 6px 20px rgba(0,0,0,.2); overflow: hidden; }
.kb-sign h2 { color: #111; font-size: 8cqw; line-height: 1.1; margin: 0; }
.kb-sign-grid { flex: 1; display: grid; align-content: center; justify-items: center; gap: 3cqw; }
.kb-block { min-width: 0; }
.kb-block h3 { color: #111; font-size: 5.8cqw; line-height: 1.15; margin: 0; }
.kb-block .kb-qr { display: block; width: 44cqw; margin: 1.5cqw auto; }
.kb-sign-grid[data-count="1"] .kb-qr { width: 72cqw; }
.kb-sign-grid[data-count="1"] .kb-block h3 { font-size: 8cqw; }
.kb-sign-grid[data-count="3"], .kb-sign-grid[data-count="4"] { grid-template-columns: 1fr 1fr; }
.kb-sign-grid[data-count="3"] .kb-qr, .kb-sign-grid[data-count="4"] .kb-qr { width: 38cqw; }
.kb-sign-grid[data-count="3"] .kb-block h3, .kb-sign-grid[data-count="4"] .kb-block h3 { font-size: 4.6cqw; }
.kb-sign-grid[data-count="3"] .kb-block:first-child { grid-column: 1 / -1; }
.kb-note { font-size: 4cqw; font-weight: 600; margin: 0; }
.kb-foot { font-size: 3cqw; color: #444; margin: 0; }
.kb-actions { display: grid; gap: 10px; margin-top: 14px; }
@page { size: A4; margin: 12mm; }
@media print {
  body:has(.kb-page) { background: #fff !important; }
  body:has(.kb-page) > :not(main), main:has(.kb-page) > :not(.work), .kb-page > :not(.kb-result), .kb-result > :not(.kb-sign) { display: none !important; }
  main:has(.kb-page), main:has(.kb-page) .work { max-width: none; padding: 0; margin: 0; border: 0; background: none; }
  .kb-sign { container-type: normal; aspect-ratio: auto; max-width: none; box-shadow: none; height: 270mm; margin: 0; padding: 0; border-radius: 0; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .kb-sign h2 { font-size: 15mm; margin-top: 12mm; }
  .kb-block h3 { font-size: 10mm; }
  .kb-block .kb-qr { width: 88mm; }
  .kb-sign-grid[data-count="1"] .kb-qr { width: 140mm; }
  .kb-sign-grid[data-count="1"] .kb-block h3 { font-size: 14mm; }
  .kb-sign-grid[data-count="3"] .kb-qr, .kb-sign-grid[data-count="4"] .kb-qr { width: 78mm; }
  .kb-sign-grid[data-count="3"] .kb-block h3, .kb-sign-grid[data-count="4"] .kb-block h3 { font-size: 8mm; }
  .kb-note { font-size: 7mm; }
  .kb-foot { font-size: 4mm; margin-bottom: 4mm; }
}

/* Gerador de QR code */
.qr-form { display: grid; gap: 12px; }
.qr-form input[type="text"], .qr-form textarea { font: inherit; padding: 9px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--text); width: 100%; min-height: 44px; }
.qr-form [data-kind] { display: grid; gap: 10px; }
.qr-result { margin-top: 16px; text-align: center; }
.qr-svg { display: block; width: 100%; max-width: 260px; margin: 0 auto 8px; }
.qr-result .row { justify-content: center; }

/* Assinar PDF */
.sig-maker { margin-top: 14px; display: grid; gap: 10px; }
.sig-maker h2 { margin: 0; }
.sig-pad { display: block; width: 100%; max-width: 600px; aspect-ratio: 600 / 220; height: auto; background: #fff; border: 2px dashed var(--line); border-radius: 10px; touch-action: none; cursor: crosshair; }
.sig-pages { margin-top: 16px; }
.sig-nav { justify-content: center; }
.sig-stage { position: relative; width: 100%; max-width: 560px; margin: 8px auto; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.3); user-select: none; -webkit-user-select: none; }
.sig-stage > img { display: block; width: 100%; height: 100%; }
.sig-box { position: absolute; border: 1.5px dashed var(--accent); touch-action: none; cursor: move; }
.sig-box:focus-visible { outline: 2px solid var(--accent); }
.sig-box img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.sig-datetext { position: absolute; left: 0; right: 0; top: 100%; font: 11px/1.3 system-ui, sans-serif; color: #1a1a1a; pointer-events: none; }
.sig-x { position: absolute; top: -14px; right: -14px; width: 28px; height: 28px; min-height: 28px; padding: 0; border-radius: 50%; background: var(--danger); color: #fff; font-size: .8rem; line-height: 1; }
.sig-resize { position: absolute; right: -10px; bottom: -10px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); border: 2px solid #fff; cursor: nwse-resize; touch-action: none; }

/* Foto 3x4 */
.ph-work { margin-top: 14px; display: grid; gap: 12px; }
.ph-stage { display: grid; place-items: center; }
#ph-canvas { width: 100%; max-width: 240px; border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,.3); touch-action: none; cursor: grab; }

/* Remover dados da foto: what each photo carries */
.found { flex: 1 1 100%; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 4px 0 0; font-size: .88rem; }
.found dt { color: var(--muted); }
.found dd { margin: 0; min-width: 0; }
.found dd.gps { color: var(--danger); font-weight: 600; }
.found.none { display: block; color: var(--muted); }

/* Organizar páginas */
.pages.sortable figure { cursor: grab; }
.pages .mark { display: inline-flex; align-items: center; gap: 4px; font-size: .88rem; }
.pages .mark input { width: 18px; height: 18px; accent-color: var(--accent); }

/* /ver-pagina/ (order 052): the link, the options and the page in its frame. */
.ver-form input[type="url"] { font: inherit; padding: 9px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--text); width: 100%; min-height: 44px; }
.ver-opts { border: 1px solid var(--line); border-radius: 10px; margin: 14px 0 0; padding: 8px 12px 10px; display: grid; gap: 6px; min-width: 0; }
.ver-opts legend { font-weight: 600; padding: 0 4px; }
.ver-opts label { display: flex; gap: 8px; align-items: flex-start; }
.ver-opts input { margin-top: .3em; flex: none; }
.ver-meta { margin-top: 12px; }
/* The viewer (order 055): a slim bar over the frame. Under the form until a page is ready, then the whole screen
   (html.ver-full); "Voltar" puts it back. Menus drop over the frame. */
.ver-view { margin: 14px -8px 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.ver-bar { position: relative; display: flex; align-items: center; gap: 6px; padding: 6px; min-width: 0; }
.vb { font: inherit; font-size: .9rem; min-height: 36px; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: var(--text); text-decoration: none; display: inline-flex; align-items: center; white-space: nowrap; cursor: pointer; flex: none; }
.ver-host { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: .85rem; }
.ver-menu { flex: none; }
.ver-menu > summary { list-style: none; }
.ver-menu > summary::-webkit-details-marker { display: none; }
.ver-menu > summary::after { content: " ▾"; font-size: .75em; }
.ver-menu[open] > summary { border-color: var(--accent); background: var(--accent-soft); }
.ver-pop { position: absolute; z-index: 2; top: 100%; right: 6px; width: min(440px, calc(100% - 12px)); max-height: calc(100dvh - 70px); overflow: auto; padding: 4px 12px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.ver-pop .row { margin-top: 10px; }
.ver-say { margin: 0; padding: 0 8px 4px; font-size: .82rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ver-say:empty { display: none; }
.ver-say.error { color: var(--danger); }
.ver-frame-wrap { flex: 1 1 auto; min-height: 0; border-top: 1px solid var(--line); overflow: hidden; background: #fff; border-radius: 0 0 10px 10px; }
#ver-frame { display: block; width: 100%; height: 75vh; min-height: 420px; border: 0; background: #fff; }
html.ver-full, html.ver-full body { overflow: hidden; }
html.ver-full .ver-view { position: fixed; inset: 0; z-index: 50; margin: 0; height: 100vh; height: 100dvh; border: 0; border-radius: 0; }
html.ver-full .ver-frame-wrap { border-radius: 0; }
html.ver-full #ver-frame { height: 100%; min-height: 0; }
@media (max-width: 359px) { .ver-host { display: none; } }
.bm-ver { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.bm-title { margin: 0 0 10px; }
.bm-opt { margin: 0 0 8px; text-align: center; font-size: .92rem; }
.group-note { margin: -4px 0 10px; color: var(--muted); font-size: .95rem; }
.ver-work { position: fixed; left: -12000px; top: 0; height: 844px; border: 0; pointer-events: none; }
.ver-terms { margin-top: 14px; }
.limits ul { padding-left: 1.2em; }

/* Order 053: the readers (Ler XML da nota, Ler boleto, Ler Pix) */
.read-form { display: grid; gap: 12px; }
.read-form textarea { font: .95rem/1.4 ui-monospace, monospace; padding: 9px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--text); width: 100%; min-height: 44px; resize: vertical; }
.file-button { position: relative; display: inline-flex; align-items: center; }
.button.secondary { background: transparent; color: var(--text); border-color: var(--line); font-weight: 400; }
.file-button input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.file-button:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.read-result { margin-top: 12px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.read-head { margin: 0 0 6px; font-weight: 600; }
.facts { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 4px 12px; margin: 6px 0; font-size: .95rem; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.facts dd.mono { font: .88rem/1.4 ui-monospace, monospace; }
.read-warn { margin: 10px 0 0; padding: 8px 10px 8px 28px; color: var(--warn-text); background: var(--warn-bg); border-radius: 8px; font-size: .95rem; }
.nfe-skipped { margin: 10px 0 0; padding-left: 1.2em; color: var(--muted); font-size: .92rem; overflow-wrap: anywhere; }
.nfe-out { display: grid; gap: 18px; margin-top: 14px; }
.nfe-note { padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); min-width: 0; }
.nfe-note h2 { margin: 0 0 4px; font-size: 1.2rem; }
.nfe-note h3 { margin: 14px 0 4px; font-size: 1rem; }
.nfe-key { margin: 6px 0 0; display: grid; gap: 2px; }
.nfe-key span { color: var(--muted); font-size: .88rem; }
.nfe-key b { font: 600 .92rem/1.4 ui-monospace, monospace; overflow-wrap: anywhere; }
.nfe-parties { display: grid; gap: 0 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.nfe-items td small { display: block; color: var(--muted); font-size: .8rem; }
.nfe-items td.n, .nfe-list td.n { text-align: right; white-space: nowrap; }
.nfe-items { font-size: .88rem; }
.nfe-total { display: flex; justify-content: space-between; gap: 8px; margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--line); font-size: 1.1rem; }
.nfe-aid { margin: 12px 0 0; color: var(--muted); font-size: .82rem; }
@media print {
  body:has(.nfe-out) { background: #fff !important; color: #000; }
  body:has(.nfe-out) > :not(main), main:has(.nfe-out) > :not(.work), .work:has(.nfe-out) > :not(.nfe-out) { display: none !important; }
  main:has(.nfe-out), main:has(.nfe-out) .work { max-width: none; padding: 0; margin: 0; border: 0; background: none; }
  .nfe-note { border: 0; padding: 0; break-after: page; }
  .nfe-list { break-after: page; }
  .nfe-note, .nfe-note * { color: #000 !important; background: none !important; }
}
@media (max-width: 599px) {
  .nfe-items thead { display: none; }
  .nfe-items tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--line); }
  .nfe-items td { display: flex; justify-content: space-between; gap: 12px; padding: 1px 0; border: 0; }
  .nfe-items td:empty, .nfe-items td[data-label="#"] { display: none; }
  .nfe-items td.d { display: block; font-weight: 600; }
  .nfe-items td.d small { font-weight: 400; }
  .nfe-items td[data-label]::before { content: attr(data-label); color: var(--muted); }
}

/* Order 053, part B: Tarjar, Escanear, OCR */
.rd-work { margin-top: 12px; }
.rd-stage { position: relative; margin: 10px auto 0; max-width: 560px; touch-action: none; user-select: none; -webkit-user-select: none; box-shadow: 0 1px 4px rgba(0,0,0,.25); background: #fff; cursor: crosshair; }
.rd-stage img { display: block; width: 100%; height: auto; pointer-events: none; }
.rd-box { position: absolute; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 0; background: #000; opacity: .85; cursor: pointer; }
.rd-box:hover, .rd-box:focus-visible { outline: 2px solid var(--danger); opacity: .7; }
.rd-ghost { pointer-events: none; opacity: .5; }
.sc-pick { margin-top: 0; }
.sc-edit { margin-top: 14px; display: grid; gap: 12px; }
.sc-stage { position: relative; max-width: 560px; width: 100%; margin: 0 auto; touch-action: none; }
.sc-stage canvas { display: block; width: 100%; height: auto; border-radius: 6px; }
.sc-shape { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sc-shape polygon { fill: rgba(92, 195, 166, .18); stroke: #5cc3a6; stroke-width: 4; vector-effect: non-scaling-stroke; }
.sc-h { position: absolute; width: 36px; height: 36px; min-height: 0; margin: -18px 0 0 -18px; padding: 0; border-radius: 50%; border: 3px solid #fff; background: rgba(31, 111, 92, .85); box-shadow: 0 1px 4px rgba(0,0,0,.5); touch-action: none; cursor: grab; }
.sc-h:focus-visible { outline: 3px solid #f5b400; }
.items .thumb { width: 48px; height: 64px; object-fit: contain; background: #fff; }
.ocr-out { margin-top: 14px; }
.ocr-out textarea { font: .95rem/1.5 ui-monospace, monospace; padding: 9px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--text); width: 100%; resize: vertical; }
a.button.secondary { text-decoration: none; display: inline-flex; align-items: center; }

/* Order 056 (D-60): when a site refuses the Kilu fetcher, /ver-pagina/ offers "Kilu: limpar e salvar" under the error. */
.ver-refused { margin-top: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.ver-refused .row { text-align: center; }
.ver-refused a.button { max-width: 100%; overflow-wrap: anywhere; }