:root,
:root[data-theme="light"],
:root[data-theme="dark"]{
  --bg:#f7f8fa;
  --panel:#ffffff;
  --panel-2:#f7f8fa;
  --panel2:#f7f8fa;
  --line:#d9e2ea;
  --text:#0f1720;
  --text-dim:#5f6b76;
  --dim:#5f6b76;
  --accent:#01A8DD;
  --accent-dim:#003567;
  --danger:#b42318;
  --radius:8px;
}

html{ background:#f7f8fa; }
body{
  background:#f7f8fa !important;
  background-image:none !important;
  color:#0f1720 !important;
  font-family:Lato, Arial, ui-sans-serif, system-ui, sans-serif !important;
  font-size:14px;
}
body,
button,
input,
select,
textarea,
label,
.status,
.sub,
.drop-hint,
.filename,
.duration-tag,
.progress-meta,
.history-meta,
.history-info,
.examples-title,
.example-btn,
.muted,
.msg,
td,
th{
  font-family:Lato, Arial, ui-sans-serif, system-ui, sans-serif !important;
}

.spk-topbar{
  position:sticky;
  top:0;
  z-index:1000;
  background:#003567;
  border-bottom:0;
}
.spk-topbar-inner{
  max-width:1180px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:24px;
  padding:16px 24px;
}
.spk-nav{
  display:flex;
  align-items:center;
  gap:22px;
  flex-wrap:wrap;
}
.spk-nav a{
  font-family:Lato, Arial, sans-serif;
  font-size:13px;
  font-weight:400;
  letter-spacing:.2px;
  color:rgba(255,255,255,.9);
  text-decoration:none;
  padding:0;
  border:0;
  border-radius:0;
  white-space:nowrap;
  transition:color .15s ease;
}
.spk-nav a:hover,
.spk-nav a.active{ color:#ffffff; }
.spk-nav a.spk-sair{
  background:#01A8DD;
  color:#ffffff;
  font-size:12px;
  font-weight:700;
  padding:9px 18px;
  border-radius:999px;
}
.spk-nav a.spk-sair:hover{ background:#004C90; color:#ffffff; }

body > .wrap{
  margin-top:0 !important;
  padding-top:40px !important;
}
body > .wrap > .eyebrow:first-child,
body > .wrap > header:first-child .eyebrow{
  display:none !important;
}
h1{
  font-family:Lato, Arial, sans-serif !important;
  font-size:32px !important;
  line-height:1.15 !important;
  font-weight:300 !important;
  letter-spacing:0 !important;
  color:#0f1720 !important;
}
h2,
.card h2,
.history-head h2{
  font-family:Lato, Arial, sans-serif !important;
  font-size:18px !important;
  line-height:1.25 !important;
  font-weight:700 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  color:#0f1720 !important;
}
.sub{
  font-size:16px !important;
  line-height:1.5 !important;
  color:#5f6b76 !important;
  margin-top:8px;
}
label,
th,
.examples-title{
  font-size:12px !important;
  line-height:1.25 !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
  font-weight:700 !important;
  color:#5f6b76 !important;
}
.card,
.history-item,
.box{
  background:#ffffff !important;
  border:1px solid #d9e2ea !important;
  border-radius:8px !important;
  box-shadow:0 16px 40px rgba(0,53,103,.06);
}
input,
select,
textarea{
  background:#f7f8fa !important;
  border:1px solid #d9e2ea !important;
  color:#0f1720 !important;
  border-radius:8px !important;
  font-size:14px !important;
}
input:focus,
select:focus,
textarea:focus{ border-color:#01A8DD !important; }
button,
a.btn,
.history-actions a{
  border-radius:999px !important;
}
.btn-primary,
button[type="submit"],
#submitBtn,
#btn{
  background:#01A8DD !important;
  border-color:#01A8DD !important;
  color:#ffffff !important;
  font-weight:700 !important;
}
.btn-primary:hover,
button[type="submit"]:hover,
#submitBtn:hover,
#btn:hover{
  background:#004C90 !important;
  border-color:#004C90 !important;
}
.status.ok,
.msg.ok{ color:#003567 !important; }
.status.err,
.msg.err{ color:#b42318 !important; }

@media (max-width:900px){
  .spk-topbar-inner{ justify-content:flex-start; padding:14px 16px; }
  .spk-nav{ gap:14px; }
  body > .wrap{ padding-top:28px !important; }
  h1{ font-size:28px !important; }
}

/* --- portal: marca e usuário na barra (23/09/2026) --- */
.spk-topbar-inner{ justify-content:space-between !important; }
.spk-brand{ color:#ffffff; text-decoration:none; font-family:Lato, Arial, sans-serif; font-weight:700; font-size:14px; letter-spacing:.3px; white-space:nowrap; }
.spk-user{ color:rgba(255,255,255,.7); font-size:12px; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:900px){ .spk-topbar-inner{ flex-wrap:wrap; gap:10px; } .spk-user{ display:none; } }