/* Themis · estilo comum das telas ---------------------------------- */
:root{
  --bg:#0F1116; --panel:#171A21; --panel-2:#1C2029; --line:#262B36;
  --ink:#E8EAED; --ink-2:#9BA1AD; --ink-3:#646B78;
  --verde:#2E9E6B; --verde-dim:#1E6B48; --ambar:#C9A227; --vermelho:#C25450;
  --azul:#5B8DB8;
  --mono:'IBM Plex Mono',ui-monospace,monospace; --sans:'Inter',system-ui,sans-serif;
  --r:10px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-size:15px; line-height:1.5; letter-spacing:-.01em; min-height:100vh}
body::before{content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(1200px 600px at 78% -10%, rgba(46,158,107,.06), transparent 60%)}
a{color:var(--azul); text-decoration:none}
.wrap{position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:0 24px 80px}
.mono{font-family:var(--mono)}
.hidden{display:none!important}

/* topo */
header{display:flex; align-items:center; gap:16px; padding:20px 0 18px;
  border-bottom:1px solid var(--line); margin-bottom:28px}
.mark{width:34px; height:34px; border-radius:8px; flex:0 0 auto;
  background:linear-gradient(150deg,var(--verde),var(--verde-dim));
  display:grid; place-items:center; font-family:var(--mono); font-weight:600;
  font-size:19px; color:#0B0D11}
.brand{font-weight:600; font-size:16px; letter-spacing:-.02em}
.brand span{color:var(--ink-3); font-weight:400}
.who{margin-left:auto; display:flex; align-items:center; gap:14px;
  font-family:var(--mono); font-size:12px; color:var(--ink-3)}
.who b{color:var(--ink-2); font-weight:500}
.papel-tag{font-size:10.5px; text-transform:uppercase; letter-spacing:.06em;
  padding:3px 9px; border-radius:20px; border:1px solid var(--line); color:var(--ink-2)}
.papel-tag.gestor{border-color:var(--ambar); color:var(--ambar)}
.papel-tag.funcionario{border-color:var(--azul); color:var(--azul)}
.papel-tag.broker{border-color:var(--verde); color:var(--verde)}
.link-sair{cursor:pointer; color:var(--ink-3)}
.link-sair:hover{color:var(--ink-2)}

/* navegação por abas (interno) */
.tabs{display:flex; gap:4px; margin-bottom:24px; flex-wrap:wrap}
.tab{padding:8px 16px; border-radius:8px; font-size:13.5px; color:var(--ink-2);
  cursor:pointer; border:1px solid transparent; background:transparent}
.tab:hover{background:var(--panel)}
.tab.on{background:var(--panel); border-color:var(--line); color:var(--ink); font-weight:500}

/* cartões e grid */
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r)}
.card-h{font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-3); padding:16px 20px 0}
.grid2{display:grid; grid-template-columns:380px 1fr; gap:24px; align-items:start}
@media(max-width:900px){.grid2{grid-template-columns:1fr}}

/* formulário */
.form{padding:14px 20px 20px}
.field{margin-top:14px}
.field label{display:block; font-size:12px; color:var(--ink-2); margin-bottom:6px}
.field label .q{color:var(--ink-3); font-weight:400}
input,select{width:100%; background:var(--panel-2); border:1px solid var(--line);
  color:var(--ink); border-radius:7px; padding:9px 11px; font-family:var(--mono);
  font-size:13.5px; transition:border-color .15s, box-shadow .15s}
input:focus,select:focus{outline:none; border-color:var(--verde-dim);
  box-shadow:0 0 0 3px rgba(46,158,107,.12)}
select{cursor:pointer; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23646B78' fill='none' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:30px}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:12px}

.btn{width:100%; margin-top:20px; padding:12px; border:none; border-radius:8px;
  background:var(--verde); color:#08130C; font-family:var(--sans); font-weight:600;
  font-size:14px; cursor:pointer; transition:filter .15s, transform .05s}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5; cursor:progress}
.btn.ghost{background:transparent; border:1px solid var(--line); color:var(--ink-2); font-weight:500}
.btn.ghost:hover{border-color:var(--ink-3); filter:none}
.btn.sm{width:auto; margin:0; padding:7px 13px; font-size:12.5px; border-radius:7px}

/* tabela */
table{width:100%; border-collapse:collapse; font-size:13.5px}
th{text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--ink-3); font-weight:600; padding:10px 14px; border-bottom:1px solid var(--line)}
td{padding:11px 14px; border-bottom:1px solid var(--line); color:var(--ink-2)}
tr:last-child td{border-bottom:none}
tr.click{cursor:pointer}
tr.click:hover td{background:var(--panel-2)}
td .mono, td.mono{font-family:var(--mono); color:var(--ink)}

/* pill de estado */
.pill{font-family:var(--mono); font-size:11px; padding:2px 8px; border-radius:20px;
  border:1px solid var(--line); color:var(--ink-2); white-space:nowrap}
.pill.ok{border-color:var(--verde-dim); color:var(--verde)}
.pill.warn{border-color:rgba(201,162,39,.4); color:var(--ambar)}
.pill.wait{border-color:var(--line); color:var(--ink-3)}
.pill.stop{border-color:rgba(194,84,80,.4); color:var(--vermelho)}

/* KPI faixa */
.kpis{display:grid; gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:9px; overflow:hidden}
.kpi{background:var(--panel); padding:15px 16px}
.kpi .lab{font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3)}
.kpi .val{font-family:var(--mono); font-size:20px; font-weight:600; margin-top:6px; letter-spacing:-.02em}
.kpi .sub{font-family:var(--mono); font-size:11px; color:var(--ink-3); margin-top:3px}
.kpi.hero .val{color:var(--verde)}

/* flags */
.flag{display:flex; gap:10px; align-items:flex-start; margin-top:16px; padding:12px 14px;
  border-radius:8px; font-size:12.5px; line-height:1.45}
.flag.warn{background:rgba(201,162,39,.09); border:1px solid rgba(201,162,39,.28); color:#E4C965}
.flag.stop{background:rgba(194,84,80,.1); border:1px solid rgba(194,84,80,.32); color:#E28E8B}
.flag .ic{flex:0 0 auto; font-family:var(--mono); font-weight:700}

.empty{padding:48px 24px; text-align:center; color:var(--ink-3); font-size:13.5px}
.section-title{font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 12px}

/* toast */
.toast{position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--panel-2); border:1px solid var(--line); color:var(--ink);
  padding:11px 18px; border-radius:9px; font-size:13px; opacity:0; transition:.25s;
  z-index:60; box-shadow:0 8px 30px rgba(0,0,0,.4)}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.toast.err{border-color:rgba(194,84,80,.4); color:#E28E8B}

/* login */
.login-screen{position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:24px}
.login-box{background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:32px 32px 28px; max-width:380px; width:100%}
.login-box h3{font-size:18px; font-weight:600; margin:16px 0 4px}
.login-box p{font-size:13px; color:var(--ink-3); margin-bottom:20px}
.login-box .field:first-of-type{margin-top:0}
.login-err{color:var(--vermelho); font-size:12px; margin-top:12px; min-height:16px; font-family:var(--mono)}