@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/barlow-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/barlow-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/barlow-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow Semi Condensed";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/barlow-semi-condensed-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow Semi Condensed";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/barlow-semi-condensed-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow Semi Condensed";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/barlow-semi-condensed-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2")}

:root{
  --bg:#EEF1F2; --surface:#FFFFFF; --surface-2:#F6F8F8; --ink:#17212B; --ink-2:#4A5764; --line:#C9D1D6; --line-2:#E1E6E9;
  --sw:#F2C200; --sw-ink:#4A3B00; --sw-soft:#FFF6CC;
  --il:#FFFFFF; --il-edge:#17212B;
  --red:#C2362E; --red-soft:#FBE4E2; --amber:#B97800; --amber-soft:#FFF0CF; --green:#2B7A4B; --green-soft:#DFF2E6;
  --focus:#1F6FD1; --btn:#17212B; --btn-ink:#FFFFFF;
  --mono:"IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --sans:"Barlow", "Segoe UI", system-ui, sans-serif;
  --cond:"Barlow Semi Condensed", "Barlow", "Arial Narrow", sans-serif;
  color-scheme: light;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#11171C; --surface:#1A2229; --surface-2:#202A32; --ink:#E7ECEF; --ink-2:#A5B1BA; --line:#36434D; --line-2:#2A353E;
    --sw:#E0B400; --sw-ink:#FFE680; --sw-soft:#3A3100; --il:#E7ECEF; --il-edge:#E7ECEF;
    --red:#F0776F; --red-soft:#4A2321; --amber:#F0B640; --amber-soft:#43330F; --green:#6BCB8E; --green-soft:#1C3A28;
    --focus:#6FA8F0; --btn:#E7ECEF; --btn-ink:#11171C; color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#11171C; --surface:#1A2229; --surface-2:#202A32; --ink:#E7ECEF; --ink-2:#A5B1BA; --line:#36434D; --line-2:#2A353E;
  --sw:#E0B400; --sw-ink:#FFE680; --sw-soft:#3A3100; --il:#E7ECEF; --il-edge:#E7ECEF;
  --red:#F0776F; --red-soft:#4A2321; --amber:#F0B640; --amber-soft:#43330F; --green:#6BCB8E; --green-soft:#1C3A28;
  --focus:#6FA8F0; --btn:#E7ECEF; --btn-ink:#11171C; color-scheme: dark;
}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.wrap{max-width:1240px;margin:0 auto;padding:24px 20px 64px}
header.top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;border-bottom:2px solid var(--ink);padding-bottom:14px;margin-bottom:22px}
h1{font-family:var(--cond);font-weight:700;font-size:clamp(26px,4vw,36px);line-height:1.05;margin:0;letter-spacing:-.01em}
.sub{color:var(--ink-2);margin:6px 0 0;max-width:62ch}
.rule{font-family:var(--cond);font-weight:600;font-size:15px;color:var(--ink-2);text-align:right;max-width:34ch}
h2{font-family:var(--cond);font-weight:600;font-size:22px;margin:0 0 12px}
h3{font-family:var(--cond);font-weight:600;font-size:18px;margin:0}

