:root { 
  --ok:#12a150; --warn:#f2b705; --bad:#d94848; --bg:#0b1f36; --card:#102a45; --text:#f4f6fa; --gold:#d4af37;
  --pend:#6c5ce7; /* NOVO: roxo da pendência */
}
* { box-sizing:border-box; }
body { margin:0; font-family:system-ui, Segoe UI, Roboto, Arial; background:var(--bg); color:var(--text); }
.header { display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid #0e385f;}
.header h1 { margin:0; font-size:20px; letter-spacing:0.3px; }
.actions .btn, .actions button { background:#184a78; color:var(--text); border:0; padding:8px 12px; border-radius:10px; cursor:pointer; text-decoration:none; }
.present .header h1 { font-size:28px; }

/* GRID de tiles */
.grid.tiles { display:grid; grid-template-columns: repeat(3, minmax(260px,1fr)); gap:16px; padding:16px; }
.tile { background:var(--card); border-radius:16px; padding:14px 16px; text-decoration:none; color:var(--text); box-shadow: 0 6px 16px rgba(0,0,0,.15); border:1px solid rgba(255,255,255,0.05); transition:transform .15s ease, box-shadow .15s ease; }
.tile:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(0,0,0,.18); }
.tile-title { font-size:14px; color:var(--gold); margin-bottom:6px; }
.tile-value { font-size:28px; font-weight:700; }

/* Página de detalhe */
.detail { display:grid; grid-template-columns: 1.2fr 1fr; gap:16px; padding:16px; }
.panel { background:var(--card); border-radius:16px; padding:14px 16px; box-shadow: 0 6px 18px rgba(0,0,0,.15); border:1px solid rgba(255,255,255,0.06); }
.panel h3 { margin:0 0 10px 0; color:var(--gold); font-size:16px; }
.panel .hint { opacity:.8; font-size:12px; margin-top:8px; }
.kpi { display:flex; align-items:center; justify-content:space-between; }
.kpi-label { font-size:14px; opacity:.85; }
.kpi-value { font-size:40px; font-weight:800; }
.kpi-dual { display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.kpi-dual .kpi-value { font-size:36px; font-weight:800; }

/* Mini-chart (barras com variável CSS --v 0..100) */
.mini-chart { display:flex; gap:10px; align-items:flex-end; height:160px; padding:8px 4px; border:1px dashed rgba(255,255,255,0.08); border-radius:10px; }
.bar { display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; }
.bar-fill { width:20px; background:linear-gradient(180deg, #1dd1a1, #10ac84); border-radius:8px 8px 0 0; height: calc(var(--v, 0) * 1%); min-height: 2px; }
.bar-label { font-size:12px; opacity:.9; }

/* Form */
form { display:flex; flex-direction:column; gap:8px; }
input[type="text"], textarea { width:100%; background:#0d2239; color:var(--text); border:1px solid #0e385f; border-radius:10px; padding:10px 12px; }
.btn { background:#184a78; color:var(--text); border:0; padding:10px 14px; border-radius:10px; cursor:pointer; text-decoration:none; display:inline-block; }
.saved { margin-bottom:8px; color:#aef4c3; }

/* Modo apresentação */
.present .detail { grid-template-columns: 1fr; }
.present .kpi-value { font-size:56px; }

/* ================================
   Flash alerts – estilo padrão do app
   ================================ */
:root{
  /* ajuste para o “azul usado no app” se necessário */
  --brand-blue: #1e90ff;
}

/* base única para todos os tipos (success/error/info/warning) */
.flash{
  max-width: 1000px;
  margin: .85rem auto;
  padding: .9rem 1.1rem;
  border-radius: .75rem;
  background: #e9edf2;          /* cinza claro dos cards */
  border: 1px solid #cfd6df;     /* borda suave */
  color: var(--brand-blue);      /* texto azul do app */
  font-weight: 500;
  line-height: 1.35;
  box-shadow: 0 4px 18px rgba(0,0,0,.08);
}

/* mantém as classes existentes, mas todas herdam o mesmo visual */
.flash.success,
.flash.error,
.flash.info,
.flash.warning { color: var(--brand-blue); }

.flash a{ color: var(--brand-blue); text-decoration: underline; }

/* ADICIONADO: se você usar <span class="pill pend">Pendência</span> em alguma página */
.pill.pend{ background: var(--pend); color:#fff; } /* NOVO */

/* ADICIONADO: notas da página (Highlights/Decisões) */
.notes{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px}
.notes .col{display:flex;flex-direction:column}
.notes label{font-size:13px;color:#6b7c93;margin-bottom:6px}
.notes textarea{
  width:100%;min-height:160px;resize:vertical;
  border:1px solid #d9e2ef;border-radius:10px;padding:10px;background:#fff
}
.notes .status{font-size:12px;color:#6b7c93;margin-top:6px}