:root {
  /* Verde-dinheiro sobre preto-esverdeado. O acento precisa ser vivo o
     suficiente para ler em fundo escuro — verde escuro puro sumiria. */
  --bg: #0a0f0d;
  --bg-2: #101815;
  --bg-3: #17231e;
  --line: #24322c;
  --txt: #e8f0ec;
  --txt-dim: #8ba096;
  --accent: #0e9f6e;
  --accent-2: #2fd48f;
  --green: #2fd48f;
  --blue: #4aa3ff;
  --yellow: #f5c451;
  --purple: #9b6dff;
  --danger: #e5484d;
  --radius: 12px;
  --shadow: 0 8px 30px rgba(0,0,0,.4);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--bg); color: var(--txt);
  display: flex; min-height: 100vh;
}

/* Sidebar */
.sidebar {
  width: 240px; flex-shrink: 0; background: var(--bg-2);
  border-right: 1px solid var(--line); display: flex; flex-direction: column;
  padding: 18px 14px; position: sticky; top: 0; height: 100vh;
}
.brand { display: flex; align-items: center; gap: 12px; padding: 0 6px 18px; }
.brand .skull { font-size: 34px; filter: drop-shadow(0 0 8px var(--accent)); }
.brand h1 { font-size: 18px; margin: 0; letter-spacing: 2px; }
.brand small { color: var(--txt-dim); letter-spacing: 1px; }
nav { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
nav button {
  display: flex; align-items: center; gap: 10px; background: none; border: none;
  color: var(--txt-dim); padding: 11px 12px; border-radius: 9px; cursor: pointer;
  font-size: 14px; text-align: left; transition: .15s;
}
nav button:hover { background: var(--bg-3); color: var(--txt); }
nav button.active { background: linear-gradient(90deg, rgba(14,159,110,.18), transparent); color: var(--txt); box-shadow: inset 3px 0 0 var(--accent); }
.sidebar-footer { margin-top: auto; display: flex; flex-direction: column; gap: 6px; padding-top: 14px; border-top: 1px solid var(--line); }

/* Content */
.content { flex: 1; padding: 26px 32px; overflow-x: hidden; max-width: 100%; }
.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; gap: 16px; flex-wrap: wrap; }
.page-head h2 { margin: 0; font-size: 24px; }
.page-head .sub { color: var(--txt-dim); font-size: 13px; }

/* Buttons */
button { font-family: inherit; }
.primary { background: var(--accent); color: #fff; border: none; padding: 9px 18px; border-radius: 8px; cursor: pointer; font-weight: 600; transition: .15s; }
.primary:hover { background: var(--accent-2); }
.ghost { background: var(--bg-3); color: var(--txt); border: 1px solid var(--line); padding: 9px 14px; border-radius: 8px; cursor: pointer; font-size: 13px; transition: .15s; }
.ghost:hover { border-color: var(--txt-dim); }
.ghost.danger { color: var(--danger); }
.ghost.danger:hover { background: rgba(229,72,77,.12); }
.icon-btn { background: none; border: none; color: var(--txt-dim); font-size: 18px; cursor: pointer; }
.icon-btn:hover { color: var(--txt); }

/* KPI cards */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 26px; }
.kpi { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; position: relative; overflow: hidden; }
.kpi::after { content: ""; position: absolute; right: -20px; top: -20px; width: 80px; height: 80px; border-radius: 50%; background: radial-gradient(circle, rgba(14,159,110,.12), transparent 70%); }
.kpi .label { color: var(--txt-dim); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }
.kpi .value { font-size: 26px; font-weight: 700; margin-top: 6px; }
.kpi .value.sm { font-size: 20px; }
.kpi .hint { font-size: 12px; color: var(--txt-dim); margin-top: 4px; }

/* Panels */
.panel { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 20px; }
.panel h3 { margin: 0 0 14px; font-size: 15px; }
.panel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }

/* Bar chart */
.bars { display: flex; flex-direction: column; gap: 9px; }
.bar-row { display: grid; grid-template-columns: 130px 1fr auto; align-items: center; gap: 10px; font-size: 13px; }
.bar-row .k { color: var(--txt-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-track { background: var(--bg-3); border-radius: 6px; height: 16px; overflow: hidden; }
/* display:block é obrigatório — <span> inline ignora width/height e colapsa a 0px */
.bar-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 6px; }
.bar-row .v { font-variant-numeric: tabular-nums; color: var(--txt); min-width: 42px; text-align: right; }

/* Os outros três tipos de gráfico que o vendedor pode pedir ---------------- */

/* Colunas: leitura da esquerda para a direita, que é como o tempo anda. */
.cols-g { display: flex; align-items: flex-end; gap: 8px; height: 160px; overflow-x: auto; }
.cg {
  flex: 1 0 34px; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; height: 100%; gap: 5px; min-width: 34px;
}
.cg-b {
  display: block; width: 100%; border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg, var(--accent), rgba(47, 212, 143, .4));
}
.cg-v { font-size: 10.5px; color: var(--txt-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cg-k { font-size: 10.5px; color: var(--txt-dim); white-space: nowrap; }

/* Rosca: a fatia e o quanto ela é, lado a lado. */
.donut-wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.donut { width: 128px; height: 128px; flex-shrink: 0; transform: rotate(-90deg); }
.donut circle { fill: none; stroke-width: 4.4; }
.dn-bg { stroke: var(--bg-3); }
.donut-leg { list-style: none; flex: 1; min-width: 160px; font-size: 12.5px; }
.donut-leg li { display: flex; align-items: center; gap: 8px; padding: 4px 0; color: var(--txt-dim); }
.donut-leg i { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
.donut-leg .dl-k { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.donut-leg b { margin-left: auto; color: var(--txt); font-variant-numeric: tabular-nums; }
.donut-leg .dl-v { min-width: 58px; text-align: right; font-variant-numeric: tabular-nums; }

/* Linha: a tendência, e onde ela parou. */
.line-wrap { width: 100%; }
.line-g { width: 100%; height: 130px; display: block; overflow: visible; }
.lg-area { fill: rgba(47, 212, 143, .12); }
/* vector-effect mantém a espessura ao esticar o viewBox — sem ele a linha
   engorda no eixo X e some no eixo Y. */
.lg-line {
  fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round;
  stroke-linecap: round; vector-effect: non-scaling-stroke;
}
.lg-eixo { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--txt-dim); margin-top: 6px; }
.lg-eixo span { flex: 1; text-align: center; overflow: hidden; white-space: nowrap; }
.lg-fim { font-size: 12px; color: var(--txt-dim); text-align: right; margin-top: 8px; }
.lg-fim b { color: var(--txt); }

/* Table */
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.toolbar input, .toolbar select { background: var(--bg-2); border: 1px solid var(--line); color: var(--txt); padding: 9px 12px; border-radius: 8px; font-size: 13px; }
.toolbar input[type=search] { min-width: 220px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { padding: 10px 12px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--line); }
th { color: var(--txt-dim); font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: .4px; position: sticky; top: 0; background: var(--bg-3); cursor: pointer; user-select: none; }
th:hover { color: var(--txt); }
tbody tr { cursor: pointer; transition: .1s; }
tbody tr:hover { background: var(--bg-3); }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
td.comments { max-width: 280px; white-space: normal; color: var(--txt-dim); }

/* Badges */
.badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.badge.status-WON { background: rgba(47,212,143,.16); color: var(--green); }
.badge.status-IN { background: rgba(74,163,255,.16); color: var(--blue); }
.badge.status-LOST { background: rgba(229,72,77,.16); color: var(--danger); }
.badge.status-HOLD { background: rgba(245,196,81,.16); color: var(--yellow); }
.badge.status-OTHER { background: var(--bg-3); color: var(--txt-dim); }
.badge.prio-A { background: rgba(14,159,110,.2); color: var(--accent-2); }
.badge.prio-B { background: rgba(245,196,81,.2); color: var(--yellow); }
.badge.prio-C { background: rgba(74,163,255,.2); color: var(--blue); }
.badge.prio-D { background: var(--bg-3); color: var(--txt-dim); }
.badge.prio-Partner { background: rgba(155,109,255,.2); color: var(--purple); }
.badge.temp-HOT { background: rgba(245,196,81,.2); color: var(--yellow); }
.badge.temp-COLD { background: rgba(74,163,255,.2); color: var(--blue); }

/* Pipeline kanban */
.kanban { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 10px; }
.kcol { flex: 0 0 300px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.kcol h4 { margin: 0 0 4px; font-size: 13px; display: flex; justify-content: space-between; }
.kcol .col-sum { color: var(--txt-dim); font-size: 11px; margin-bottom: 10px; }
.kcard { background: var(--bg-3); border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-bottom: 10px; cursor: pointer; transition: .12s; }
.kcard:hover { border-color: var(--accent); transform: translateY(-1px); }
.kcard .kc-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.kcard .kc-name { font-weight: 600; font-size: 14px; }
.kcard .kc-earr { color: var(--green); font-weight: 700; font-size: 13px; margin: 6px 0; }
.kcard .kc-meta { color: var(--txt-dim); font-size: 11px; display: flex; gap: 6px; flex-wrap: wrap; }
.kcard .kc-tag { background: var(--bg); padding: 2px 7px; border-radius: 6px; }
.kcard .kc-next { font-size: 12px; color: var(--txt-dim); margin-top: 8px; border-top: 1px dashed var(--line); padding-top: 6px; }
.meddpicc { display: flex; gap: 3px; margin-top: 8px; flex-wrap: wrap; }
.mdot { width: 9px; height: 9px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line); }
.mdot.ok { background: var(--green); border-color: var(--green); }
.mdot.pending { background: var(--yellow); border-color: var(--yellow); }
.mdot.no { background: var(--accent); border-color: var(--accent); }

/* Modal */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 20px; }
.modal-backdrop.hidden { display: none; }
.modal { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; width: min(720px, 100%); max-height: 90vh; display: flex; flex-direction: column; box-shadow: var(--shadow); }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 0; font-size: 18px; }
.modal-body { padding: 18px 20px; overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.modal-foot { display: flex; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--line); align-items: center; }
.modal-foot .spacer { flex: 1; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 12px; color: var(--txt-dim); }
.field input, .field select, .field textarea {
  background: var(--bg); border: 1px solid var(--line); color: var(--txt);
  padding: 9px 11px; border-radius: 8px; font-size: 13px; font-family: inherit; width: 100%;
}
.field textarea { resize: vertical; min-height: 60px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); }

