:root{
  --obsidian:#0A0F0D;
  --deep-forest:#022B1E;
  --malachite:#0A6E47;
  --emerald:#00C274;
  --viridian:#00E887;
  --platinum:#F0F5F2;
  --sage:#8DB5A0;
  --graphite:#2C2C2C;
  --silver:#C8D6CF;
  --red:#E8524E;
  --amber:#E8B84E;
  /* tokens semânticos — perfil claro, usando a mesma paleta oficial do hub */
  --bg:var(--silver);
  --bg-card:var(--platinum);
  --bg-input:#FFFFFF;
  --text:var(--graphite);
  --text-muted:rgba(44,44,44,.62);
  --border:rgba(44,44,44,.15);
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
h1,h2,h3{font-family:'Inter',sans-serif;font-weight:700;letter-spacing:-.01em;color:var(--text);}
.brand{font-family:'DM Sans',sans-serif;font-weight:700;}
header{
  padding:20px 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--border);
  background:var(--bg-card);
}
.brand{font-size:20px;color:var(--text);display:flex;align-items:center;gap:10px;}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--emerald);box-shadow:0 0 12px var(--viridian);}
.tag{font-size:11px;color:var(--malachite);font-family:'DM Sans';letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--malachite);padding:3px 10px;border-radius:100px;}
main{flex:1;max-width:760px;width:100%;margin:0 auto;padding:40px 24px 80px;}
.view{display:none;animation:fade .25s ease;}
.view.active{display:block;}
@keyframes fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
.card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:28px;
  margin-bottom:20px;
  box-shadow:0 2px 12px rgba(10,15,13,.05);
}
label{display:block;font-size:13px;color:var(--malachite);font-weight:600;margin-bottom:6px;margin-top:16px;}
input,textarea,select{
  width:100%;
  background:var(--bg-input);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:8px;
  padding:12px 14px;
  font-family:'DM Sans';
  font-size:14px;
}
textarea{min-height:140px;resize:vertical;}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--emerald);}
button{
  font-family:'DM Sans';
  font-weight:700;
  font-size:14px;
  border:none;
  border-radius:8px;
  padding:13px 22px;
  cursor:pointer;
  transition:.15s;
}
.btn-primary{background:var(--emerald);color:#FFFFFF;}
.btn-primary:hover{background:var(--malachite);}
.btn-primary:disabled{background:var(--border);color:var(--text-muted);cursor:not-allowed;}
.btn-ghost{background:transparent;border:1px solid var(--malachite);color:var(--malachite);}
.btn-ghost:hover{background:rgba(10,110,71,.06);}
.btn-danger{background:transparent;border:1px solid var(--red);color:var(--red);}
.row{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap;}
.muted{color:var(--text-muted);font-size:13px;line-height:1.6;}
.flag{
  border-radius:10px;
  padding:14px 16px;
  margin-top:10px;
  font-size:13px;
  line-height:1.5;
  border-left:4px solid;
}
.flag.grave{background:rgba(232,82,78,.08);border-color:var(--red);}
.flag.leve{background:rgba(232,184,78,.08);border-color:var(--amber);}
.flag.ok{background:rgba(0,194,116,.08);border-color:var(--emerald);}
.flag b{display:block;margin-bottom:2px;}
.badge{display:inline-block;font-size:11px;padding:3px 10px;border-radius:100px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;}
.badge.pendente{background:rgba(232,184,78,.18);color:#8a6a10;}
.badge.aguardando{background:rgba(10,110,71,.1);color:var(--malachite);}
.badge.aprovado{background:rgba(0,194,116,.18);color:var(--malachite);}
.badge.ajuste{background:rgba(232,82,78,.15);color:var(--red);}
.badge.trial{background:rgba(140,140,140,.18);color:#555;}
.badge.cancelado{background:rgba(140,140,140,.18);color:#555;}
.job-item{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 0;border-bottom:1px solid var(--border);
}
.job-item:last-child{border-bottom:none;}
.link-box{
  background:var(--bg-input);border:1px dashed var(--malachite);border-radius:8px;
  padding:12px 14px;font-size:13px;color:var(--malachite);word-break:break-all;margin-top:12px;
}
.step{font-size:12px;color:var(--malachite);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px;font-weight:700;}
.empty{text-align:center;padding:40px 0;color:var(--text-muted);font-size:13px;}
nav.tabs{display:flex;gap:8px;margin-bottom:24px;}
nav.tabs button{background:transparent;border:1px solid var(--border);color:var(--text-muted);font-weight:500;padding:8px 16px;font-size:13px;}
nav.tabs button.active{border-color:var(--emerald);color:var(--malachite);}

/* ---------- abertura ---------- */
#abertura{
  position:fixed;inset:0;z-index:999;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--deep-forest),var(--obsidian) 70%);
  transition:opacity .5s ease, visibility .5s ease;
}
#abertura.hidden{opacity:0;visibility:hidden;pointer-events:none;}
#abertura-svg{width:min(60vw,280px);height:min(60vw,280px);}
.ab-arm{opacity:.15;transition:opacity .4s ease;}
.ab-arm.lit{opacity:.9;}
.ab-node{opacity:.4;transition:opacity .4s ease, filter .4s ease;}
.ab-node.lit{opacity:1;fill:#00C274;}
#ab-core{transition:fill .5s ease;}
#ab-core.lit{fill:#00E887;}
.ab-status{
  color:var(--sage);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  margin-top:24px;font-family:'DM Sans';min-height:16px;
}
.ab-brand{text-align:center;margin-top:20px;opacity:0;transform:translateY(10px);transition:opacity .6s ease, transform .6s ease;}
.ab-brand.show{opacity:1;transform:translateY(0);}
.ab-word{font-family:'DM Sans';font-weight:700;font-size:26px;color:var(--platinum);}
.ab-sub{font-family:'Inter';font-weight:500;font-size:13px;color:var(--sage);letter-spacing:.1em;text-transform:uppercase;margin-top:2px;}
.ab-tagline{font-family:'Inter';font-size:14px;color:var(--platinum);opacity:.75;margin-top:14px;}
#ab-enter{margin-top:22px;opacity:0;transition:opacity .4s ease;}
#ab-enter.show{opacity:1;}