.inputs{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:stretch}
.swap{align-self:center;background:var(--surface);border:1px solid var(--line);border-radius:999px;width:44px;height:44px;font-size:18px;cursor:pointer;color:var(--ink)}
.zone{background:var(--surface);border:1px solid var(--line);border-radius:6px;display:flex;flex-direction:column;min-height:230px;position:relative;overflow:hidden}
.zone .tag{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line-2)}
.swatch{width:22px;height:22px;border-radius:3px;flex:none}
.zone[data-side="sw"] .swatch{background:var(--sw)}
.zone[data-side="il"] .swatch{background:var(--il);border:2px solid var(--il-edge)}
.zone[data-side="sw"]{border-top:5px solid var(--sw)}
.zone[data-side="il"]{border-top:5px solid var(--il-edge)}
.zone .tag small{color:var(--ink-2);font-size:13px;margin-left:auto}
.drop{flex:1;margin:12px;border:2px dashed var(--line);border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:18px;gap:6px;cursor:pointer;color:var(--ink-2);background:var(--surface-2)}
.drop:hover,.drop.over{border-color:var(--ink);color:var(--ink)}
.drop.active{border-color:var(--focus)}
.drop strong{color:var(--ink);font-weight:600}
.drop .fmt{font-size:13px}
.filecard{margin:12px;display:flex;gap:12px;align-items:center;border:1px solid var(--line-2);border-radius:6px;padding:10px;background:var(--surface-2)}
.filecard img{width:72px;height:72px;object-fit:cover;object-position:top;border:1px solid var(--line);border-radius:3px;background:#fff}
.filecard .ph{width:72px;height:72px;display:grid;place-items:center;border:1px solid var(--line);border-radius:3px;font-family:var(--mono);font-size:13px;color:var(--ink-2)}
.filecard .meta{min-width:0;flex:1}
.filecard .name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filecard .st{font-size:14px;color:var(--ink-2)}
.st.err{color:var(--red)} .st.ok{color:var(--green)}
.link{background:none;border:0;padding:0;color:var(--focus);font:inherit;font-size:14px;cursor:pointer;text-decoration:underline}
.colpick{margin:0 12px 12px;padding:10px;border:1px solid var(--amber);background:var(--amber-soft);border-radius:6px;font-size:14px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
select,input[type=text]{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:5px 8px}

.actionbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:18px 0 8px}
.btn{font-family:var(--cond);font-weight:600;font-size:18px;background:var(--btn);color:var(--btn-ink);border:0;border-radius:5px;padding:12px 26px;cursor:pointer}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.sec{background:var(--surface);color:var(--ink);border:1px solid var(--line);font-size:16px;padding:9px 16px}
.progress{display:flex;align-items:center;gap:10px;color:var(--ink-2);font-size:15px}
.spin{width:18px;height:18px;border:3px solid var(--line);border-top-color:var(--ink);border-radius:50%;animation:sp 0.9s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.spin{animation-duration:3s}}
.notice{border-left:4px solid var(--amber);background:var(--amber-soft);padding:10px 14px;border-radius:0 6px 6px 0;margin:10px 0;font-size:15px}
.notice.err{border-color:var(--red);background:var(--red-soft)}

/* Veredito: o elemento de destaque da página */
.verdict{margin:26px 0 0;border-radius:6px;padding:20px 24px;display:grid;grid-template-columns:auto 1fr;gap:6px 20px;align-items:center;border:2px solid currentColor}
.verdict .big{font-family:var(--cond);font-weight:700;font-size:clamp(28px,5vw,48px);line-height:1;grid-row:span 2}
.verdict .msg{font-weight:600;font-size:17px;color:var(--ink)}
.verdict .why{color:var(--ink-2);font-size:15px}
.verdict.iguais{color:var(--green);background:var(--green-soft)}
.verdict.divergente{color:var(--red);background:var(--red-soft)}
.verdict.inconclusivo,.verdict.sem_dados{color:var(--amber);background:var(--amber-soft)}

.figures{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:6px;background:var(--surface);margin:14px 0 26px;overflow:hidden}
.fig{padding:12px 16px;border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.fig:nth-child(4n){border-right:0}
.fig b{display:block;font-family:var(--cond);font-size:28px;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums}
.fig span{font-size:14px;color:var(--ink-2)}
.fig.r b{color:var(--red)} .fig.a b{color:var(--amber)} .fig.g b{color:var(--green)}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:18px;margin-bottom:22px}
.panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.scroll{overflow-x:auto;max-width:100%}
table{border-collapse:collapse;width:100%;font-size:15px}
th{font-family:var(--cond);font-weight:600;text-align:left;padding:8px 10px;border-bottom:2px solid var(--ink);white-space:nowrap}
td{padding:7px 10px;border-bottom:1px solid var(--line-2);vertical-align:top}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.code{font-family:var(--mono);font-weight:500;letter-spacing:.02em}
.pill{display:inline-block;font-size:13px;font-weight:600;padding:1px 8px;border-radius:3px;white-space:nowrap}
.pill.r{background:var(--red-soft);color:var(--red)} .pill.a{background:var(--amber-soft);color:var(--amber)} .pill.g{background:var(--green-soft);color:var(--green)}
.src{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.src i{width:12px;height:12px;border-radius:2px;display:inline-block}
.src i.sw{background:var(--sw)} .src i.il{background:var(--il);border:2px solid var(--il-edge)}
.muted{color:var(--ink-2)}
.empty{color:var(--ink-2);padding:10px 0}

.tabs{display:flex;gap:4px;border-bottom:2px solid var(--ink);margin-bottom:16px;flex-wrap:wrap}
.tab{font-family:var(--cond);font-weight:600;font-size:17px;background:none;border:0;padding:8px 14px;cursor:pointer;color:var(--ink-2);border-radius:5px 5px 0 0}
.tab[aria-selected="true"]{background:var(--ink);color:var(--surface)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.edit td{padding:4px 6px}
.edit input[type=text]{width:100%;min-width:70px;padding:4px 6px}
.edit input.c{font-family:var(--mono)}
.edit input.q{text-align:right;max-width:80px}
tr.s-erro td:first-child{box-shadow:inset 4px 0 var(--red)}
tr.s-atencao td:first-child{box-shadow:inset 4px 0 var(--amber)}
tr.s-ok td:first-child{box-shadow:inset 4px 0 var(--green)}
tr.s-erro{background:color-mix(in srgb, var(--red-soft) 70%, transparent)}
tr.s-atencao{background:color-mix(in srgb, var(--amber-soft) 70%, transparent)}
.why-cell{font-size:13px;color:var(--ink-2);max-width:220px}
.icon-btn{background:none;border:1px solid var(--line);border-radius:4px;color:var(--ink-2);cursor:pointer;padding:2px 8px;font-size:14px}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:14px;color:var(--ink-2);margin-bottom:12px}
.legend span{display:inline-flex;gap:6px;align-items:center}
.legend i{width:14px;height:14px;border-radius:2px;display:inline-block}
.viewer{position:relative;display:inline-block;max-width:100%;border:1px solid var(--line);background:#fff;line-height:0}
.viewer img{max-width:100%;display:block}
.band{position:absolute;left:0;right:0;border:2px solid;pointer-events:none}
.band.erro{border-color:#D3261B;background:rgba(220,40,30,.20)}
.band.atencao{border-color:#D99A00;background:rgba(245,190,0,.25)}
.band.ok{border-color:#2B7A4B;background:rgba(43,140,80,.12)}
.page-label{font-size:14px;color:var(--ink-2);margin:12px 0 6px}
.exports{display:flex;gap:10px;flex-wrap:wrap}
details.tests{margin-top:30px;font-size:14px;color:var(--ink-2)}
details.tests summary{cursor:pointer}
.test-ok{color:var(--green)} .test-fail{color:var(--red)}
footer{margin-top:28px;font-size:13px;color:var(--ink-2);border-top:1px solid var(--line);padding-top:12px}
.drop{cursor:default;min-height:150px}
.pastearea{cursor:text;caret-color:transparent;outline:none;display:flex;flex-direction:column;align-items:center;gap:6px;align-self:stretch;padding:6px}
.zone.active-zone .drop,.drop:focus-within{border-color:var(--focus);border-style:solid;background:color-mix(in srgb,var(--focus) 6%,var(--surface-2))}
.drop .big{font-family:var(--cond);font-weight:600;font-size:20px;color:var(--ink);line-height:1.3}
.kbd{font-family:var(--mono);font-size:13px;border:1px solid var(--line);border-bottom-width:2px;border-radius:3px;padding:0 5px;background:var(--surface);color:var(--ink)}
.drop .ready{font-size:13px;color:var(--focus);font-weight:600;visibility:hidden}
.zone.active-zone .ready,.drop:focus-within .ready{visibility:visible}
.drop-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.drop-actions .btn.sec{font-size:15px;padding:7px 14px}
.preview{margin:0 12px 6px;border:2px solid var(--line);border-radius:6px;background:#fff;max-height:280px;overflow:auto;caret-color:transparent;outline:none;line-height:0;cursor:text}
.preview:focus,.preview.active{border-color:var(--focus)}
.preview img{width:100%;display:block;pointer-events:none}
.phint{margin:0 12px 12px;font-size:13px;color:var(--ink-2)}
.zone.active-zone .phint{color:var(--focus)}
.zmsg{margin:0 12px 12px;font-size:14px;padding:8px 10px;border-radius:0 4px 4px 0;border-left:4px solid var(--amber);background:var(--amber-soft)}
.zmsg.err{border-color:var(--red);background:var(--red-soft)}
.zmsg.ok{border-color:var(--green);background:var(--green-soft)}
dialog.zoom{max-width:96vw;max-height:94vh;padding:0;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink);overflow:auto}
dialog.zoom::backdrop{background:rgba(0,0,0,.6)}
dialog.zoom .zbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 12px;border-bottom:1px solid var(--line);position:sticky;top:0;left:0;background:var(--surface)}
dialog.zoom img{display:block;max-width:none;background:#fff}
.top-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.edit-actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px}
.pv-stage{position:relative}
.pv-crop{position:absolute;border:3px solid var(--focus);box-shadow:0 0 0 9999px rgba(10,20,30,.35);pointer-events:none}
.preview{position:relative}
.zactions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
#zoom-hint{font-size:14px}
#zoom-stage{position:relative;display:inline-block;line-height:0;user-select:none;touch-action:none}
#zoom-stage.selecting{cursor:crosshair}
#zoom-sel{position:absolute;display:none;border:3px solid var(--focus);background:rgba(31,111,209,.12);pointer-events:none}
.update{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom,0px));background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:10px 14px;display:flex;gap:12px;align-items:center;box-shadow:0 6px 20px rgba(0,0,0,.18);z-index:5}
[hidden]{display:none !important}
@media (max-width:860px){
  .inputs{grid-template-columns:1fr}
  .swap{justify-self:center;transform:rotate(90deg)}
  .split{grid-template-columns:1fr}
  .figures{grid-template-columns:repeat(2,1fr)}
  .fig:nth-child(4n){border-right:1px solid var(--line-2)}
  .fig:nth-child(2n){border-right:0}
  .rule{text-align:left}
  .verdict{grid-template-columns:1fr}
  .verdict .big{grid-row:auto}
}