/* Toast */
/* Canto superior direito: no rodapé ele cobria o campo de digitação do chat */
.toast { position: fixed; top: 22px; right: 26px; background: var(--bg-3); border: 1px solid var(--line); color: var(--txt); padding: 12px 22px; border-radius: 10px; box-shadow: var(--shadow); z-index: 100; }
.toast.hidden { display: none; }
.toast.ok { border-color: var(--green); }
.toast.err { border-color: var(--accent); }

.empty { color: var(--txt-dim); text-align: center; padding: 40px; }
.hidden { display: none; }

/* ===================== Gabi IA ===================== */
.ai-setup { max-width: 620px; }
.ai-setup h3 { margin-top: 0; }
.ai-help { color: var(--txt-dim); font-size: 13px; line-height: 1.6; }
.ai-help code { background: var(--bg-3); padding: 2px 6px; border-radius: 5px; font-size: 12px; }
.ai-key-row { display: flex; gap: 10px; margin-top: 16px; }
.ai-key-row input {
  flex: 1; background: var(--bg); border: 1px solid var(--line); color: var(--txt);
  padding: 11px 13px; border-radius: 9px; font-size: 13px; font-family: monospace;
}
.ai-key-row input:focus { outline: none; border-color: var(--accent); }

.ai-chat { display: flex; flex-direction: column; height: calc(100vh - 150px); }
.ai-scroll {
  flex: 1; overflow-y: auto; padding: 4px 4px 16px;
  display: flex; flex-direction: column; gap: 18px;
}

.ai-empty { margin: auto; text-align: center; max-width: 560px; color: var(--txt-dim); }
.ai-empty-icon { font-size: 46px; filter: drop-shadow(0 0 12px var(--accent)); margin-bottom: 10px; }
.ai-suggestions { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-top: 22px; }
.ai-chip {
  background: var(--bg-2); border: 1px solid var(--line); color: var(--txt-dim);
  padding: 9px 14px; border-radius: 999px; cursor: pointer; font-size: 12.5px; transition: .15s;
}
.ai-chip:hover { border-color: var(--accent); color: var(--txt); }


