:root{
  --bg:#f6f7f9; --card:#fff; --line:#e3e6ea; --txt:#1d2128; --mut:#6b7280;
  --acc:#1f6feb; --acc-d:#1858bd; --ok:#17803d; --bad:#b42318; --warn:#9a6700;
  --warn-bg:#fff8e6; --head:#eef1f5;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#14161a; --card:#1b1e24; --line:#2b3038; --txt:#e6e8ec; --mut:#9aa3af;
        --acc:#4f8cff; --acc-d:#3d77e0; --ok:#4ec77f; --bad:#ff7b6b; --warn:#e0b341;
        --warn-bg:#2a2314; --head:#22262d;}
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);
  font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:var(--acc)}
h1,h2{margin:0 0 2px;font-size:17px}
.sub{margin:0;color:var(--mut);font-size:12.5px}
small{color:var(--mut)}
.num{text-align:right;font-variant-numeric:tabular-nums}

header{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 20px;background:var(--card);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px}
.brand strong{display:block;font-size:15px;letter-spacing:.2px}
.brand small{display:block;font-size:12px}
.logo{font-size:22px}
.sair{color:var(--mut);font-size:12.5px;text-decoration:none}
.sair:hover{color:var(--acc)}
main{max-width:1180px;margin:0 auto;padding:20px}

/* --- drop zone --- */
.drop{position:relative;background:var(--card);border:2px dashed var(--line);
  border-radius:14px;padding:38px 20px;text-align:center;transition:.15s;cursor:pointer}
.drop:hover{border-color:var(--acc)}
.drop.over{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 8%,var(--card));
  transform:scale(1.005)}
.drop-ico{font-size:30px;line-height:1;color:var(--acc);margin-bottom:6px}
.drop h2{font-size:18px}
.drop p{margin:4px 0 0;color:var(--mut);font-size:13px}
.drop .link{background:none;border:0;padding:0;color:var(--acc);cursor:pointer;
  font:inherit;text-decoration:underline}
.drop-busy{display:none;position:absolute;inset:0;align-items:center;justify-content:center;
  gap:10px;background:color-mix(in srgb,var(--card) 88%,transparent);border-radius:12px;
  font-weight:600}
.drop.busy{cursor:progress}
.drop.busy .drop-busy{display:flex}
.spin{width:16px;height:16px;border:2px solid var(--line);border-top-color:var(--acc);
  border-radius:50%;animation:g .7s linear infinite}
@keyframes g{to{transform:rotate(360deg)}}

.opcoes{margin:12px 0 0;font-size:13px}
.opcoes summary{cursor:pointer;color:var(--mut);width:fit-content}
.opcoes-in{display:flex;flex-wrap:wrap;gap:18px;align-items:center;
  background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px;margin-top:8px}
.opcoes label{display:flex;align-items:center;gap:7px;color:var(--mut)}
.opcoes .chk{gap:6px}
select,input[type=file]{font:inherit;color:var(--txt);background:var(--bg);
  border:1px solid var(--line);border-radius:7px;padding:4px 6px}

.erro{background:color-mix(in srgb,var(--bad) 12%,var(--card));color:var(--bad);
  border:1px solid color-mix(in srgb,var(--bad) 35%,var(--card));
  border-radius:9px;padding:10px 12px;margin:14px 0;font-size:13px}
.aviso{background:var(--warn-bg);color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 35%,var(--card));
  border-radius:9px;padding:9px 11px;margin:0 0 12px;font-size:12.5px}

.card{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:16px;margin-top:16px}
.res-head{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-bottom:12px}
.btn{display:inline-block;background:var(--acc);color:#fff;border:0;border-radius:9px;
  padding:9px 16px;font:600 13.5px/1 inherit;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--acc-d)}
.btn.ghost{background:none;color:var(--acc);border:1px solid var(--acc);font-weight:600}
.btn.ghost:hover{background:color-mix(in srgb,var(--acc) 10%,transparent)}

table{width:100%;border-collapse:collapse;font-size:12.5px}
th,td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
thead th{background:var(--head);font-size:11.5px;color:var(--mut);font-weight:600;
  text-transform:uppercase;letter-spacing:.3px;white-space:nowrap}
.tot{display:block;overflow-x:auto}
.tot td{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tot th.k,.tot td.k{background:color-mix(in srgb,var(--acc) 7%,transparent);font-weight:700}
.tot td.neg{color:var(--bad)}
.recon{margin:10px 0 0;font-size:12.5px;color:var(--ok)}
.recon.bad{color:var(--bad)}

.mapa-box{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
.mapa-box summary{cursor:pointer;font-weight:600;font-size:13px}
.mapa{margin-top:10px}
.mapa td select{width:100%;max-width:230px}
.mapa tr.adivinhada td{background:var(--warn-bg)}
.badge{display:inline-block;background:var(--warn-bg);color:var(--warn);border-radius:20px;
  padding:1px 9px;font-size:11.5px;font-weight:600;margin-left:6px}
.mapa-acoes{display:flex;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}

.hist{margin-top:28px}
.hist h2{margin-bottom:8px}
.hist table{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.hist td a{text-decoration:none;word-break:break-all}
.hist td a:hover{text-decoration:underline}
.apagar{background:none;border:0;color:var(--mut);cursor:pointer;font-size:13px;padding:2px 6px}
.apagar:hover{color:var(--bad)}

/* --- login --- */
.login-body{display:grid;place-items:center;min-height:100vh;padding:20px}
.login{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:28px;width:100%;max-width:330px;text-align:center}
.login .logo{font-size:34px}
.login h1{font-size:19px;margin-top:6px}
.login input{width:100%;margin:16px 0 10px;padding:10px 12px;border:1px solid var(--line);
  border-radius:9px;background:var(--bg);color:var(--txt);font:inherit}
.login button{width:100%;background:var(--acc);color:#fff;border:0;border-radius:9px;
  padding:10px;font:600 14px/1 inherit;cursor:pointer}
.login button:hover{background:var(--acc-d)}
.login .erro{margin:14px 0 0;text-align:left}

@media (max-width:620px){
  .res-head{flex-direction:column;align-items:stretch}
  .btn{text-align:center}
  main{padding:14px}
}

.badge-n{display:inline-block;background:var(--head);color:var(--mut);border-radius:20px;
  padding:1px 9px;font-size:11.5px;font-weight:600;margin-left:4px}
.func{display:block;max-height:50vh;overflow:auto}
.func td.k{background:color-mix(in srgb,var(--acc) 7%,transparent);font-weight:600}
.func thead th{position:sticky;top:0;z-index:1}

.tot th,.tot td{padding:6px 7px;font-size:12px;white-space:nowrap}
.func td{white-space:nowrap}
.func td:nth-child(2){white-space:normal;min-width:190px}
.func th:nth-child(2){min-width:190px}
.mapa td,.mapa th{white-space:nowrap}
.mapa td:nth-child(3){white-space:normal}

@media (max-width:760px){
  .hist table{display:block;overflow-x:auto;white-space:nowrap}
  .opcoes-in{flex-direction:column;align-items:flex-start;gap:10px}
}