:root {
  --roxo: #4A2A7F;
  --roxo-escuro: #36205E;
  --lima: #C5D82E;
  --fundo: #F7F5EF;
  --suave: #F1EFF5;
  --card: #FFFFFF;
  --texto: #1F1A2E;
  --muted: #615A73;
  --borda: #E4E0EC;
  --erro: #A1271C;
  --erro-bg: #FCEDEB;
  --aviso: #7A4B00;
  --aviso-bg: #FFF4DB;
  --ok: #2B5E1E;
  --ok-bg: #EDF6D0;
  --info-bg: #ECE7F5;
  --raio: 20px;
  --raio-sm: 12px;
  --sombra: 0 1px 2px rgba(31, 26, 46, .04), 0 4px 16px rgba(31, 26, 46, .04);
  --fonte: "Segoe UI", "Inter", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fundo); color: var(--texto); font-family: var(--fonte); font-size: 15px; line-height: 1.45; }
body { overflow-x: hidden; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; }
h1 { font-size: 30px; font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: 19px; font-weight: 650; }
h3 { font-size: 15px; font-weight: 650; }
a { color: var(--roxo-txt); }
p { margin: 0 0 8px; }
.boot { padding: 40px; color: var(--muted); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 8px; z-index: 100; background: var(--card); padding: 8px 12px; border-radius: 8px; }
:focus-visible { outline: 3px solid var(--roxo-txt); outline-offset: 2px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.break { overflow-wrap: anywhere; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- topo ---------- */
.topbar { display: flex; align-items: center; gap: 12px; padding: 14px 24px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; background: var(--card); border-radius: 999px; padding: 6px 16px 6px 6px; box-shadow: var(--sombra); text-decoration: none; }
.brand img { width: 32px; height: 32px; }
.brand span { font-weight: 800; letter-spacing: .32em; color: var(--roxo-txt); font-size: 14px; }
.nav { display: flex; gap: 4px; background: var(--card); border-radius: 999px; padding: 6px; box-shadow: var(--sombra); overflow-x: auto; max-width: 100%; }
.nav a { text-decoration: none; color: var(--texto); padding: 8px 16px; border-radius: 999px; font-size: 14px; white-space: nowrap; }
.nav a:hover { background: var(--suave); }
.nav a[aria-current="page"] { background: var(--lima); color: var(--texto); font-weight: 600; }
.spacer { flex: 1; }
.userchip { display: flex; align-items: center; gap: 10px; background: var(--card); border-radius: 999px; padding: 6px 8px 6px 14px; box-shadow: var(--sombra); }
.userchip .who { font-size: 13px; line-height: 1.2; }
.userchip .who strong { display: block; font-size: 14px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--roxo); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; }

main { padding: 8px 24px 48px; max-width: 1480px; margin: 0 auto; }
.hello { margin: 12px 0 18px; }
.hello p { color: var(--muted); margin-bottom: 4px; }

/* ---------- botões e formulários ---------- */
button, .btn { font: inherit; border: 1px solid var(--borda); background: var(--card); color: var(--texto); border-radius: 999px; padding: 8px 16px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; }
button:hover, .btn:hover { background: var(--suave); }
button:disabled { opacity: .5; cursor: not-allowed; }
.primary { background: var(--roxo); border-color: var(--roxo-txt); color: #fff; font-weight: 600; }
.primary:hover { background: var(--roxo-escuro); }
.accent { background: var(--lima); border-color: var(--lima); color: var(--texto); font-weight: 600; }
.accent:hover { background: #b4c625; }
.danger { color: var(--erro); border-color: #efc4bf; }
.ghost { border-color: transparent; background: transparent; }
.icon-btn { width: 38px; height: 38px; padding: 0; justify-content: center; border-radius: 50%; }
.btn-sm { padding: 4px 12px; min-height: 32px; font-size: 13px; }
input, select, textarea { font: inherit; color: var(--texto); background: var(--card); border: 1px solid var(--borda); border-radius: var(--raio-sm); padding: 8px 12px; min-height: 40px; max-width: 100%; }
textarea { min-height: 80px; width: 100%; resize: vertical; }
label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
label > span { font-weight: 600; color: var(--texto); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; align-items: end; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.check { display: flex; align-items: center; gap: 8px; color: var(--texto); font-size: 14px; }
.check input { min-height: auto; width: 18px; height: 18px; }

/* ---------- cards e indicadores ---------- */
.card { background: var(--card); border-radius: var(--raio); padding: 20px; box-shadow: var(--sombra); }
.card.soft { background: var(--suave); box-shadow: none; }
.metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.metric { text-align: left; border: 2px solid transparent; border-radius: var(--raio); background: var(--card); padding: 16px 18px; box-shadow: var(--sombra); display: grid; gap: 10px; min-height: 120px; cursor: pointer; align-content: space-between; }
.metric:hover { background: var(--card); border-color: var(--borda); }
.metric[aria-pressed="true"] { border-color: var(--roxo-txt); }
.metric .top { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 14px; gap: 8px; }
.metric .arrow { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--borda); display: grid; place-items: center; font-size: 14px; flex: none; }
.metric .num { font-size: 40px; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.metric.alert .num { color: var(--roxo-txt); }

/* ---------- filtros ---------- */
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.search { flex: 1 1 260px; position: relative; }
.search input { width: 100%; border-radius: 999px; padding-left: 40px; background: var(--card); }
.search::before { content: ""; position: absolute; left: 15px; top: 50%; width: 12px; height: 12px; border: 2px solid var(--muted); border-radius: 50%; transform: translateY(-60%); }
.chip { border-radius: 999px; padding: 6px 14px; min-height: 36px; font-size: 14px; background: var(--card); }
.chip[aria-pressed="true"] { background: var(--roxo); color: #fff; border-color: var(--roxo-txt); }
.chip-select { border-radius: 999px; min-height: 36px; padding: 6px 12px; font-size: 14px; }

/* ---------- layout lista + ficha ---------- */
.board { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.board.with-panel { grid-template-columns: minmax(0, 1fr) minmax(420px, 560px); }
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--borda); }
.table td { padding: 12px; border-bottom: 1px solid var(--borda); vertical-align: top; }
.table tr.sel td { background: var(--suave); }
.table tbody tr { cursor: pointer; }
.table tbody tr:hover td { background: var(--suave); }
.table .name { font-weight: 600; }
.list-cards { display: none; }
.pager { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; }

.badge { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 600; background: var(--suave); color: var(--texto); white-space: nowrap; }
.badge.pri { width: 28px; height: 28px; padding: 0; justify-content: center; font-size: 13px; }
.badge.pri-A { background: var(--lima); }
.badge.pri-B { background: var(--card); border: 1.5px solid var(--roxo-txt); color: var(--roxo-txt); }
.badge.pri-C { background: var(--cinza); color: var(--muted); }
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.warn { background: var(--aviso-bg); color: var(--aviso); }
.badge.err { background: var(--erro-bg); color: var(--erro); }
.badge.info { background: var(--info-bg); color: var(--roxo-txt); }
.badge.dark { background: var(--texto); color: #fff; }
.late { color: var(--erro); font-weight: 600; }

.panel { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; padding: 0; }
.panel-head { position: sticky; top: 0; background: var(--card); z-index: 2; padding: 18px 20px 12px; border-bottom: 1px solid var(--borda); }
.panel-body { padding: 16px 20px 24px; display: grid; gap: 18px; }
.panel-title { display: flex; align-items: flex-start; gap: 10px; }
.panel-title h2 { flex: 1; font-size: 22px; }
.section h3 { margin-bottom: 10px; color: var(--roxo-txt); text-transform: uppercase; font-size: 12px; letter-spacing: .06em; }
.who-box { background: var(--suave); border-radius: var(--raio); padding: 16px; border-top: 4px solid var(--lima); }
.who-box dt { font-size: 12px; font-weight: 700; color: var(--roxo-txt); text-transform: uppercase; letter-spacing: .05em; margin-top: 10px; }
.who-box dt:first-child { margin-top: 0; }
.who-box dd { margin: 2px 0 0; }
.kv { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 6px 12px; margin: 0; }
.kv dt { color: var(--muted); font-size: 13px; }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.person { border: 1px solid var(--borda); border-radius: var(--raio-sm); padding: 12px; display: grid; gap: 6px; }
.person .top { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.person .top strong { flex: 1 1 200px; }
.channel { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px dashed var(--borda); }
.channel:last-child { border-bottom: 0; }
.channel .val { flex: 1 1 180px; min-width: 0; overflow-wrap: anywhere; }
.channel.outdated .val { text-decoration: line-through; color: var(--muted); }
.timeline { display: grid; gap: 10px; }
.timeline li { list-style: none; border-left: 3px solid var(--borda); padding-left: 12px; }
.timeline ul { padding: 0; margin: 0; }
details.ev { border: 1px solid var(--borda); border-radius: var(--raio-sm); padding: 8px 12px; }
details.ev summary { cursor: pointer; font-weight: 600; }
details.ev pre { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--fonte); font-size: 13px; max-height: 340px; overflow: auto; background: var(--fundo); padding: 10px; border-radius: 8px; }
.empty { text-align: center; padding: 36px 16px; color: var(--muted); }
.empty strong { display: block; color: var(--texto); font-size: 16px; margin-bottom: 4px; }
.notice { border-radius: var(--raio-sm); padding: 10px 14px; font-size: 14px; }
.notice.warn { background: var(--aviso-bg); color: var(--aviso); }
.notice.err { background: var(--erro-bg); color: var(--erro); }
.notice.info { background: var(--info-bg); color: var(--roxo-escuro); }
.notice.ok { background: var(--ok-bg); color: var(--ok); }

/* ---------- importação ---------- */
.steps { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; padding: 0; list-style: none; }
.steps li { padding: 8px 16px; border-radius: 999px; background: var(--card); color: var(--muted); font-size: 14px; box-shadow: var(--sombra); }
.steps li[aria-current="step"] { background: var(--roxo); color: #fff; font-weight: 600; }
.steps li.done { background: var(--ok-bg); color: var(--ok); }
.drop { border: 2px dashed var(--borda); border-radius: var(--raio); padding: 20px; display: grid; gap: 10px; background: var(--card); }
.irow { border: 1px solid var(--borda); border-radius: var(--raio-sm); padding: 14px; display: grid; gap: 10px; background: var(--card); }
.irow.st-error { border-left: 5px solid var(--erro); }
.irow.st-pending, .irow.st-dep_pending { border-left: 5px solid #D9A300; }
.irow.st-skipped, .irow.st-dep_excluded { opacity: .7; }
.irow.reopened { box-shadow: 0 0 0 2px #D9A300; }
.irow .head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.irow .head strong { flex: 1 1 200px; }
.issues { margin: 0; padding-left: 18px; font-size: 14px; }
.issues li.error { color: var(--erro); }
.issues li.pending { color: var(--aviso); }
.diff { width: 100%; border-collapse: collapse; font-size: 13px; }
.diff th, .diff td { border-bottom: 1px solid var(--borda); padding: 6px; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.diff td.v { max-width: 260px; }
.cands { display: grid; gap: 6px; }
.recon { border-collapse: collapse; }
.recon td, .recon th { padding: 6px 14px; border-bottom: 1px solid var(--borda); text-align: right; }
.recon td:first-child, .recon th:first-child { text-align: left; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.stack { display: grid; gap: 12px; }

/* ---------- login ---------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.auth-side { background: var(--roxo); color: #fff; padding: 56px; display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.auth-side .mark { color: var(--lima); letter-spacing: .4em; font-weight: 800; }
.auth-side h1 { font-size: 40px; }
.auth-side .bar { width: 96px; height: 6px; background: var(--lima); }
.auth-form { padding: 48px; display: grid; place-items: center; }
.auth-form form { width: min(400px, 100%); display: grid; gap: 14px; }
.secret { font-family: ui-monospace, Consolas, monospace; background: var(--suave); padding: 10px; border-radius: 8px; overflow-wrap: anywhere; user-select: all; }

/* ---------- modal e toasts ---------- */
dialog { border: 0; border-radius: var(--raio); padding: 0; max-width: min(560px, calc(100vw - 32px)); width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
dialog::backdrop { background: rgba(31, 26, 46, .45); }
dialog .dlg { padding: 22px; display: grid; gap: 14px; }
#toasts { position: fixed; right: 16px; bottom: 16px; display: grid; gap: 8px; z-index: 50; max-width: calc(100vw - 32px); }
.toast { background: var(--texto); color: #fff; padding: 12px 16px; border-radius: var(--raio-sm); box-shadow: var(--sombra); max-width: 420px; }
.toast.err { background: var(--erro); }

/* ---------- responsivo ---------- */
@media (max-width: 1180px) {
  .metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .board.with-panel { grid-template-columns: minmax(0, 1fr); }
  .board.with-panel .panel { position: fixed; inset: 0; z-index: 30; max-height: none; border-radius: 0; }
}
@media (max-width: 760px) {
  main { padding: 4px 16px 40px; }
  .topbar { padding: 12px 16px; }
  .userchip .who { display: none; }
  h1 { font-size: 24px; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .metric { min-height: 100px; padding: 12px 14px; }
  .metric .num { font-size: 30px; }
  .table-wrap { display: none; }
  .list-cards { display: grid; gap: 10px; }
  .lcard { background: var(--card); border-radius: var(--raio-sm); padding: 14px; box-shadow: var(--sombra); display: grid; gap: 6px; text-align: left; border: 0; width: 100%; }
  .kv { grid-template-columns: 1fr; }
  .kv dt { margin-top: 6px; }
  .auth { grid-template-columns: 1fr; }
  .auth-side { padding: 32px 20px; }
  .auth-side h1 { font-size: 30px; }
  .auth-form { padding: 24px 16px; }
  .panel-head, .panel-body { padding-left: 16px; padding-right: 16px; }
}
.table-scroll { overflow-x: auto; }
fieldset { border: 1px solid var(--borda); border-radius: var(--raio-sm); padding: 10px 12px; }
legend { padding: 0 6px; }

/* ============ visual de painel (referência PlanIQ, cores PREVER) ============ */
@font-face { font-family: "Manrope"; src: url("/fonts/manrope.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
:root { --raio: 24px; --raio-sm: 14px; --cinza: #ECEAF0; --fonte: "Manrope", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; }
h1 { font-size: 34px; font-weight: 700; letter-spacing: -.025em; }
h2 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.num { font-variant-numeric: tabular-nums; }
.hello { margin: 18px 0 22px; }
.hello p { font-size: 16px; }

/* topo */
.topbar { gap: 14px; padding: 18px 24px 6px; max-width: 1480px; margin: 0 auto; }
.brand, .nav, .userchip, .topsearch input { box-shadow: none; border: 1px solid var(--borda); }
.brand { padding: 7px 18px 7px 7px; }
.nav { padding: 6px; }
.nav a { padding: 9px 18px; font-weight: 500; }
.nav a[aria-current="page"] { font-weight: 700; }
.topsearch { position: relative; flex: 0 1 300px; }
.topsearch input { width: 100%; border-radius: 999px; padding: 10px 16px 10px 42px; min-height: 48px; background: var(--card); }
.topsearch::before { content: ""; position: absolute; left: 17px; top: 50%; width: 12px; height: 12px; border: 2px solid var(--texto); border-radius: 50%; transform: translateY(-60%); pointer-events: none; }
.userchip { padding: 6px 8px 6px 6px; gap: 10px; }
.userchip .who { max-width: 220px; }
.userchip .who span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.avatar { width: 36px; height: 36px; flex: none; }
.avatar.sm { width: 28px; height: 28px; font-size: 11px; }

/* cartões */
.card { box-shadow: none; border: 1px solid var(--borda); padding: 22px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.metrics.m3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.metric { box-shadow: none; border: 1px solid var(--borda); padding: 18px 20px; min-height: 132px; }
.metric:hover { border-color: var(--roxo-txt); }
.metric[aria-pressed="true"] { border: 2px solid var(--roxo-txt); padding: 17px 19px; }
.metric .arrow { width: 34px; height: 34px; background: var(--fundo); border: 0; font-size: 15px; }
.metric:hover .arrow, .metric[aria-pressed="true"] .arrow { background: var(--lima); }
.metric .bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
.metric .num { font-size: 42px; font-weight: 700; }
.ticks, .eq, .segs { display: flex; align-items: flex-end; min-width: 0; }
.ticks { gap: 2px; height: 26px; flex: 0 1 150px; justify-content: flex-end; overflow: hidden; }
.ticks i { width: 3px; height: 100%; border-radius: 2px; background: var(--cinza); flex: none; }
.ticks i.on { background: var(--texto); }
.eq { gap: 5px; height: 34px; }
.eq i { width: 10px; border-radius: 4px; background: var(--cinza); }
.eq i.on { background: var(--lima); }
.segs { gap: 3px; height: 14px; flex: 0 1 150px; }
.segs i { flex: 1 1 0; height: 100%; border-radius: 4px; background: var(--cinza); min-width: 4px; }
.segs i.on { background: var(--lima); }

/* painel inicial */
.dash { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(300px, 1fr); gap: 16px; align-items: start; }
.dash-main, .dash-side { display: grid; gap: 16px; min-width: 0; }
.dash-main .metrics { margin-bottom: 0; }
.dash-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.bars { display: grid; grid-template-columns: auto repeat(6, minmax(0, 1fr)); gap: 10px; align-items: end; }
.bars .axis { display: flex; flex-direction: column; justify-content: space-between; height: 190px; margin-bottom: 62px; color: var(--muted); font-size: 12px; text-align: right; }
.bar { display: grid; gap: 4px; justify-items: center; border: 0; background: none; padding: 0; border-radius: 12px; min-height: 0; min-width: 0; }
.bar:hover { background: none; }
.bar .track { width: 100%; max-width: 54px; height: 190px; background: var(--fundo); border-radius: 12px; display: flex; align-items: flex-end; overflow: hidden; }
.bar .fill { width: 100%; background: var(--barra); border-radius: 12px; min-height: 0; }
.bar .fill.hot { background: repeating-linear-gradient(135deg, var(--lima) 0 5px, #DDE97A 5px 10px); }
.bar:hover .fill:not(.hot) { background: var(--roxo); }
.bar .val { font-weight: 700; font-size: 14px; }
.bar .lbl { font-size: 11px; color: var(--muted); text-align: center; line-height: 1.2; height: 2.4em; }
.statline { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.statline .num { font-size: 38px; font-weight: 700; line-height: 1.1; }
.legend { list-style: none; display: flex; gap: 6px 14px; flex-wrap: wrap; padding: 0; margin: 0; font-size: 12px; color: var(--muted); }
.legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
.stripes { display: flex; gap: 2px; height: 34px; }
.stripes i { flex: 1 1 0; border-radius: 2px; }
.k-g { background: var(--lima); } .k-a { background: var(--roxo); } .k-n { background: var(--cinza-forte); } .k-p { background: var(--cinza); }
.grid-mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mini { background: var(--fundo); border-radius: 16px; padding: 14px; display: grid; gap: 6px; }
.mini strong { font-size: 20px; }
.line { display: block; height: 4px; border-radius: 4px; background: var(--cinza); overflow: hidden; }
.line i { display: block; height: 100%; background: var(--lima); border-radius: 4px; }
.darkstack { position: relative; padding-top: 18px; }
.darkstack::before, .darkstack::after { content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 40px; border-radius: 22px 22px 0 0; background: var(--cinza); }
.darkstack::after { left: 11px; right: 11px; top: 9px; background: var(--cinza-forte); }
.darkcard { position: relative; z-index: 1; background: var(--roxo-escuro); color: #fff; border-radius: 22px; padding: 20px; display: grid; gap: 8px; }
.darkcard strong { font-size: 21px; line-height: 1.2; letter-spacing: -.01em; }
.darkcard .small { color: #D9D2EA; }
.darkcard .btn { justify-content: center; margin-top: 8px; min-height: 44px; }
.plain { list-style: none; margin: 0; padding: 0; display: grid; }
.plain li { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--borda); min-width: 0; }
.plain li:first-child { border-top: 0; }
.plain a { font-weight: 600; text-decoration: none; }
.plain a:hover { text-decoration: underline; }
.grow { flex: 1; min-width: 0; display: grid; overflow-wrap: anywhere; }
.feed .when { flex: none; text-align: right; max-width: 76px; }
.table .segs { height: 8px; max-width: 110px; margin-top: 4px; }

/* quadro por etapa */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 12px; align-items: start; }
.kcol { background: var(--card); border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px; display: grid; gap: 10px; min-width: 0; align-content: start; min-height: 160px; }
.kcol.over { border-color: var(--roxo-txt); background: var(--suave); }
.kcol header { display: flex; align-items: center; gap: 8px; padding: 4px 6px; }
.kcol header h2 { font-size: 15px; flex: 1; }
.kcol .count { background: var(--fundo); border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 700; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cinza-forte); flex: none; }
.dot.s-em_abordagem, .dot.s-em_conversa, .dot.s-proposta { background: var(--roxo); }
.dot.s-ganha { background: var(--lima); }
.dot.s-perdida { background: var(--cinza); border: 1px solid var(--cinza-forte); }
.kcard { display: grid; gap: 8px; background: var(--fundo); border-radius: 18px; padding: 14px; text-decoration: none; color: var(--texto); border: 1px solid transparent; }
.kcard:hover, .kcard.sel { border-color: var(--roxo-txt); }
.kcard[draggable="true"] { cursor: grab; }
.kcard strong { font-size: 16px; line-height: 1.25; letter-spacing: -.01em; }
.kcard p { margin: 0; }
.tags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.tag { background: var(--card); border: 1px solid var(--borda); border-radius: 8px; padding: 2px 8px; font-size: 12px; font-weight: 600; }
.prog { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; margin-top: 2px; }
.kcard .segs { height: 10px; flex: none; }
.kfoot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.pillc { background: var(--card); border-radius: 8px; padding: 2px 8px; font-size: 12px; font-weight: 600; }
.flag { font-size: 12px; font-weight: 600; }
.flag.late { color: var(--erro); }
.kempty { color: var(--muted); font-size: 13px; text-align: center; padding: 18px 8px; margin: 0; border: 1.5px dashed var(--borda); border-radius: 16px; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(580px, 100%); max-height: none; z-index: 30; border-radius: var(--raio) 0 0 var(--raio); box-shadow: -20px 0 60px rgba(31, 26, 46, .18); }

@media (max-width: 1180px) {
  .dash { grid-template-columns: minmax(0, 1fr); }
  .drawer { border-radius: 0; }
}
@media (max-width: 760px) {
  h1 { font-size: 26px; }
  .topbar { padding: 12px 16px 4px; gap: 8px; }
  .topsearch { order: 5; flex: 1 1 100%; }
  .nav { order: 4; flex: 1 1 100%; }
  .metrics.m3, .dash-2 { grid-template-columns: minmax(0, 1fr); }
  .metric .num { font-size: 32px; }
  .bars { gap: 6px; }
  .bars .axis, .bar .track { height: 140px; }
  .card { padding: 16px; }
  .kanban { grid-auto-columns: minmax(250px, 82vw); }
}
@media (prefers-reduced-motion: no-preference) { .fill, .line i { transition: height .4s ease, width .4s ease; } }

/* ============ ficha em abas, ajuda, tour e movimento ============ */
.tabs { display: flex; gap: 4px; padding: 10px 16px; border-bottom: 1px solid var(--borda); overflow-x: auto; position: sticky; top: 0; background: var(--card); z-index: 2; }
.tabs button { border: 0; background: transparent; padding: 8px 14px; min-height: 36px; font-size: 14px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.tabs button:hover { background: var(--suave); color: var(--texto); }
.tabs button[aria-selected="true"] { background: var(--roxo); color: #fff; }
.panel-head { position: static; border-bottom: 0; padding-bottom: 6px; }
.pane { display: grid; gap: 18px; }
.pane > .accent { justify-content: center; min-height: 46px; font-size: 15px; }
.stepper { display: flex; gap: 4px; flex-wrap: wrap; }
.step { flex: 1 1 auto; justify-content: center; border: 0; background: var(--fundo); color: var(--muted); font-size: 13px; font-weight: 600; padding: 8px 10px; min-height: 36px; border-radius: 10px; }
.step:hover:not(:disabled) { background: var(--suave); color: var(--texto); }
.step.done { background: var(--ok-bg); color: var(--ok); }
.step.cur { background: var(--lima); color: var(--texto); }
.step.cur.lost { background: var(--texto); color: #fff; }
.step:disabled { opacity: 1; cursor: default; }
.who-box { border-top: 0; border-left: 4px solid var(--lima); border-radius: 16px; }
.who-box dd { font-size: 15px; font-weight: 600; }
.who-box details { margin-top: 12px; }
.who-box details dd { font-weight: 400; }
.who-box summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--roxo-txt); }
.strike { text-decoration: line-through; }

/* dica "?" */
.hint { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 8px; border-radius: 50%; background: var(--fundo); color: var(--muted); font-size: 11px; font-weight: 700; cursor: help; position: relative; vertical-align: 2px; }
.hint::after { content: attr(data-tip); position: absolute; top: calc(100% + 8px); left: -8px; width: 240px; background: var(--texto); color: #fff; padding: 10px 12px; border-radius: 12px; font-size: 13px; font-weight: 500; line-height: 1.4; letter-spacing: 0; text-align: left; opacity: 0; transform: translateY(-4px); pointer-events: none; z-index: 20; transition: opacity .15s ease, transform .15s ease; }
.hint:hover::after, .hint:focus::after { opacity: 1; transform: none; }

/* ajuda */
.tour-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; background: var(--roxo-escuro); color: #fff; border-color: var(--roxo-escuro); }
.tour-cta p { margin: 4px 0 0; color: #D9D2EA; }
.tour-cta .accent { min-height: 46px; padding: 10px 22px; }
.help-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.help-grid .wide { grid-column: 1 / -1; }
.daysteps { list-style: none; counter-reset: d; margin: 0; padding: 0; display: grid; gap: 12px; }
.daysteps li { counter-increment: d; display: flex; gap: 12px; align-items: flex-start; }
.daysteps li::before { content: counter(d); flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--lima); display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.tabdemo { flex: none; width: 128px; background: var(--roxo); color: #fff; border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 600; text-align: center; }
.gloss { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
.gloss li:nth-child(2) { border-top: 0; }
.gv { flex: none; width: 150px; display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }

/* tour guiado */
.tour { position: fixed; inset: 0; z-index: 80; }
.tour-ring { position: fixed; border-radius: 22px; box-shadow: 0 0 0 9999px rgba(31, 26, 46, .6), 0 0 0 3px var(--lima); pointer-events: none; transition: top .3s ease, left .3s ease, width .3s ease, height .3s ease; }
.tour-pop { position: fixed; background: var(--card); border-radius: 18px; padding: 16px; display: grid; gap: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); transition: top .3s ease, left .3s ease; }
.tour-pop strong { font-size: 16px; }
.tour-pop p { margin: 0; }

/* movimento */
button, .btn, .nav a, .chip, .kcard, .metric, .tabs button, .step, input, select, textarea { transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease; }
.metric:hover, .kcard:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(31, 26, 46, .08); }
button:active:not(:disabled), .btn:active { transform: scale(.97); }
.table tbody tr td { transition: background-color .15s ease; }
@keyframes up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes grow { from { transform: scaleY(0); } to { transform: none; } }
@keyframes growx { from { transform: scaleX(0); } to { transform: none; } }
@keyframes slide { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: scale(.96) translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  main > *:not(.board):not(.panel) { animation: up .35s ease both; }
  main > .board { animation: fade .35s ease both; }
  main > *:nth-child(2) { animation-delay: .05s; }
  main > *:nth-child(3) { animation-delay: .1s; }
  main > *:nth-child(4) { animation-delay: .15s; }
  .dash-main > *, .dash-side > *, .help-grid > *, .kcol { animation: up .4s ease both; }
  .dash-main > *:nth-child(2), .dash-side > *:nth-child(1), .help-grid > *:nth-child(2), .kcol:nth-child(2) { animation-delay: .08s; }
  .dash-main > *:nth-child(3), .dash-side > *:nth-child(2), .help-grid > *:nth-child(3), .kcol:nth-child(3) { animation-delay: .16s; }
  .help-grid > *:nth-child(4), .kcol:nth-child(4) { animation-delay: .24s; }
  .kcol:nth-child(5) { animation-delay: .3s; }
  .kcol:nth-child(6) { animation-delay: .36s; }
  .bar .fill { transform-origin: bottom; animation: grow .7s cubic-bezier(.2, .8, .2, 1) .25s both; }
  .line i { transform-origin: left; animation: growx .7s ease .3s both; }
  .stripes i, .ticks i, .segs i, .eq i { animation: fade .5s ease .2s both; }
  .panel.in { animation: slide .28s ease both; }
  .pane:not([hidden]) { animation: fade .22s ease both; }
  dialog[open] { animation: pop .2s ease both; }
  .toast { animation: up .25s ease both; }
  .tour-pop { animation: pop .25s ease both; }
  html { scroll-behavior: smooth; }
}

@media (max-width: 1180px) { .help-grid { grid-template-columns: minmax(0, 1fr); } .gloss { grid-template-columns: minmax(0, 1fr); } .gloss li:nth-child(2) { border-top: 1px solid var(--borda); } }
@media (max-width: 760px) { .gv { width: 110px; } .tabdemo { width: 110px; } .hint::after { width: 200px; } }

[hidden] { display: none !important; }

/* ============ vidro, tema escuro, logo, avatares, globo, cordinha ============ */
:root {
  --roxo-txt: #4A2A7F; --card: rgba(255, 255, 255, .66); --card-solido: #FFFFFF; --vidro-borda: rgba(255, 255, 255, .75);
  --barra: #D9D5E1; --cinza-forte: #BDB6CC; --inv-bg: #1F1A2E; --inv-fg: #FFFFFF; --sobre-lima: #1F1A2E;
  --luz-1: rgba(101, 43, 135, .20); --luz-2: rgba(197, 216, 46, .26); --luz-3: rgba(101, 43, 135, .13);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --fundo: #110E19; --suave: #2A2342; --card: rgba(44, 36, 66, .58); --card-solido: #1D182D; --vidro-borda: rgba(255, 255, 255, .09);
  --texto: #F2EFF9; --muted: #A9A1BD; --borda: rgba(255, 255, 255, .11); --cinza: #342D4A; --cinza-forte: #5C5378; --barra: #4B4268;
  --roxo: #6B46B8; --roxo-escuro: #2C1C50; --roxo-txt: #C7B3F7;
  --erro: #FF9F94; --erro-bg: #3B1F1D; --aviso: #FFD27A; --aviso-bg: #3A2E12; --ok: #BCE28D; --ok-bg: #25341A; --info-bg: #30264C;
  --inv-bg: #F2EFF9; --inv-fg: #1F1A2E;
  --luz-1: rgba(124, 77, 200, .34); --luz-2: rgba(197, 216, 46, .12); --luz-3: rgba(124, 77, 200, .22);
}
html { background: var(--fundo); }
body { background: transparent; transition: color .3s ease; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background:
  radial-gradient(42% 38% at 8% 0%, var(--luz-1), transparent 70%),
  radial-gradient(36% 32% at 96% 8%, var(--luz-2), transparent 70%),
  radial-gradient(50% 42% at 72% 104%, var(--luz-3), transparent 70%), var(--fundo); }

/* vidro */
.card, .metric, .kcol, .nav, .brand, .userchip, .topsearch input, .steps li, .irow, .drop {
  background: var(--card); border: 1px solid var(--vidro-borda);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 10px 30px rgba(31, 26, 46, .06);
}
.card.soft { background: var(--suave); }
.topbar { position: sticky; top: 0; z-index: 25; }
.panel, .tabs, dialog, .tour-pop { background: var(--card-solido); color: var(--texto); }
.panel { -webkit-backdrop-filter: none; backdrop-filter: none; }
.metric[aria-pressed="true"] { border: 2px solid var(--roxo-txt); }
.badge.dark, .toast, .hint::after, .step.cur.lost { background: var(--inv-bg); color: var(--inv-fg); }
.toast.err { background: #A1271C; color: #fff; }
.nav a[aria-current="page"], .accent, .step.cur, .badge.pri-A, .daysteps li::before, .eq i.on { color: var(--sobre-lima); }
.tabs button[aria-selected="true"], .chip[aria-pressed="true"], .primary, .steps li[aria-current="step"] { color: #fff; }
.ticks i.on { background: var(--texto); }

/* logo */
.brand.logo { padding: 5px; border-radius: 16px; }
.brand.logo img { display: block; width: auto; height: 38px; border-radius: 11px; }
.auth-box { width: min(400px, 100%); display: grid; gap: 22px; }
.auth-logo { width: 200px; height: auto; border-radius: 16px; }
.auth-side { position: relative; overflow: hidden; background: linear-gradient(160deg, #652B87, #36205E 70%); justify-content: flex-end; }
.auth-copy { position: relative; z-index: 1; display: grid; gap: 14px; }
.auth-side .globe-box { position: absolute; top: -6%; right: -18%; width: min(88%, 620px); opacity: .95; }
.auth-form { background: var(--card-solido); }
.auth-pull { position: fixed; top: 0; right: 28px; height: 64px; display: flex; align-items: flex-end; z-index: 40; }

/* cartões de indicador: ícone no lugar da seta */
.metric .top { justify-content: flex-start; gap: 10px; }
.mico { width: 36px; height: 36px; border-radius: 12px; background: var(--suave); color: var(--roxo-txt); display: grid; place-items: center; flex: none; transition: background-color .18s ease, color .18s ease, transform .25s ease; }
.ico { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mlabel { font-weight: 600; color: var(--muted); line-height: 1.25; text-align: left; }
.metric:hover .mico, .metric[aria-pressed="true"] .mico { background: var(--lima); color: var(--sobre-lima); transform: rotate(-6deg) scale(1.06); }
.metric.alert .num { color: var(--roxo-txt); }
.metric.alert .mico { background: var(--aviso-bg); color: var(--aviso); }

/* avatares das pessoas com etiqueta animada */
.pstack { display: flex; align-items: center; padding: 10px 0 2px 2px; }
.pav { position: relative; width: 42px; height: 42px; min-height: 0; padding: 0; margin-right: -10px; border-radius: 50%; border: 2px solid var(--card-solido); justify-content: center; font-size: 13px; font-weight: 700; color: #fff; background: var(--roxo); transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.pav:hover, .pav:focus-visible { transform: scale(1.12); z-index: 5; background: var(--roxo); }
.pav.c1 { background: #7D4FC7; } .pav.c2 { background: #36205E; } .pav.c3 { background: #9A7BD6; }
.pav.dec { box-shadow: 0 0 0 2px var(--lima); }
.pmore { margin-left: 18px; font-size: 13px; font-weight: 700; color: var(--muted); }
.panel-head { overflow: visible; position: relative; z-index: 3; }
@keyframes flash { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 30% { box-shadow: 0 0 0 4px var(--lima); } }
.person.flash { animation: flash 1.2s ease; }

/* globo */
.globe-box { aspect-ratio: 1; width: 100%; max-width: 340px; margin: 0 auto; }
.globe { width: 100%; height: 100%; opacity: 0; transition: opacity .8s ease; cursor: grab; contain: layout paint size; touch-action: pan-y; }
.globe.on { opacity: 1; }
.globe:active { cursor: grabbing; }
.presenca { display: grid; gap: 4px; overflow: hidden; }
.presenca .globe-box { max-width: 250px; margin-bottom: -70px; }
.presenca-txt { position: relative; text-align: center; }
.presenca-txt .num { font-size: 38px; font-weight: 700; line-height: 1.1; margin: 4px 0 0; }

/* cordinha do tema */
.pull { --pull: 0px; position: relative; width: 34px; height: 50px; flex: none; z-index: 40; }
.pull-cord { position: absolute; left: 50%; top: -400px; width: 2px; margin-left: -1px; height: calc(412px + var(--pull)); background: var(--cinza-forte); transition: height .5s cubic-bezier(.3, 2.4, .5, 1); }
.pull-bulb { position: absolute; left: 50%; top: calc(10px + var(--pull)); width: 28px; height: 28px; min-height: 0; margin-left: -14px; padding: 0; border: 0; border-radius: 50%; cursor: grab; touch-action: none;
  background: radial-gradient(circle at center, #FACC15, #FCD34D 55%, #FEF9C3); box-shadow: 0 0 20px 8px rgba(250, 204, 21, .45); transition: top .5s cubic-bezier(.3, 2.4, .5, 1), box-shadow .3s ease; }
.pull-bulb:hover { background: radial-gradient(circle at center, #FACC15, #FCD34D 55%, #FEF9C3); }
.pull.drag .pull-cord, .pull.drag .pull-bulb { transition: none; }
.pull.drag .pull-bulb { cursor: grabbing; }
:root[data-theme="dark"] .pull-bulb, :root[data-theme="dark"] .pull-bulb:hover { background: radial-gradient(circle at center, #6B7280, #374151 55%, #111827); box-shadow: 0 0 18px 5px rgba(120, 100, 170, .45); }

@media (max-width: 760px) {
  .brand.logo img { height: 32px; }
  .auth-side { min-height: 300px; }
  .auth-side .globe-box { width: 300px; right: -90px; top: -60px; }
  .auth-pull { right: 16px; }
  .pull { order: 2; }
}
@media (prefers-reduced-motion: reduce) { .ptip, .pav, .pull-bulb, .pull-cord, .mico { transition: none; } }
.topsearch::before { z-index: 1; }
.auth-side .globe-box { max-width: none; width: min(110%, 760px); top: -14%; right: -34%; }
@media (max-width: 760px) { .auth-side .globe-box { width: 320px; right: -100px; top: -70px; } }
.panel-head { background: transparent; }
.presenca .globe-box { margin-bottom: -40px; }

/* etiqueta dos avatares: fixa no body, nunca cortada pela ficha */
.ptip { --rx: 0deg; --tx: 0px; position: fixed; z-index: 90; left: 0; top: 0; display: grid; justify-items: center; gap: 2px; width: max-content; max-width: min(300px, calc(100vw - 16px)); text-align: center; padding: 9px 14px; border-radius: 12px; background: var(--inv-bg); color: var(--inv-fg); font-size: 12px; line-height: 1.35; box-shadow: 0 12px 30px rgba(0, 0, 0, .28); pointer-events: none; opacity: 0; transform-origin: bottom center; transform: translate(var(--tx), 14px) rotate(var(--rx)) scale(.6); transition: opacity .18s ease, transform .4s cubic-bezier(.3, 1.9, .5, 1); }
.ptip.below { transform-origin: top center; }
.ptip.on { opacity: 1; transform: translate(var(--tx), 0) rotate(var(--rx)) scale(1); }
.ptip strong { font-size: 14px; overflow-wrap: anywhere; }
.ptip span { opacity: .75; overflow-wrap: anywhere; }
.ptip::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: -1px; height: 2px; background: linear-gradient(90deg, transparent, var(--lima), #9A7BD6, transparent); }
@media (prefers-reduced-motion: reduce) { .ptip { transition: opacity .18s ease; } }

/* quadro: cabe na janela, colunas rolam por dentro */
.kanban { grid-auto-columns: minmax(216px, 1fr); align-items: start; padding-bottom: 8px; }
.kcol { max-height: 100%; overflow-y: auto; padding-top: 0; min-height: 0; }
.kcol header { position: sticky; top: 0; z-index: 2; margin: 0 -12px; padding: 14px 18px 10px; background: var(--card-solido); border-radius: var(--raio) var(--raio) 0 0; }
.kfoot .pillc { white-space: nowrap; }
@media (max-width: 760px) { .kanban { grid-auto-columns: minmax(240px, 80vw); } }

/* formulários: campos nunca passam da largura do cartão */
.form-grid { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
label { min-width: 0; }
label:not(.row):not(.check) > :is(select, input:not([type=checkbox]):not([type=radio]), textarea) { width: 100%; min-width: 0; }
select { text-overflow: ellipsis; }
#int-form { min-width: 0; overflow: hidden; }

/* barras de rolagem na identidade da página */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--cinza-forte); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--roxo); border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }
@supports not selector(::-webkit-scrollbar) { * { scrollbar-width: thin; scrollbar-color: var(--cinza-forte) transparent; } }

/* cabeçalho: um único retângulo de vidro cobrindo todas as opções */
.topbar { top: 12px; width: calc(100% - 48px); max-width: 1432px; margin: 12px auto 0; padding: 10px 12px; border-radius: 28px; background: var(--card); border: 1px solid var(--vidro-borda);
  -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5); box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 12px 34px rgba(31, 26, 46, .10); }
.topbar .brand, .topbar .nav, .topbar .userchip, .topbar .topsearch input { -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; border-color: transparent; background: transparent; }
.topbar .topsearch input { background: var(--suave); }
.topbar .nav a:hover { background: var(--suave); }
.topbar .userchip { padding-right: 4px; }
@media (max-width: 760px) { .topbar { width: calc(100% - 20px); top: 8px; margin-top: 8px; padding: 8px; border-radius: 22px; } }

/* vidro mais transparente */
:root { --card: rgba(255, 255, 255, .30); --vidro-2: rgba(255, 255, 255, .38); --vidro-borda: rgba(255, 255, 255, .55);
  --luz-1: rgba(101, 43, 135, .26); --luz-2: rgba(197, 216, 46, .32); --luz-3: rgba(101, 43, 135, .18); }
:root[data-theme='dark'] { --card: rgba(60, 50, 90, .28); --vidro-2: rgba(255, 255, 255, .05); --vidro-borda: rgba(255, 255, 255, .10);
  --luz-1: rgba(124, 77, 200, .40); --luz-2: rgba(197, 216, 46, .14); --luz-3: rgba(124, 77, 200, .28); }
.card, .metric, .kcol, .steps li, .irow, .drop, .topbar { -webkit-backdrop-filter: blur(26px) saturate(1.6); backdrop-filter: blur(26px) saturate(1.6); box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 10px 30px rgba(31, 26, 46, .05); }
.kcard, .mini, .bar .track { background: var(--vidro-2); }
.kcol header { background: transparent; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.topbar .topsearch input { background: var(--vidro-2); }
input, select, textarea, button, .btn, .chip, .tag, .pillc { background-color: var(--vidro-2); }
.primary { background-color: var(--roxo); } .accent { background-color: var(--lima); } .ghost, .tabs button, .bar, .metric { background-color: transparent; }
.metric { background-color: var(--card); }
.tabs button[aria-selected='true'], .chip[aria-pressed='true'] { background-color: var(--roxo); }
.step { background-color: var(--vidro-2); } .step.done { background-color: var(--ok-bg); } .step.cur { background-color: var(--lima); } .step.cur.lost { background-color: var(--inv-bg); }
.pull-bulb { background-color: transparent; } .pav { background-color: var(--roxo); } .pav.c1 { background-color: #7D4FC7; } .pav.c2 { background-color: #36205E; } .pav.c3 { background-color: #9A7BD6; }
.icon-btn { background-color: var(--vidro-2); }

/* fundo com mais cor, para o vidro aparecer em vez de parecer branco */
:root { --luz-1: rgba(101, 43, 135, .34); --luz-2: rgba(197, 216, 46, .40); --luz-3: rgba(101, 43, 135, .26); --luz-4: rgba(197, 216, 46, .22); }
:root[data-theme='dark'] { --luz-1: rgba(124, 77, 200, .46); --luz-2: rgba(197, 216, 46, .16); --luz-3: rgba(124, 77, 200, .34); --luz-4: rgba(197, 216, 46, .08); }
body::before { background:
  radial-gradient(58% 52% at 4% 0%, var(--luz-1), transparent 72%),
  radial-gradient(50% 46% at 100% 4%, var(--luz-2), transparent 72%),
  radial-gradient(62% 56% at 78% 104%, var(--luz-3), transparent 72%),
  radial-gradient(46% 44% at 18% 96%, var(--luz-4), transparent 72%), var(--fundo); }

/* marca Prospectz */
.brand.logo { display: flex; align-items: center; gap: 8px; }
.brand.logo .pz-icon { height: 38px; width: 38px; padding: 3px; background: #fff; border-radius: 11px; }
.auth-brand { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pz-word { height: 58px; width: auto; max-width: 100%; }
:root[data-theme='dark'] .pz-word { background: #fff; border-radius: 14px; padding: 4px 10px; }
.auth-logo { width: 118px; border-radius: 10px; }
@media (max-width: 760px) { .brand.logo .pz-icon { height: 32px; width: 32px; } .pz-word { height: 46px; } }

/* cabeçalho numa linha só em telas de computador; cartão do tour com fundo roxo */
@media (min-width: 761px) {
  .topbar { flex-wrap: nowrap; }
  .topbar .nav { min-width: 0; flex: 0 1 auto; }
  .topsearch { flex: 1 1 140px; max-width: 300px; min-width: 120px; }
  .topbar .userchip { flex: none; }
  .userchip .who { max-width: 170px; }
}
@media (max-width: 1180px) { .userchip .who { display: none; } }
.card.tour-cta { background: var(--roxo-escuro); border-color: transparent; }
@media (min-width: 761px) { .topsearch { min-width: 190px; } .topbar .nav a { padding: 9px 14px; } }

/* seleção de texto nas cores da página */
::selection { background: var(--lima); color: var(--sobre-lima); }
.auth-side ::selection, .darkcard ::selection, .card.tour-cta ::selection, .primary::selection { background: var(--lima); color: #1F1A2E; }

/* cartões de vidro não se deslocam nem trocam de sombra ao passar o mouse:
   no Chrome/Edge, mover um elemento com backdrop-filter faz o desfoque vazar sobre o cartão vizinho */
.metric:hover, .metric:active { transform: none; box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 10px 30px rgba(31, 26, 46, .05); }
.metric { transition: border-color .18s ease, background-color .18s ease; overflow: hidden; isolation: isolate; }
.metric:hover { border-color: var(--roxo-txt); }
.metric:hover .num { transform: translateY(-2px); }
.metric .num { display: inline-block; transition: transform .25s cubic-bezier(.3, 1.8, .5, 1); }
button.metric:active:not(:disabled) { transform: none; }

/* ===== desempenho: desfoque só no cabeçalho =====
   O fundo atrás dos cartões é um degradê suave: desfocá-lo não muda a aparência, mas custava caro a cada quadro
   e causava faixas de luz nas bordas (o desfoque vazava para os cartões vizinhos). */
.card, .metric, .kcol, .steps li, .irow, .drop, .nav, .brand, .userchip, .topsearch input, .kcol header { -webkit-backdrop-filter: none; backdrop-filter: none; }
.topbar { -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); }
.kcol header { background: var(--card-solido); }
.card, .metric, .kcol { box-shadow: 0 8px 24px rgba(31, 26, 46, .05); }
.metric:hover, .metric:active { box-shadow: 0 8px 24px rgba(31, 26, 46, .05); }
.metric { overflow: visible; isolation: auto; }
.globe { contain: strict; }

/* ===== cursor: seta facetada como imagem nativa (o sistema desenha; não há atraso) ===== */
@media (hover: hover) and (pointer: fine) {
  html { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'30'%20height%3D'30'%20viewBox%3D'0%200%2032%2032'%3E%3Cpath%20fill%3D'%237D4FC7'%20d%3D'M3%203L29%2013L17%2017Z'%2F%3E%3Cpath%20fill%3D'%234A2A7F'%20d%3D'M3%203L17%2017L13%2029Z'%2F%3E%3Cpath%20fill%3D'none'%20stroke%3D'%231F1A2E'%20stroke-width%3D'2.4'%20stroke-linejoin%3D'round'%20d%3D'M3%203L29%2013L17%2017L13%2029Z'%2F%3E%3C%2Fsvg%3E") 3 3, auto; }
  a, button, summary, label, select, [role=tab], .table tbody tr, .kcard, .globe, input[type=checkbox], input[type=radio], input[type=file], input[type=date] { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'30'%20height%3D'30'%20viewBox%3D'0%200%2032%2032'%3E%3Cpath%20fill%3D'%23DDE97A'%20d%3D'M3%203L29%2013L17%2017Z'%2F%3E%3Cpath%20fill%3D'%23C5D82E'%20d%3D'M3%203L17%2017L13%2029Z'%2F%3E%3Cpath%20fill%3D'none'%20stroke%3D'%231F1A2E'%20stroke-width%3D'2.4'%20stroke-linejoin%3D'round'%20d%3D'M3%203L29%2013L17%2017L13%2029Z'%2F%3E%3C%2Fsvg%3E") 3 3, pointer; }
  .hint, a[href="#/ajuda"], .tour-cta button { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'30'%20height%3D'30'%20viewBox%3D'0%200%2032%2032'%3E%3Ccircle%20cx%3D'16'%20cy%3D'16'%20r%3D'13.5'%20fill%3D'%23C5D82E'%20stroke%3D'%231F1A2E'%20stroke-width%3D'2.4'%2F%3E%3Ctext%20x%3D'16'%20y%3D'22.5'%20text-anchor%3D'middle'%20font-family%3D'Arial%2C%20Helvetica%2C%20sans-serif'%20font-weight%3D'900'%20font-size%3D'19'%20fill%3D'%231F1A2E'%3E%3F%3C%2Ftext%3E%3C%2Fsvg%3E") 15 15, help; }
  :root[data-theme="dark"] { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'30'%20height%3D'30'%20viewBox%3D'0%200%2032%2032'%3E%3Cpath%20fill%3D'%239A7BD6'%20d%3D'M3%203L29%2013L17%2017Z'%2F%3E%3Cpath%20fill%3D'%236B46B8'%20d%3D'M3%203L17%2017L13%2029Z'%2F%3E%3Cpath%20fill%3D'none'%20stroke%3D'%23F2EFF9'%20stroke-width%3D'2'%20stroke-linejoin%3D'round'%20d%3D'M3%203L29%2013L17%2017L13%2029Z'%2F%3E%3C%2Fsvg%3E") 3 3, auto; }
  :root[data-theme="dark"] a, :root[data-theme="dark"] button, :root[data-theme="dark"] summary, :root[data-theme="dark"] label, :root[data-theme="dark"] select, :root[data-theme="dark"] [role=tab], :root[data-theme="dark"] .table tbody tr, :root[data-theme="dark"] .kcard, :root[data-theme="dark"] .globe, :root[data-theme="dark"] input[type=checkbox], :root[data-theme="dark"] input[type=radio], :root[data-theme="dark"] input[type=file], :root[data-theme="dark"] input[type=date] { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'30'%20height%3D'30'%20viewBox%3D'0%200%2032%2032'%3E%3Cpath%20fill%3D'%23DDE97A'%20d%3D'M3%203L29%2013L17%2017Z'%2F%3E%3Cpath%20fill%3D'%23C5D82E'%20d%3D'M3%203L17%2017L13%2029Z'%2F%3E%3Cpath%20fill%3D'none'%20stroke%3D'%23F2EFF9'%20stroke-width%3D'2'%20stroke-linejoin%3D'round'%20d%3D'M3%203L29%2013L17%2017L13%2029Z'%2F%3E%3C%2Fsvg%3E") 3 3, pointer; }
  :root[data-theme="dark"] .hint, :root[data-theme="dark"] a[href="#/ajuda"], :root[data-theme="dark"] .tour-cta button { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'30'%20height%3D'30'%20viewBox%3D'0%200%2032%2032'%3E%3Ccircle%20cx%3D'16'%20cy%3D'16'%20r%3D'13.5'%20fill%3D'%23C5D82E'%20stroke%3D'%231F1A2E'%20stroke-width%3D'2.4'%2F%3E%3Ctext%20x%3D'16'%20y%3D'22.5'%20text-anchor%3D'middle'%20font-family%3D'Arial%2C%20Helvetica%2C%20sans-serif'%20font-weight%3D'900'%20font-size%3D'19'%20fill%3D'%231F1A2E'%3E%3F%3C%2Ftext%3E%3C%2Fsvg%3E") 15 15, help; }
  input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=date]), textarea { cursor: text; }
  button:disabled { cursor: not-allowed; }
  .pull-bulb, .pull-bulb:hover { cursor: grab; }
  .pull.drag .pull-bulb { cursor: grabbing; }
}

/* item ativo mantém a própria cor ao passar o mouse (antes o fundo do hover apagava o verde-limão e o texto escuro sumia no tema escuro) */
.topbar .nav a[aria-current='page'], .topbar .nav a[aria-current='page']:hover { background: var(--lima); color: var(--sobre-lima); }
.step.cur:hover:not(:disabled) { background: var(--lima); color: var(--sobre-lima); }
.step.cur.lost:hover:not(:disabled) { background: var(--inv-bg); color: var(--inv-fg); }
.tabs button[aria-selected='true']:hover, .chip[aria-pressed='true']:hover { background: var(--roxo); color: #fff; }
.steps li[aria-current='step'] { background: var(--roxo); color: #fff; }
.primary.danger, .primary.danger:hover { background: #A1271C; border-color: #A1271C; color: #fff; }
.notice.info { color: var(--roxo-txt); }
.accent:hover, .btn.accent:hover { background: #b4c625; color: var(--sobre-lima); }
.primary:hover, .btn.primary:hover { background: var(--roxo-escuro); color: #fff; }
:root[data-theme='dark'] .primary:hover, :root[data-theme='dark'] .btn.primary:hover { background: #7D58C9; }