/* O arquivo dentro da bolha: clicável, e claramente um arquivo. */
.anexo {
  display: inline-flex; align-items: center; gap: 9px; max-width: 100%;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 13px; font-size: 13px; color: var(--txt); text-decoration: none;
  transition: .15s;
}
a.anexo:hover { border-color: var(--accent); }
.anexo.pendente { opacity: .65; }
.anx-ic { font-size: 15px; flex-shrink: 0; }
.anx-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anx-tam { color: var(--txt-dim); font-size: 12px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.anx-baixar { color: var(--accent); flex-shrink: 0; margin-left: 2px; }
/* Na bolha do vendedor, que é alinhada à direita, o anexo acompanha. */
.ai-msg.user .anexo { align-self: flex-end; }

.ai-msg { display: flex; flex-direction: column; gap: 6px; max-width: 780px; }
.ai-msg.user { align-self: flex-end; align-items: flex-end; }
.ai-who { font-size: 11px; color: var(--txt-dim); letter-spacing: .5px; text-transform: uppercase; }
.ai-body {
  background: var(--bg-2); border: 1px solid var(--line);
  padding: 13px 16px; border-radius: var(--radius); font-size: 14px; line-height: 1.65;
}
.ai-msg.user .ai-body {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent; color: #fff;
}
.ai-body p { margin: 0 0 10px; }
.ai-body p:last-child, .ai-body ul:last-child { margin-bottom: 0; }
.ai-body h4 { margin: 16px 0 7px; font-size: 13px; color: var(--accent-2); letter-spacing: .4px; }
.ai-body h4:first-child { margin-top: 0; }
.ai-body ul { margin: 0 0 10px; padding-left: 20px; }
.ai-body li { margin-bottom: 5px; }
.ai-body strong { color: #fff; }
.ai-body code { background: var(--bg-3); padding: 1px 5px; border-radius: 4px; font-size: 12.5px; }

.ai-typing { color: var(--txt-dim); font-style: italic; }
.ai-typing::after { content: ""; animation: dots 1.4s steps(4, end) infinite; }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
.ai-error { color: var(--danger); }

.ai-input { display: flex; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.ai-input input {
  flex: 1; background: var(--bg-2); border: 1px solid var(--line); color: var(--txt);
  padding: 13px 16px; border-radius: 10px; font-size: 14px;
}
.ai-input input:focus { outline: none; border-color: var(--accent); }
.ai-input input:disabled { opacity: .5; }

/* Botao de analise no modal */
.ghost.ai { border-color: var(--accent); color: var(--accent-2); }
.ghost.ai:hover { background: rgba(14,159,110, .12); }

/* Painel de resultado */
.modal.ai-panel { max-width: 720px; }
.ai-prose { display: block; font-size: 14px; line-height: 1.7; max-height: 70vh; overflow-y: auto; }
.ai-prose p { margin: 0 0 11px; }
.ai-prose h4 { margin: 18px 0 8px; font-size: 13px; color: var(--accent-2); letter-spacing: .4px; }
.ai-prose h4:first-child { margin-top: 0; }
.ai-prose ul { margin: 0 0 11px; padding-left: 20px; }
.ai-prose li { margin-bottom: 6px; }
.ai-prose strong { color: #fff; }

/* ===================== Marca ===================== */
.brand .mark { width: 34px; height: 34px; flex-shrink: 0; filter: drop-shadow(0 0 10px rgba(14,159,110,.55)); }

/* ===================== Chat como tela principal ===================== */
.ai-chat { height: calc(100vh - 52px); }
.ai-empty h3 { color: var(--txt); font-size: 20px; margin: 0 0 8px; }
.ai-empty-icon { font-size: 34px; color: var(--accent-2); text-shadow: 0 0 18px rgba(14,159,110,.6); }

/* Acoes executadas pela IA */

/* Lembretes acima do input */
.ai-reminders { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 2px 2px; }
.rem-title { font-size: 11px; color: var(--txt-dim); text-transform: uppercase; letter-spacing: .6px; }
.rem-pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--txt);
  padding: 7px 13px; border-radius: 999px; cursor: pointer; font-size: 12.5px; transition: .15s;
}
.rem-pill:hover { border-color: var(--green); color: var(--green); }
.rem-pill:hover .rem-check::before { content: "●"; }
.rem-pill em { color: var(--txt-dim); font-style: normal; }
.rem-check { color: var(--txt-dim); font-size: 10px; }

/* ===================== Quick actions (first tab) ===================== */
.ai-quick { display: grid; grid-template-columns: repeat(2, minmax(190px, 1fr)); gap: 10px; margin: 26px 0 20px; }
.quick-card {
  display: flex; align-items: center; gap: 11px; text-align: left;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--txt);
  padding: 14px 16px; border-radius: 11px; cursor: pointer; font-size: 13.5px;
  font-weight: 600; transition: .15s;
}
.quick-card:hover { border-color: var(--accent); background: var(--bg-3); transform: translateY(-1px); }
.quick-icon {
  display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0;
  border-radius: 8px; background: rgba(14,159,110,.14); color: var(--accent-2); font-size: 14px;
}

/* Setup steps */
.ai-steps { color: var(--txt-dim); font-size: 13px; line-height: 1.85; padding-left: 20px; margin: 14px 0; }
.ai-steps strong { color: var(--txt); }
.ai-help.dim { font-size: 12px; opacity: .75; margin-top: 16px; }

/* Email setup */
.email-body { display: block; }
.email-body .field { margin-bottom: 12px; }
.email-body .field label { display: block; font-size: 12px; color: var(--txt-dim); margin-bottom: 5px; }
.email-body .field input {
  width: 100%; background: var(--bg); border: 1px solid var(--line); color: var(--txt);
  padding: 10px 13px; border-radius: 8px; font-size: 13px;
}
.email-body .field input:focus { outline: none; border-color: var(--accent); }
.email-adv { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.email-adv summary { cursor: pointer; color: var(--txt-dim); font-size: 12.5px; }
.email-adv[open] summary { margin-bottom: 12px; }
.modal-head .spacer { flex: 1; }

/* ===================== History ===================== */
.hist-day { margin-bottom: 26px; }
.hist-date {
  font-size: 11px; text-transform: uppercase; letter-spacing: .7px; color: var(--txt-dim);
  padding-bottom: 9px; margin-bottom: 4px; border-bottom: 1px solid var(--line);
}
.hist-row {
  display: grid; grid-template-columns: 54px 26px 1fr; align-items: center;
  gap: 10px; padding: 10px 4px; border-bottom: 1px solid rgba(40,48,63,.5); font-size: 13.5px;
}
.hist-row:last-child { border-bottom: none; }
.hist-time { color: var(--txt-dim); font-size: 12px; font-variant-numeric: tabular-nums; }
.hist-icon {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px;
  font-size: 12px; background: var(--bg-3); color: var(--txt-dim);
}
.hist-icon[class*="create"] { background: rgba(47,212,143,.14); color: var(--green); }
.hist-icon[class*="update"] { background: rgba(74,163,255,.14); color: var(--blue); }
.hist-icon[class*="delete"] { background: rgba(229,72,77,.14); color: var(--danger); }
.hist-label { color: var(--txt); }

/* Daily briefing box */
.briefing-box { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.check { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: 13.5px; font-weight: 600; }
.check input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.briefing-box .ai-help { margin: 6px 0 12px 25px; font-size: 12px; }
.field.inline { display: flex; align-items: center; gap: 10px; margin-left: 25px; }
.field.inline label { margin: 0; white-space: nowrap; }
.field.inline select {
  background: var(--bg); border: 1px solid var(--line); color: var(--txt);
  padding: 8px 10px; border-radius: 8px; font-size: 13px;
}

/* ===================== Thinking indicator ===================== */
.thinking { display: inline-flex; align-items: center; gap: 10px; padding: 4px 2px; }
.think-mark {
  font-size: 17px; color: var(--accent-2);
  animation: thinkPulse 1.5s ease-in-out infinite;
}
@keyframes thinkPulse {
  0%, 100% { opacity: .35; transform: scale(.85) rotate(0deg); }
  50%      { opacity: 1;   transform: scale(1.15) rotate(180deg); }
}
.think-word {
  color: var(--txt-dim); font-size: 13.5px; font-style: italic;
  transition: opacity .2s ease;
}
.think-word::after { content: "…"; }

/* ===================== Attachments ===================== */
.attach-btn {
  background: var(--bg-2); border: 1px solid var(--line); color: var(--txt-dim);
  width: 42px; border-radius: 10px; cursor: pointer; font-size: 15px; transition: .15s;
}
.attach-btn:hover { border-color: var(--accent); color: var(--accent-2); }
.attached {
  display: flex; align-items: center; gap: 9px; margin: 10px 2px 0;
  background: var(--bg-2); border: 1px solid var(--accent); border-radius: 10px;
  padding: 9px 13px; font-size: 13px;
}
.att-name { font-weight: 600; }
.att-size { color: var(--txt-dim); font-size: 12px; margin-left: auto; }
.att-x { background: none; border: none; color: var(--txt-dim); cursor: pointer; font-size: 14px; }
.att-x:hover { color: var(--danger); }

/* Faixa de arrastar-e-soltar da tela inicial */
.drop-cta {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: var(--bg-2); border: 1px dashed var(--line); color: var(--txt);
  padding: 18px 20px; border-radius: var(--radius); cursor: pointer; margin: 24px 0 18px;
  transition: .15s;
}
.drop-cta:hover { border-color: var(--accent); background: var(--bg-3); }
.drop-cta em { display: block; color: var(--txt-dim); font-style: normal; font-size: 12.5px; margin-top: 3px; }
.drop-icon {
  display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 10px; background: rgba(14,159,110,.14); color: var(--accent-2); font-size: 18px;
}
body.dragging::after {
  content: "Drop it anywhere"; position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; font-size: 22px; font-weight: 700; color: var(--accent-2);
  background: rgba(10,15,13,.88); border: 3px dashed var(--accent); pointer-events: none;
}

/* Mensagem aguardando a vez na fila */
.ai-msg.queued { opacity: .55; }
.ai-msg.queued .ai-body { border-style: dashed; }

/* ===================== Attainment & commission ===================== */
.attain-grid { margin-bottom: 20px; }
.attain-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.attain-head h3 { margin: 0; }
.attain-period { color: var(--txt-dim); font-size: 12px; }
.attain-num { font-size: 46px; font-weight: 800; line-height: 1.05; margin: 14px 0 12px; color: var(--txt); }
.attain-num span { font-size: 22px; color: var(--txt-dim); margin-left: 2px; }
.attain-num.close { color: var(--yellow); }
.attain-num.hit { color: var(--accent-2); }
.attain-track { background: var(--bg-3); border-radius: 999px; height: 12px; overflow: hidden; }
.attain-fill {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width .5s ease;
}
.attain-fill.close { background: linear-gradient(90deg, #b8860b, var(--yellow)); }
.attain-foot { display: flex; justify-content: space-between; margin-top: 10px; font-size: 12.5px; color: var(--txt-dim); }
.attain-empty .ai-help { margin: 0 0 14px; }
.attain-empty em { color: var(--txt); font-style: normal; }

.comm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 16px; }
.comm-label { color: var(--txt-dim); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
.comm-value { font-size: 22px; font-weight: 700; margin-top: 5px; color: var(--accent-2); }
.comm-value.dim { color: var(--txt-dim); }
.comm-value.big { color: var(--txt); }
.comm-value em { font-size: 13px; font-style: normal; color: var(--txt-dim); margin-left: 2px; }
.comm-hint { font-size: 11.5px; color: var(--txt-dim); margin-top: 4px; }

/* Lembrete recorrente */
.rem-loop { color: var(--accent-2); font-size: 11px; margin-left: 2px; }
.rem-pill:hover .rem-loop { color: var(--accent-2); }

/* ===================== Primeiro uso: uma caixa, nada mais ===================== */
/* Sem lembretes nem campo de baixo: a tela inteira é a caixa. */
.ai-chat.virgin .ai-input, .ai-chat.virgin .ai-reminders { display: none; }
.first-run { max-width: 620px; }
.first-run h3 { font-size: 26px; margin-bottom: 10px; }
.first-run > p { font-size: 14.5px; line-height: 1.6; }

.big-box {
  margin-top: 26px; background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 14px; padding: 6px; transition: border-color .15s;
}
.big-box:focus-within { border-color: var(--accent); }
.big-box textarea {
  width: 100%; background: none; border: none; color: var(--txt); resize: none;
  padding: 14px 16px 6px; font-family: inherit; font-size: 14.5px; line-height: 1.6;
}
.big-box textarea:focus { outline: none; }
.big-box textarea::placeholder { color: var(--txt-dim); }
.big-box-foot { display: flex; align-items: center; gap: 10px; padding: 6px 8px 8px; }
.big-box-foot .ghost { margin-right: auto; }
.first-note { color: var(--txt-dim); font-size: 12px; margin-top: 14px; }

/* Cartão de entrega — o momento em que vira pipeline */
.built {
  margin-top: 14px; background: linear-gradient(135deg, rgba(14,159,110,.14), rgba(47,212,143,.05));
  border: 1px solid var(--accent); border-radius: var(--radius); padding: 16px 18px;
  animation: builtIn .35s ease-out;
}
@keyframes builtIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.built-head { font-weight: 700; font-size: 14px; color: var(--accent-2); margin-bottom: 10px; }
.built-nums { display: flex; gap: 20px; flex-wrap: wrap; font-size: 13px; color: var(--txt-dim); margin-bottom: 14px; }
.built-nums b { color: var(--txt); font-size: 17px; margin-right: 4px; }

/* ===================== Edição no lugar ===================== */
/* Discreto até o mouse chegar perto — não pode parecer formulário. */
.inline { cursor: text; border-radius: 5px; transition: background .12s, box-shadow .12s; }
.inline:hover { background: rgba(47,212,143,.10); box-shadow: 0 0 0 3px rgba(47,212,143,.10); }
.kcard .inline:hover, td.inline:hover { background: rgba(47,212,143,.13); }
.inline.editing { background: none; box-shadow: none; }
.inline.saving { opacity: .5; }
.kc-add { color: var(--txt-dim); font-size: 11.5px; opacity: .7; }
.kc-next.inline { min-height: 20px; }

.inline-input {
  width: 100%; min-width: 60px; background: var(--bg); color: var(--txt);
  border: 1px solid var(--accent); border-radius: 6px;
  padding: 3px 7px; font-family: inherit; font-size: inherit; font-weight: inherit;
}
.inline-input:focus { outline: none; box-shadow: 0 0 0 3px rgba(14,159,110,.25); }
td .inline-input { font-size: 13px; }

/* Coluna dos deals ainda sem estágio */
.kcol-orphan { border-style: dashed; border-color: var(--txt-dim); opacity: .92; }
.kcol-orphan h4 { color: var(--txt-dim); }

/* ===================== Tela de lembretes ===================== */
.nav-count {
  margin-left: auto; background: var(--bg-3); color: var(--txt-dim);
  font-size: 11px; font-weight: 700; min-width: 20px; text-align: center;
  padding: 2px 6px; border-radius: 999px;
}
.nav-count.late { background: rgba(229,72,77,.2); color: var(--danger); }
nav button.active .nav-count { background: rgba(14,159,110,.22); color: var(--accent-2); }
nav button.active .nav-count.late { background: rgba(229,72,77,.24); color: var(--danger); }

.rem-group { margin-bottom: 22px; }
.rem-group-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; text-transform: uppercase; letter-spacing: .7px; color: var(--txt-dim);
  padding-bottom: 9px; margin-bottom: 6px; border-bottom: 1px solid var(--line);
}
.rem-group-head span { font-weight: 700; }
.rem-group-head.late { color: var(--danger); }
.rem-group-head.now { color: var(--accent-2); }

.rem-row {
  display: grid; grid-template-columns: 28px 1fr auto 28px; align-items: center; gap: 12px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 8px; transition: .12s;
}
.rem-row:hover { border-color: var(--txt-dim); }
.rem-row.late { border-left: 3px solid var(--danger); }
.rem-row.now { border-left: 3px solid var(--accent-2); }
.rem-row.done { opacity: .45; }

.rem-tick {
  background: none; border: none; color: var(--txt-dim); font-size: 17px;
  cursor: pointer; padding: 0; line-height: 1; transition: .12s;
}
.rem-tick:hover { color: var(--accent-2); transform: scale(1.25); }
.rem-tick.on { color: var(--accent-2); }
.rem-text { font-size: 14px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.rem-about { font-size: 12px; color: var(--txt-dim); margin-top: 3px; }
.rem-badge {
  background: rgba(14,159,110,.15); color: var(--accent-2);
  font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
}
.rem-when { font-size: 12.5px; color: var(--txt-dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rem-when.vago { font-style: italic; opacity: .7; }
.rem-row.late .rem-when { color: var(--danger); }
.rem-row.now .rem-when { color: var(--accent-2); }
.rem-del { background: none; border: none; color: transparent; cursor: pointer; font-size: 13px; transition: .12s; }
.rem-row:hover .rem-del { color: var(--txt-dim); }
.rem-del:hover { color: var(--danger) !important; }

.rem-done-wrap { margin-top: 28px; }
.rem-done-wrap summary { cursor: pointer; color: var(--txt-dim); font-size: 12.5px; margin-bottom: 12px; }

/* Seção recém-nascida: ponto discreto até ele abrir pela primeira vez */
nav button { position: relative; animation: navIn .28s ease-out; }
@keyframes navIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.nav-new {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2);
  margin-left: auto; flex-shrink: 0; box-shadow: 0 0 8px var(--accent-2);
  animation: navPulse 2s ease-in-out infinite;
}
@keyframes navPulse { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
.nav-count + .nav-new { margin-left: 6px; }

/* ===================== Orientação ===================== */
/* O que ainda vai nascer — apagado, não clicável, some quando desbloqueia. */
.nav-soon { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line); }
.nav-soon-head {
  font-size: 10px; text-transform: uppercase; letter-spacing: .8px;
  color: var(--txt-dim); opacity: .6; padding: 0 12px 8px;
}
.nav-soon-item {
  display: flex; align-items: baseline; gap: 9px; padding: 6px 12px;
  font-size: 12.5px; color: var(--txt-dim); opacity: .42; cursor: default;
}
.nav-soon-item em { font-style: normal; font-size: 10.5px; margin-left: auto; opacity: .8; }

.first-promise { color: var(--accent-2); font-size: 13px; margin-top: 16px; }
.built-note { color: var(--txt-dim); font-size: 12px; margin: 0 0 12px; }

/* Atalhos calculados a partir das lacunas reais */
.next-steps { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.next-label { font-size: 11px; color: var(--txt-dim); text-transform: uppercase; letter-spacing: .6px; }
.next-chip {
  background: var(--bg-2); border: 1px solid var(--line); color: var(--txt-dim);
  padding: 7px 13px; border-radius: 999px; cursor: pointer; font-size: 12.5px; transition: .15s;
}
.next-chip:hover { border-color: var(--accent); color: var(--accent-2); background: var(--bg-3); }

/* Campo do chat vira textarea: Shift+Enter quebra linha e ele cresce junto */
.ai-input { align-items: flex-end; }
.ai-input textarea {
  flex: 1; background: var(--bg-2); border: 1px solid var(--line); color: var(--txt);
  padding: 13px 16px; border-radius: 10px; font-size: 14px; font-family: inherit;
  line-height: 1.5; resize: none; overflow-y: auto; max-height: 160px;
}
.ai-input textarea:focus { outline: none; border-color: var(--accent); }
.ai-input textarea::placeholder { color: var(--txt-dim); }
.ai-input .attach-btn, .ai-input .primary { height: 46px; flex-shrink: 0; }

/* ===================== Aba de comissão ===================== */
.comm-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; }
.comm-big {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; position: relative; overflow: hidden;
}
.comm-big::after {
  content: ""; position: absolute; right: -24px; top: -24px; width: 90px; height: 90px;
  border-radius: 50%; background: radial-gradient(circle, rgba(14,159,110,.13), transparent 70%);
}
.comm-big .comm-value { font-size: 30px; margin-top: 7px; }
.bar-fill.dim { background: linear-gradient(90deg, #3c5c50, #6b8f7f); }
.bar-row .v .mo { font-size: 10px; font-style: normal; color: var(--txt-dim); margin-left: 2px; }

/* Botão de voltar ao fim — só quando o vendedor subiu para reler */
.ai-chat { position: relative; }
.jump-down {
  position: absolute; right: 18px; bottom: 92px; z-index: 5;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--bg-3); border: 1px solid var(--accent); color: var(--accent-2);
  cursor: pointer; font-size: 15px; line-height: 1; box-shadow: var(--shadow);
  animation: jumpIn .2s ease-out;
}
.jump-down:hover { background: var(--accent); color: #fff; }
@keyframes jumpIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ===================== Arrastar deals ===================== */
.kcard { cursor: grab; }
.kcard:active { cursor: grabbing; }
.kcard.dragging { opacity: .4; transform: rotate(1.5deg) scale(.98); }
/* Campos editáveis mantêm o cursor de texto — arrastar é do card, não deles */
.kcard .inline { cursor: text; }

.kcol { transition: background .15s, border-color .15s; }
.kcol.drop-here {
  border-color: var(--accent); border-style: solid;
  background: rgba(14,159,110,.09); box-shadow: inset 0 0 0 1px var(--accent);
}
.kcol.drop-here h4 { color: var(--accent-2); }

/* Fantasma que segue o cursor durante o arrasto */
.drag-ghost {
  position: fixed !important; z-index: 999; pointer-events: none;
  opacity: .92; transform: rotate(2deg); box-shadow: 0 12px 30px rgba(0,0,0,.5);
  border-color: var(--accent) !important; margin: 0 !important;
}
.kcard { touch-action: none; }

/* Coluna vazia continua no quadro — o funil não pode sumir por baixo do cursor */
.kcol-empty {
  border: 1px dashed var(--line); border-radius: 10px; padding: 22px 12px;
  text-align: center; color: var(--txt-dim); font-size: 12px; opacity: .55;
}
.kcol.drop-here .kcol-empty { border-color: var(--accent); color: var(--accent-2); opacity: 1; }
.kcol { min-height: 140px; }

/* ===================== Barra da Gabi nas seções (compacta) ===================== */
.content { display: flex; flex-direction: column; min-height: 100vh; }
#view { flex: 1; }
.quick { position: sticky; bottom: 0; padding-top: 10px; background: linear-gradient(transparent, var(--bg) 30%); }
.quick.hidden { display: none; }

.quick-form {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 9px;
  padding: 4px 5px 4px 12px; transition: border-color .15s;
}
.quick-form:focus-within { border-color: var(--accent); }
.quick-spark { color: var(--accent-2); font-size: 13px; flex-shrink: 0; }
.quick-form textarea {
  flex: 1; background: none; border: none; color: var(--txt); resize: none;
  font-family: inherit; font-size: 13px; line-height: 1.45; padding: 7px 0; max-height: 90px;
}
.quick-form textarea:focus { outline: none; }
.quick-form textarea::placeholder { color: var(--txt-dim); font-size: 12.5px; }
.quick-form .primary { height: 30px; padding: 0 14px; font-size: 12.5px; flex-shrink: 0; }

/* Uma linha só: o que foi feito, e um atalho para os detalhes na conversa */
/* A última resposta fica aqui, na seção, com o que ela fez E o que ela disse.
   Bloco, não linha: uma linha só cabia "3 changes applied", que não diz nada. */
.quick-reply {
  position: relative; margin-bottom: 7px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 9px;
  padding: 9px 32px 9px 12px; font-size: 12.5px; animation: builtIn .2s ease-out;
}
.quick-reply .thinking { display: flex; align-items: center; gap: 9px; }

/* A resposta vem inteira. O teto só existe para o caso raro de uma resposta
   muito longa não engolir a tabela que o vendedor está olhando — aí ela rola
   por dentro. Uma resposta normal, de três ou quatro frases, cabe sem rolar. */
.qr-txt { color: var(--txt); line-height: 1.5; max-height: 46vh; overflow-y: auto; }
.qr-txt p { margin: 0 0 6px; }
.qr-txt p:last-child { margin-bottom: 0; }
.qr-txt ul, .qr-txt ol { margin: 4px 0; padding-left: 18px; }
.qr-txt li { margin-bottom: 2px; }
.qr-txt strong { color: var(--txt); }
.quick-ok { color: var(--accent-2); font-weight: 700; flex-shrink: 0; }
.quick-line { flex: 1; color: var(--txt-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quick-more {
  background: none; border: none; color: var(--accent-2); cursor: pointer;
  font-size: 11.5px; text-decoration: underline; flex-shrink: 0; padding: 0;
}
.quick-x {
  position: absolute; top: 7px; right: 9px;
  background: none; border: none; color: var(--txt-dim); cursor: pointer;
  font-size: 12px; line-height: 1; padding: 2px;
}
.quick-x:hover { color: var(--txt); }

/* Histórico dentro da barrinha — recolhido por padrão, sobe quando aberto */
.quick-hist-btn {
  background: none; border: 1px solid var(--line); color: var(--txt-dim);
  border-radius: 7px; height: 30px; min-width: 32px; padding: 0 7px; cursor: pointer;
  font-size: 11px; display: flex; align-items: center; gap: 4px; flex-shrink: 0; transition: .15s;
}
.quick-hist-btn:hover { border-color: var(--accent); color: var(--accent-2); }
.quick-hist-btn.on { border-color: var(--accent); color: var(--accent-2); background: rgba(14,159,110,.10); }
.quick-hist-btn b { font-size: 10px; opacity: .8; }

.quick-hist {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 9px;
  padding: 10px 12px; margin-bottom: 7px; max-height: 210px; overflow-y: auto;
  animation: builtIn .2s ease-out;
}
.qh-row { display: flex; gap: 9px; padding: 4px 0; font-size: 12.5px; line-height: 1.5; }
.qh-who {
  flex-shrink: 0; width: 34px; font-size: 10px; text-transform: uppercase;
  letter-spacing: .4px; color: var(--txt-dim); padding-top: 2px;
}
.qh-row.assistant .qh-who { color: var(--accent-2); }
.qh-text { color: var(--txt); }
.qh-row.user .qh-text { color: var(--txt-dim); }
.qh-empty { color: var(--txt-dim); font-size: 12px; text-align: center; padding: 8px; }

/* ===================== Revisão executiva ===================== */
.rv-heroes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 20px; }
.rv-hero {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; position: relative; overflow: hidden;
}
.rv-hero.win { border-color: rgba(47,212,143,.4); }
.rv-hero.commit { border-color: rgba(74,163,255,.35); }
.rv-hero.gap { border-color: rgba(245,196,81,.35); }
.rv-rot { font-size: 11px; text-transform: uppercase; letter-spacing: .7px; color: var(--txt-dim); }
.rv-val { font-size: 30px; font-weight: 800; margin: 8px 0 4px; letter-spacing: -.5px; }
.rv-hero.win .rv-val { color: var(--accent-2); }
.rv-hero.commit .rv-val { color: var(--blue); }
.rv-hero.gap .rv-val { color: var(--yellow); }
.rv-dica { font-size: 12px; color: var(--txt-dim); }

.rv-funnel { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.rv-stage-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.rv-stage-name { font-size: 12px; color: var(--txt-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-stage-n { font-size: 15px; font-weight: 700; }
.rv-bar { background: var(--bg-3); border-radius: 999px; height: 8px; overflow: hidden; margin: 8px 0 6px; }
.rv-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.rv-stage-v { font-size: 14px; font-weight: 700; color: var(--txt); }
.rv-stage-v em { font-style: normal; font-size: 12px; color: var(--blue); font-weight: 600; }

.rv-table { width: 100%; font-size: 13px; }
.rv-table td { padding: 9px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.rv-table tr:last-child td { border-bottom: none; }
.rv-deal { font-weight: 600; }
.rv-stg, .rv-when { color: var(--txt-dim); font-size: 12px; }
.rv-money { color: var(--accent-2); font-weight: 700; }

.rv-count { background: var(--bg-3); color: var(--txt-dim); font-size: 11px; padding: 2px 8px; border-radius: 999px; margin-left: 6px; }
.rv-moves { display: flex; flex-direction: column; gap: 7px; }
.rv-move { font-size: 12.5px; color: var(--txt-dim); padding-left: 14px; position: relative; }
.rv-move::before { content: "▪"; position: absolute; left: 0; color: var(--accent-2); }

/* Indicadores de qualificação clicáveis no card */
.meddpicc { display: flex; gap: 5px; margin: 8px 0 6px; }
.mdot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--bg);
  border: 1px solid var(--line); cursor: pointer; transition: .12s;
}
.mdot:hover { transform: scale(1.5); border-color: var(--accent-2); }
.mdot.ok { background: var(--accent-2); border-color: var(--accent-2); }
.mdot.pending { background: var(--yellow); border-color: var(--yellow); }
.mdot.no { background: var(--danger); border-color: var(--danger); }

/* ===================== Leitura do quadro ===================== */
.read {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: var(--bg-2); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 10px; padding: 13px 16px; margin-bottom: 16px;
}
.read-head {
  font-size: 10px; text-transform: uppercase; letter-spacing: .8px;
  color: var(--txt-dim); flex-shrink: 0;
}
.read-lines { display: flex; gap: 22px; flex-wrap: wrap; flex: 1; }
.read-line { font-size: 13px; color: var(--txt-dim); position: relative; padding-left: 15px; }
.read-line b { color: var(--txt); font-weight: 700; }
.read-line::before { content: "●"; position: absolute; left: 0; font-size: 8px; top: 4px; }
.read-line.commit::before { color: var(--accent-2); }
.read-line.risk::before   { color: var(--yellow); }
.read-line.cold::before   { color: var(--blue); }
.read-line.gap::before    { color: var(--danger); }
.read-btn { flex-shrink: 0; font-size: 12px; padding: 7px 12px; }

/* Lista de insights, um por linha */
.ins-list { display: flex; flex-direction: column; gap: 10px; }
.ins-item { font-size: 13.5px; color: var(--txt-dim); padding-left: 18px; position: relative; line-height: 1.55; }
.ins-item b { color: var(--txt); font-weight: 700; }
.ins-item::before { content: "●"; position: absolute; left: 0; font-size: 8px; top: 5px; }
.ins-item.commit::before { color: var(--accent-2); }
.ins-item.risk::before   { color: var(--yellow); }
.ins-item.cold::before   { color: var(--blue); }
.ins-item.gap::before    { color: var(--danger); }

/* Anexo na barrinha, versão compacta */
.attached.compact { padding: 6px 11px; margin-bottom: 7px; font-size: 12px; border-radius: 8px; }
.head-btns { display: flex; gap: 8px; flex-wrap: wrap; }

/* ===== Dicas por seção =====
   Recolhível e discreto: quem já sabe o que fazer fecha uma vez e nunca mais
   vê; quem travou tem uma frase pronta para clicar em vez de redigir. */
.tips {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 10px; margin-bottom: 16px;
}
.tips > summary {
  cursor: pointer; padding: 11px 15px; font-size: 12.5px; font-weight: 600;
  color: var(--txt-dim); display: flex; align-items: center; gap: 8px;
  list-style: none; user-select: none;
}
.tips > summary::-webkit-details-marker { display: none; }
.tips > summary::after { content: "▾"; margin-left: auto; opacity: .5; transition: transform .15s; }
.tips[open] > summary::after { transform: rotate(180deg); }
.tips > summary:hover { color: var(--txt); }
.tips-n {
  background: var(--line); color: var(--txt-dim); border-radius: 20px;
  font-size: 10.5px; padding: 1px 7px; font-weight: 700;
}
.tips-body { padding: 0 15px 13px; display: flex; flex-direction: column; gap: 9px; }
.tip { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tip-txt { font-size: 13px; color: var(--txt-dim); line-height: 1.5; }
.tip-say {
  background: transparent; border: 1px dashed var(--line-2, var(--line));
  color: var(--accent-2); border-radius: 7px; padding: 3px 9px;
  font-size: 12px; cursor: pointer; font-family: inherit; text-align: left;
}
.tip-say:hover { background: rgba(47, 212, 143, .09); border-style: solid; }

/* ===== Minhas regras ===== */
.rule {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 15px; margin-bottom: 11px;
}
.rule.off { opacity: .5; }
.rule-head { display: flex; align-items: center; gap: 10px; }
.rule-kind { font-size: 15px; flex-shrink: 0; }
.rule-text { font-size: 14px; color: var(--txt); flex: 1; }
.rule-tag {
  font-size: 10px; text-transform: uppercase; letter-spacing: .7px;
  color: var(--txt-dim); flex-shrink: 0;
}
.rule-toggle, .rule-del {
  background: transparent; border: 1px solid var(--line); color: var(--txt-dim);
  border-radius: 6px; padding: 3px 9px; font-size: 11px; cursor: pointer; font-family: inherit;
}
.rule-toggle:hover, .rule-del:hover { color: var(--txt); border-color: var(--accent); }
.rule-del:hover { color: var(--danger); border-color: var(--danger); }
.rule-hits { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.rule-hits.none { font-size: 12px; color: var(--txt-dim); }
.rule-hits-head {
  font-size: 10px; text-transform: uppercase; letter-spacing: .8px;
  color: var(--txt-dim); margin-bottom: 7px;
}
.rule-hit { font-size: 13px; color: var(--txt-dim); padding: 3px 0 3px 14px; position: relative; }
.rule-hit::before { content: "▸"; position: absolute; left: 0; color: var(--accent); }
.rule-hit b { color: var(--txt); font-weight: 700; }

/* ===== Tempo no estágio e campos próprios no card ===== */
.kc-age {
  font-size: 10.5px; color: var(--txt-dim); background: transparent;
  border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; white-space: nowrap;
}
.kc-age.stuck { color: var(--yellow); border-color: var(--yellow); }
.kc-extra { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.kc-xf {
  font-size: 10.5px; color: var(--txt-dim); background: rgba(255,255,255,.03);
  border-radius: 5px; padding: 2px 6px; cursor: text;
}
.kc-xf em { font-style: normal; opacity: .65; margin-right: 4px; }
th.th-custom { color: var(--accent-2); }

/* ===== Abas reordenáveis ===== */
#nav button[data-view] { touch-action: none; }
#nav button.nav-dragging {
  opacity: .55; background: var(--bg-2);
  outline: 1px dashed var(--accent); outline-offset: -2px;
}

/* ===== Lembretes editáveis no lugar ===== */
.rem-text .inline, .rem-about.inline, .rem-when-edit { cursor: text; border-radius: 5px; }
.rem-text .inline:hover, .rem-about.inline:hover, .rem-when-edit:hover { background: rgba(255,255,255,.05); }
.rem-badge.ghosted { opacity: .3; }
.rem-badge.ghosted:hover { opacity: .8; }
.rem-when-edit .inline-input, .rem-about .inline-input { font-size: 12px; }

/* Bloco de qualificação no modal: separa as perguntas dele dos campos fixos */
.quali-head { margin-top: 6px; border-top: 1px solid var(--line); padding-top: 14px; }
.quali-head label { color: var(--accent-2); font-weight: 600; }

/* ===== Aba Contas: a relação, não a previsão ===== */
/* O silêncio é o alarme. Vermelho aqui não é sobre o tamanho da conta. */
.touch { font-size: 12px; font-variant-numeric: tabular-nums; }
.touch.ok   { color: var(--txt-dim); }
.touch.warn { color: var(--yellow); }
.touch.bad  { color: var(--danger); font-weight: 600; }
.touch.none { color: var(--danger); opacity: .75; font-style: italic; }
td.col-clock { white-space: nowrap; }

.hz { font-size: 11.5px; color: var(--txt-dim); white-space: nowrap; }
.hz.warn { color: var(--yellow); }
.hz.bad  { color: var(--danger); }
.hz.none { opacity: .4; }

.acc-note { font-size: 12px; color: var(--txt-dim); }
.acc-note em {
  font-style: normal; opacity: .5; margin-left: 5px;
  background: var(--line); border-radius: 10px; padding: 0 5px; font-size: 10px;
}

.tgl-num { font-size: 12px; padding: 7px 11px; white-space: nowrap; }
.tgl-num.on { color: var(--accent-2); border-color: var(--accent); }

/* ===== Abas do próprio vendedor ===== */
.view-rule {
  font-size: 11.5px; color: var(--txt-dim); margin-bottom: 14px;
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
}
.view-rule code {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 5px; padding: 2px 7px; font-size: 11px; color: var(--txt);
}

/* ===== Assinatura ===== */
.bill-hero {
  background: var(--bg-2); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 10px; padding: 18px 20px; margin-bottom: 16px;
}
.bill-hero.expired { border-left-color: var(--danger); }
.bill-hero.grace   { border-left-color: var(--yellow); }
.bill-state { font-size: 20px; font-weight: 700; color: var(--txt); }
.bill-detail { font-size: 13px; color: var(--txt-dim); margin-top: 5px; }
.bill-mail { font-size: 12px; color: var(--txt-dim); margin-top: 8px; opacity: .7; }
.bill-sandbox {
  font-size: 12px; color: var(--yellow); border: 1px dashed var(--yellow);
  border-radius: 7px; padding: 7px 11px; margin: 10px 0;
}
.bill-code {
  background: var(--bg); border: 1px solid var(--line); border-radius: 7px;
  padding: 10px 12px; font-size: 12px; color: var(--txt-dim);
  overflow-x: auto; cursor: pointer; margin: 0;
}
.bill-code:hover { color: var(--txt); border-color: var(--accent); }

/* Aviso de IA pausada, presente em qualquer seção */
.ai-locked {
  background: var(--bg-2); border: 1px solid var(--danger); border-radius: 9px;
  padding: 11px 14px; margin-bottom: 14px; display: flex; align-items: center;
  gap: 12px; font-size: 13px; color: var(--txt-dim); flex-wrap: wrap;
}
.ai-locked b { color: var(--txt); }
.ai-locked button { margin-left: auto; font-size: 12px; padding: 6px 11px; }
.cfg-list { margin-top: 11px; display: flex; flex-direction: column; gap: 4px; }
.cfg-row { font-size: 12px; font-family: ui-monospace, monospace; }
.cfg-row.ok { color: var(--accent-2); }
.cfg-row.no { color: var(--danger); opacity: .8; }

/* ===== Notificações ===== */
.notif-hero {
  background: var(--bg-2); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 10px; padding: 16px 19px; margin-bottom: 16px;
}
.notif-hero.off { border-left-color: var(--yellow); }
.nh-state { font-size: 17px; font-weight: 700; color: var(--txt); }
.nh-detail { font-size: 13px; color: var(--txt-dim); margin-top: 4px; }
.nh-nums { display: flex; gap: 18px; margin-top: 11px; font-size: 12.5px; color: var(--txt-dim); flex-wrap: wrap; }
.nh-nums b { color: var(--txt); }
.nh-nums .bad b { color: var(--danger); }
.nh-fail {
  margin-top: 10px; font-size: 12px; color: var(--danger);
  border-top: 1px solid var(--line); padding-top: 9px;
}

/* Volume por dia: se parou de sair, salta aos olhos */
.spark { display: flex; align-items: flex-end; gap: 6px; height: 70px; margin-bottom: 16px; }
.spark-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 4px; }
.spark-bar {
  width: 100%; min-height: 2px; border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
}
.spark-col span { font-size: 10px; color: var(--txt-dim); }
.kind-bars .v em { font-style: normal; }
.kind-bars .v em.bad { color: var(--danger); }

/* O registro completo */
.mail-log { display: flex; flex-direction: column; gap: 1px; }
.ml-row {
  display: grid; grid-template-columns: 22px 110px 1fr 150px 150px;
  gap: 10px; align-items: center; padding: 7px 4px;
  font-size: 12px; color: var(--txt-dim); border-bottom: 1px solid var(--line);
}
.ml-row:last-child { border-bottom: none; }
.ml-icon { text-align: center; }
.ml-when { font-variant-numeric: tabular-nums; }
.ml-subject { color: var(--txt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-to, .ml-status { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-row.sent .ml-status { color: var(--accent-2); }
.ml-row.failed .ml-status { color: var(--danger); }
.ml-row.failed { background: rgba(229, 72, 77, .05); }
.sub-hint { margin: -4px 0 12px 26px; font-size: 12px; opacity: .8; }
@media (max-width: 900px) {
  .ml-row { grid-template-columns: 22px 1fr; }
  .ml-when, .ml-to { display: none; }
}

/* ===== Passo a passo guiado ===== */
.steps-num { counter-reset: st; list-style: none; padding: 0; margin: 14px 0 18px; }
.steps-num li {
  counter-increment: st; position: relative; padding: 0 0 15px 38px; margin: 0;
  border-left: 1px solid var(--line); margin-left: 12px;
}
.steps-num li:last-child { border-left-color: transparent; padding-bottom: 4px; }
.steps-num li::before {
  content: counter(st); position: absolute; left: -12px; top: -2px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--bg-2); border: 1px solid var(--accent); color: var(--accent-2);
  font-size: 11.5px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.steps-num b { display: block; color: var(--txt); font-size: 13.5px; margin-bottom: 2px; }
.steps-num span { display: block; color: var(--txt-dim); font-size: 12.5px; }
.steps-num a { display: inline-block; margin-top: 5px; font-size: 12px; color: var(--accent-2); text-decoration: none; }
.steps-num a:hover { text-decoration: underline; }

/* ===== Transparência da telemetria ===== */
.tel-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 12px; }
.tel-head {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .7px;
  margin-bottom: 7px; padding-bottom: 5px; border-bottom: 1px solid var(--line);
}
.tel-head.ok { color: var(--accent-2); }
.tel-head.no { color: var(--danger); }
.tel-item { font-size: 12.5px; color: var(--txt-dim); padding: 3px 0; }
@media (max-width: 700px) { .tel-cols { grid-template-columns: 1fr; } }

/* ===== Alertas: estado, não controle. Ligar e desligar é falar com a Gabi. */
.alert-row {
  display: grid; grid-template-columns: 18px 1fr auto; gap: 11px;
  align-items: start; padding: 11px 0; border-bottom: 1px solid var(--line);
}
.alert-row:last-child { border-bottom: none; }
.alert-dot { font-size: 12px; line-height: 1.6; }
.alert-row.on .alert-dot { color: var(--accent-2); }
.alert-row.off .alert-dot { color: var(--txt-dim); opacity: .5; }
.alert-name { font-size: 13.5px; color: var(--txt); }
.alert-row.off .alert-name { color: var(--txt-dim); }
.alert-hint { font-size: 12px; color: var(--txt-dim); margin-top: 2px; }
.alert-state {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .7px;
  color: var(--txt-dim); padding-top: 3px;
}
.alert-row.on .alert-state { color: var(--accent-2); }

/* ===== Planos ===== */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 14px; margin-bottom: 18px; }
.plan {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 11px;
  padding: 20px 18px; display: flex; flex-direction: column; position: relative;
}
.plan.best { border-color: var(--accent); }
.plan-tag {
  position: absolute; top: -9px; left: 18px; background: var(--accent);
  color: #06210f; font-size: 10px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; padding: 3px 9px; border-radius: 20px;
}
.plan-name { font-size: 13px; color: var(--txt-dim); text-transform: uppercase; letter-spacing: .7px; }
.plan-price { margin: 9px 0 4px; }
.plan-price b { font-size: 31px; color: var(--txt); }
.plan-price span { font-size: 13px; color: var(--txt-dim); }
.plan-blurb { font-size: 12.5px; color: var(--txt-dim); margin-bottom: 13px; }
.plan-feats { list-style: none; padding: 0; margin: 0 0 17px; flex: 1; }
.plan-feats li { font-size: 12.5px; color: var(--txt-dim); padding: 4px 0 4px 17px; position: relative; }
.plan-feats li::before { content: "✓"; position: absolute; left: 0; color: var(--accent-2); }
.plan-btn { width: 100%; }
.plan-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ===== Prévia de uma seção que ainda não existe ===== */
/* Mesmo tom apagado da lista "appears as you go": fica óbvio que é exemplo. */
.nav-soon-item.peek { cursor: pointer; border-radius: 6px; padding: 4px 6px; margin-left: -6px; }
.nav-soon-item.peek:hover { background: rgba(255,255,255,.04); color: var(--txt); }
.nav-soon-item.peek:hover em { opacity: .9; }
.nav-soon-item.peek.active { background: rgba(47,212,143,.08); color: var(--accent-2); }

.preview-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--bg-2); border: 1px dashed var(--line);
  border-radius: 10px; padding: 13px 17px; margin-bottom: 18px;
}
.pv-icon { font-size: 20px; opacity: .6; }
.pv-title { font-size: 14px; color: var(--txt); }
.pv-sub { font-size: 12.5px; color: var(--txt-dim); }
.preview-bar button { margin-left: auto; }

.preview-body {
  opacity: .38; filter: saturate(.5);
  pointer-events: none; user-select: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
  max-height: 78vh; overflow: hidden;
}

/* ===== Conta ===== */
.acct {
  display: flex; align-items: flex-start; gap: 13px;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 15px 17px; margin-bottom: 14px;
}
.acct.in { border-left: 3px solid var(--accent); align-items: center; }
.acct.out, .acct.pending { border-left: 3px solid var(--yellow); }
.acct-dot { font-size: 15px; line-height: 1.5; }
.acct.in .acct-dot { color: var(--accent-2); }
.acct.out .acct-dot, .acct.pending .acct-dot { color: var(--yellow); }
.acct-grow { flex: 1; }
.acct-mail { font-size: 14px; color: var(--txt); }
.acct-sub { font-size: 12.5px; color: var(--txt-dim); margin-top: 2px; }
.acct-row { display: flex; gap: 7px; margin-top: 11px; flex-wrap: wrap; }
.acct-row input {
  flex: 1; min-width: 170px; background: var(--bg); color: var(--txt);
  border: 1px solid var(--line); border-radius: 7px; padding: 8px 11px;
  font-family: inherit; font-size: 13px;
}
.acct-row input:focus { outline: none; border-color: var(--accent); }
#acct-code { letter-spacing: 6px; font-family: ui-monospace, monospace; text-align: center; max-width: 150px; flex: 0 0 auto; }
.acct.in button { margin-left: auto; }

/* ===== Botões de imagem ===== */
.shot { display: inline-flex; gap: 6px; }
.shot-btn { font-size: 12px; padding: 7px 11px; white-space: nowrap; }
.shot-btn:hover { color: var(--accent-2); border-color: var(--accent); }

/* A leitura recolhe: quem quer ver só o quadro fecha uma vez e pronto. */
.read { position: relative; padding-left: 34px; }
.read-toggle {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  background: transparent; border: none; color: var(--txt-dim);
  cursor: pointer; font-size: 12px; padding: 4px; line-height: 1;
}
.read-toggle:hover { color: var(--accent-2); }
.read.closed {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 34px;
}
.read.closed .read-head { margin: 0; }
.read-count {
  background: var(--line); color: var(--txt-dim); border-radius: 20px;
  font-size: 10.5px; padding: 1px 7px; font-weight: 700;
}

/* ===== Tela de entrada =====
   Ocupa tudo e esconde o app: sem sessão não há nada por trás para espiar. */
body.signed-out .sidebar,
body.signed-out .content { display: none; }
#signin {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); padding: 24px; overflow-y: auto;
}
.si-box { width: 100%; max-width: 380px; }
.si-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 38px; }
.si-brand b { display: block; font-size: 19px; letter-spacing: 1.5px; }
.si-brand small { display: block; font-size: 12px; color: var(--txt-dim); }
.si-box h2 { font-size: 25px; line-height: 1.2; letter-spacing: -.5px; margin-bottom: 9px; }
.si-box > .si-box, .si-box p { color: var(--txt-dim); font-size: 14px; margin-bottom: 22px; }
#si-form { display: flex; flex-direction: column; gap: 10px; }
#si-form input {
  background: var(--bg-2); color: var(--txt); border: 1px solid var(--line);
  border-radius: 9px; padding: 13px 15px; font-size: 15px; font-family: inherit; width: 100%;
}
#si-form input:focus { outline: none; border-color: var(--accent); }
#si-code { letter-spacing: 10px; text-align: center; font-family: ui-monospace, monospace; font-size: 21px; }
#si-form button { padding: 13px; font-size: 15px; }
.si-back {
  background: none; border: none; color: var(--txt-dim); font-family: inherit;
  font-size: 13px; cursor: pointer; margin-top: 15px; padding: 0; text-decoration: underline;
}
.si-back:hover { color: var(--accent-2); }
.si-erro {
  margin-top: 15px; font-size: 13px; color: var(--danger);
  border: 1px solid var(--danger); border-radius: 8px; padding: 10px 13px;
}
.si-dev {
  margin-top: 15px; font-size: 12.5px; color: var(--yellow);
  border: 1px dashed var(--yellow); border-radius: 8px; padding: 10px 13px;
}
.si-dev b { font-family: ui-monospace, monospace; font-size: 15px; letter-spacing: 2px; }
.si-foot { margin-top: 30px; font-size: 12.5px; color: var(--txt-dim); opacity: .75; }

/* Quem está na sessão, no rodapé da barra */
.sidebar-footer { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.who-mail {
  font-size: 11.5px; color: var(--txt-dim); margin-bottom: 7px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.who-out { width: 100%; font-size: 12px; padding: 7px; }

/* ---- Layout que o vendedor arruma: colunas e blocos do Overview ---------- */
/* Um painel só para as duas coisas — marcar o que aparece; a ordem se muda
   arrastando, que é mais direto do que qualquer lista de setinhas. */
.cols-panel {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 12px;
}
.cols-head { color: var(--txt-dim); font-size: 12px; margin-bottom: 9px; }
.cols-list { display: flex; flex-wrap: wrap; gap: 6px; }
.cols-item {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 20px; padding: 4px 11px;
  font-size: 12px; color: var(--txt-dim); user-select: none; transition: .15s;
}
.cols-item:hover { border-color: var(--accent); }
.cols-item.on { color: var(--accent-2); border-color: rgba(14,159,110,.42); background: rgba(14,159,110,.08); }
.cols-item input { accent-color: var(--accent-2); margin: 0; }
.cols-reset { margin-top: 10px; font-size: 11.5px; }

/* Arrastar cabeçalho de coluna */
thead th[data-col] { cursor: grab; }
thead th.th-arrastando { opacity: .45; background: rgba(14,159,110,.10); }

/* Arrastar bloco do Overview — só pela alça, que só existe no modo arrumar */
.dash-bloco { position: relative; }
.bloco-alca {
  display: flex; align-items: center; gap: 7px; cursor: grab;
  background: rgba(14,159,110,.08); border: 1px dashed rgba(14,159,110,.35);
  color: var(--accent-2); border-radius: 8px; padding: 5px 11px;
  font-size: 11.5px; margin-bottom: 7px; user-select: none;
}
.bloco-alca:active { cursor: grabbing; }
.dash-bloco.bloco-arrastando { opacity: .45; }

/* Faixa do recorte fixo de uma seção nativa */
.recorte {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: rgba(74,163,255,.08); border: 1px solid rgba(74,163,255,.30);
  border-radius: 9px; padding: 8px 12px; margin-bottom: 12px; font-size: 12.5px;
}
.recorte-tag { color: #4aa3ff; font-weight: 600; flex-shrink: 0; }
.recorte-txt { color: var(--txt); font-family: ui-monospace, monospace; font-size: 11.5px; }
.recorte-n { color: var(--txt-dim); margin-left: auto; font-variant-numeric: tabular-nums; }

/* Trocar a senha, dentro de Settings */
.pw-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pw-form input {
  background: var(--bg); color: var(--txt); border: 1px solid var(--line);
  border-radius: 8px; padding: 10px 12px; font: inherit; font-size: 14px;
  flex: 1 1 170px; min-width: 0;
}
.pw-form input:focus { outline: none; border-color: var(--accent); }
.pw-form button { flex-shrink: 0; padding: 10px 18px; }
.pw-msg { margin-top: 10px; font-size: 13px; min-height: 18px; }
.pw-msg.ok { color: var(--accent-2); }
.pw-msg.err { color: var(--bad, #e5484d); }

/* Os dois links abaixo do formulário de entrada, lado a lado */
.si-links { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.si-links .si-back { margin-top: 15px; }

/* Blocos da conta dentro de Settings */
.acc-block { padding: 16px 0; border-top: 1px solid var(--line); }
.acc-block:first-of-type { border-top: none; padding-top: 8px; }
.acc-lbl {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--txt-dim); margin-bottom: 8px;
}

/* Settings no rodapé da barra, junto de quem está logado */
.who-settings {
  display: flex; align-items: center; gap: 9px; width: 100%;
  background: none; border: none; color: var(--txt-dim);
  font: inherit; font-size: 13.5px; text-align: left; cursor: pointer;
  padding: 8px 10px; border-radius: 8px; margin-bottom: 10px; transition: .15s;
}
.who-settings:hover { background: var(--bg-2); color: var(--txt); }
.who-settings.active { background: var(--bg-2); color: var(--accent-2); }