:root{
  --bg:#14161a; --panel:#1c1f25; --line:#2b2f37; --txt:#e6e8ec; --dim:#8b929e;
  --ok:#3fb950; --no:#f85149; --sel:#58a6ff;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--txt);
  font:15px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-text-size-adjust:100%}
a{color:var(--sel)}
button,select,input{font:inherit;color:var(--txt)}
button,select{background:var(--line);border:1px solid transparent;border-radius:8px;
  padding:7px 12px;cursor:pointer}
button:hover,select:hover{border-color:var(--dim)}
button.on{background:var(--sel);color:#08101c;font-weight:600}
button:disabled{opacity:.4;cursor:default}

/* ---------- login ---------- */
body.login{display:grid;place-items:center;padding:24px}
body.login form{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:28px;width:min(360px,100%);display:flex;flex-direction:column;gap:14px}
body.login h1{margin:0;font-size:19px;font-weight:600}
body.login input{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:11px}
body.login button{background:var(--sel);color:#08101c;font-weight:600;padding:11px}
.err{color:var(--no);margin:0;font-size:13px}

/* ---------- layout ---------- */
header{position:sticky;top:0;z-index:20;background:var(--panel);
  border-bottom:1px solid var(--line);padding:9px 14px;
  display:flex;gap:10px;align-items:center;flex-wrap:wrap}
header h1{font-size:15px;margin:0;font-weight:600;white-space:nowrap}
.sv{width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:var(--ok)}
.sv.busy{background:var(--sel)} .sv.err{background:var(--no)}
.grow{flex:1}
.stat{font-size:13px;color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.stat b{color:var(--txt)}
.bar{height:5px;background:var(--line);border-radius:3px;overflow:hidden;min-width:90px;flex:1}
.bar>div{height:100%;background:var(--ok);width:0;transition:width .2s}

main{display:grid;grid-template-columns:230px 1fr;gap:0;min-height:calc(100vh - 52px)}
#cats{border-right:1px solid var(--line);background:var(--panel);padding:10px;overflow-y:auto}
#cats button{display:block;width:100%;text-align:left;background:none;border:none;
  border-radius:6px;padding:6px 8px;font-size:13px;color:var(--dim)}
#cats button:hover{background:var(--line);color:var(--txt)}
#cats button.on{background:var(--sel);color:#08101c;font-weight:600}
#cats .n{float:right;font-size:11px;opacity:.75}

#body{padding:12px;display:flex;flex-direction:column;gap:12px}
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.toolbar .sp{flex:1}

#grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.card{position:relative;border:2px solid var(--line);border-radius:10px;overflow:hidden;
  background:#fff;padding-top:100%;cursor:pointer}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.card.ok{border-color:var(--ok)} .card.no{border-color:var(--no);opacity:.55}
.card .tag{position:absolute;left:0;right:0;bottom:0;background:rgba(10,12,16,.84);
  color:#cfd4dc;font-size:10px;padding:3px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .mark{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;font-size:13px;font-weight:700;color:#08101c}
.card .mark.ok{background:var(--ok)} .card .mark.no{background:var(--no);color:#fff}
.empty{color:var(--dim);padding:30px;text-align:center}

.pager{display:flex;gap:8px;align-items:center;justify-content:center;
  flex-wrap:wrap;padding:6px 0 20px}
.pager .pg{color:var(--dim);font-size:13px;font-variant-numeric:tabular-nums}

/* ---------- visualizador ---------- */
#viewer{position:fixed;inset:0;background:#0b0d10;z-index:60;display:none;
  grid-template-rows:1fr auto}
#viewer.open{display:grid}
#vimg{width:100%;height:100%;object-fit:contain;background:#fff;min-height:0}
#vbar{background:var(--panel);border-top:1px solid var(--line);padding:10px 12px;
  display:flex;flex-direction:column;gap:9px}
#vmeta{font-size:12px;color:var(--dim);text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acts{display:flex;gap:8px}
.acts button{flex:1;padding:13px;font-weight:600}
#bOk{background:var(--ok);color:#08101c} #bNo{background:var(--no);color:#fff}
.reasons{display:grid;grid-template-columns:repeat(auto-fit,minmax(115px,1fr));gap:6px}
.reasons button{font-size:12px;padding:8px 6px}

/* estado do veredito atual: anel + brilho, para ler por cima das cores base */
#bOk.on,#bNo.on{box-shadow:0 0 0 3px #fff inset,0 0 0 2px currentColor;
  filter:brightness(1.12);font-weight:800}
.reasons button.on{background:var(--no);color:#fff;font-weight:700;
  box-shadow:0 0 0 2px rgba(255,255,255,.55) inset}

/* aviso de confirmacao */
.toast{position:absolute;left:50%;top:14px;transform:translate(-50%,-14px);
  z-index:70;padding:9px 16px;border-radius:999px;font-size:13px;font-weight:600;
  white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis;
  opacity:0;pointer-events:none;transition:opacity .14s,transform .14s;
  box-shadow:0 4px 18px rgba(0,0,0,.45)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.ok{background:var(--ok);color:#08101c}
.toast.no{background:var(--no);color:#fff}
.toast.un{background:var(--line);color:var(--txt)}
/* comentario */
.cbox{position:relative;display:flex;align-items:center;gap:8px}
.cbox input{flex:1;background:var(--bg);border:1px solid var(--line);border-radius:8px;
  padding:10px 12px;font-size:13px;min-width:0}
.cbox input:focus{outline:none;border-color:var(--sel)}
.cbox input.tem{border-color:var(--sel);background:#1a2432}
.cstate{font-size:11px;color:var(--dim);min-width:52px;text-align:right}
.cstate.ok{color:var(--ok)}
.card .cm{position:absolute;top:6px;left:6px;font-size:13px;
  background:rgba(10,12,16,.82);border-radius:6px;padding:1px 4px;line-height:1.3}

.vnav{display:flex;gap:8px}
.vnav button{flex:1}

@media(max-width:760px){
  main{grid-template-columns:1fr}
  #cats{border-right:none;border-bottom:1px solid var(--line);max-height:190px}
  #grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
  header{padding:8px 10px}
  header h1{font-size:14px}
}