:root{--ink:#0e0d0c;--coal:#171513;--coal2:#1d1a17;--line:#2c2823;--ash:#9a9288;--bone:#f1ebe2;--fire:#ff6a13;--fire-d:#e55a07;--ok:#58c47f;--bad:#ef5b5b;--warn:#e8b13a;
--display:"Bricolage Grotesque","Instrument Sans",system-ui,sans-serif;--body:"Instrument Sans",system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace}
*{box-sizing:border-box}
@media(min-width:761px){html{zoom:.9}}
body{margin:0;background:var(--ink);color:var(--bone);font:15px/1.5 var(--body);-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.02em;margin:0}
.grow{flex:1}
.mono{font-family:var(--mono)}
.muted{color:var(--ash)}
/* login */
#login{min-height:100vh;display:grid;place-items:center;padding:20px}
.login-box{width:min(400px,100%);background:var(--coal);border:1px solid var(--line);border-radius:12px;padding:30px;display:flex;flex-direction:column;gap:16px;box-shadow:0 30px 70px rgba(0,0,0,.5)}
.login-box p{margin:0;color:var(--ash);font-size:14px}
.brand{display:flex;align-items:center;gap:10px;font:700 19px var(--display)}
/* topo */
.top{position:fixed;inset:0 0 auto 0;height:56px;z-index:30;display:flex;align-items:center;gap:14px;padding:0 20px;background:rgba(14,13,12,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.who{color:var(--ash);font:500 13px var(--mono)}
.burger{display:none;background:none;border:0;width:36px;height:36px;padding:8px;cursor:pointer}
.burger i{display:block;height:2px;background:var(--bone);margin:5px 0}
/* lateral */
.side{position:fixed;top:56px;bottom:0;left:0;width:230px;overflow:auto;background:var(--coal);border-right:1px solid var(--line);padding:14px 0}
.side h6{margin:18px 20px 6px;font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#6f685f}
.side h6:first-child{margin-top:4px}
.side a{display:block;padding:9px 20px;color:#cfc7bb;border-left:3px solid transparent;transition:background .15s,color .15s}
.side a:hover{background:var(--coal2);color:var(--bone)}
.side a.on{background:var(--coal2);color:var(--bone);border-left-color:var(--fire)}
main{margin:56px 0 0 230px;padding:28px 32px 80px;min-height:calc(100vh - 56px)}
/* cabeçalho de página */
.ph{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.ph h1{font-size:30px;font-weight:700}
.ph small{display:block;color:var(--ash);font-size:14px;margin-top:2px}
.crumb{font:500 12px var(--mono);color:#6f685f;margin-bottom:6px}
.crumb a:hover{color:var(--fire)}
.acts{display:flex;gap:8px;flex-wrap:wrap}
/* caixas */
.box{background:var(--coal);border:1px solid var(--line);border-radius:10px;margin-bottom:20px;overflow:hidden}
.box-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.box-h h3{font-size:17px}
.box-b{padding:18px}
.err{color:var(--bad);font-size:14px}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.stat{background:var(--coal);border:1px solid var(--line);border-radius:10px;padding:18px}
.stat b{display:block;font:700 34px var(--display);letter-spacing:-.03em}
.stat span{color:var(--ash);font-size:13px}
.stat em{font-style:normal;color:var(--warn);font:500 12px var(--mono);margin-left:8px}
/* tabelas */
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;padding:11px 18px;font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#7c756b;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:12px 18px;border-bottom:1px solid #221f1b;vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:rgba(255,255,255,.02)}
td a.nm{font-weight:600}td a.nm:hover{color:var(--fire)}
td.r,th.r{text-align:right}
.empty{padding:34px;text-align:center;color:var(--ash)}
/* badges */
.tag{display:inline-block;font:500 11.5px var(--mono);padding:2px 9px;border-radius:99px;border:1px solid var(--line);color:var(--ash);white-space:nowrap}
.tag.ok{color:var(--ok);border-color:rgba(88,196,127,.35)}
.tag.bad{color:var(--bad);border-color:rgba(239,91,91,.4)}
.tag.warn{color:var(--warn);border-color:rgba(232,177,58,.4)}
.tag.fire{color:var(--fire);border-color:rgba(255,106,19,.4)}
/* barras */
.bar{height:6px;background:#26221e;border-radius:9px;overflow:hidden;min-width:90px}
.bar i{display:block;height:100%;background:var(--ok);border-radius:9px}
.bar.w i{background:var(--warn)}.bar.b i{background:var(--bad)}
.bt{font:500 12px var(--mono);color:var(--ash);margin-bottom:4px}
/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 16px;border-radius:6px;font:600 14px var(--body);border:1px solid #4a443c;background:transparent;color:var(--bone);cursor:pointer;transition:background .15s,border-color .15s}
.btn:hover{border-color:var(--bone)}
.btn.fire{background:var(--fire);border-color:var(--fire);color:#1a0b00}.btn.fire:hover{background:var(--fire-d);border-color:var(--fire-d)}
.btn.bad{border-color:rgba(239,91,91,.5);color:var(--bad)}.btn.bad:hover{background:var(--bad);color:#1a0505;border-color:var(--bad)}
.btn.sm{padding:5px 11px;font-size:13px}
.btn[disabled]{opacity:.5;pointer-events:none}
:focus-visible{outline:2px solid var(--fire);outline-offset:2px}
/* formulários */
label{display:flex;flex-direction:column;gap:6px;font:500 12px var(--mono);letter-spacing:.04em;color:var(--ash);text-transform:uppercase}
label small{font:400 12px var(--body);text-transform:none;letter-spacing:0;color:#6f685f}
input,select,textarea{font:400 14.5px var(--body);color:var(--bone);background:#0f0e0d;border:1px solid var(--line);border-radius:6px;padding:9px 12px;width:100%;text-transform:none;letter-spacing:0}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--fire)}
textarea{min-height:76px;resize:vertical;font-family:var(--mono);font-size:13px}
select{appearance:auto}
.ck{flex-direction:row;align-items:center;gap:10px;text-transform:none;font:400 14.5px var(--body);color:var(--bone)}
.ck input{width:auto}
.fg{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr))}
.fg .full{grid-column:1/-1}
.fa{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
.search{max-width:280px}
/* abas */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:20px;overflow-x:auto}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;color:var(--ash);font:500 14px var(--mono);padding:11px 16px;cursor:pointer;white-space:nowrap}
.tabs button:hover{color:var(--bone)}.tabs button.on{color:var(--bone);border-bottom-color:var(--fire)}
.pane[hidden]{display:none}
pre.code{margin:0;background:#0f0e0d;border:1px solid var(--line);border-radius:6px;padding:14px;font:400 12.5px/1.6 var(--mono);color:#cfc7bb;overflow:auto;max-height:380px;white-space:pre-wrap;word-break:break-all}
.kv{display:grid;grid-template-columns:170px 1fr;gap:9px 16px;font-size:14px}
.kv dt{color:var(--ash)}.kv dd{margin:0;word-break:break-word}
/* modal */
.ov{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.65);display:grid;place-items:center;padding:20px;overflow:auto}
.md{width:min(560px,100%);background:var(--coal);border:1px solid var(--line);border-radius:12px;padding:24px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.md h3{font-size:20px;margin-bottom:14px}
.md p{color:#cfc7bb;margin:0 0 14px}
#toasts{position:fixed;right:18px;bottom:18px;z-index:80;display:flex;flex-direction:column;gap:8px}
.ts{background:var(--coal2);border:1px solid var(--line);border-left:3px solid var(--ok);border-radius:6px;padding:11px 16px;box-shadow:0 10px 30px rgba(0,0,0,.5);max-width:360px;font-size:14px}
.ts.bad{border-left-color:var(--bad)}
.load{padding:50px;text-align:center;color:var(--ash)}
@media(max-width:900px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:1fr}}
@media(max-width:760px){
.burger{display:block}.side{transform:translateX(-100%);transition:transform .2s;z-index:40;width:250px}body.open .side{transform:none}
main{margin-left:0;padding:22px 16px 70px}.g2,.g4,.fg{grid-template-columns:1fr}.who{display:none}.kv{grid-template-columns:1fr}}