:root {
  --azul: #22305c;
  --azul-2: #2f4180;
  --azul-claro: #e8ecf6;
  --dourado: #d6a541;
  --dourado-escuro: #a97d22;
  --fundo: #f4f6fa;
  --cartao: #ffffff;
  --texto: #1d2333;
  --suave: #5d6578;
  --linha: #dfe3ec;
  --verde: #1f7a4d;
  --verde-claro: #e3f3ea;
  --vermelho: #b3261e;
  --vermelho-claro: #fbe9e7;
  --ambar-claro: #fdf3dc;
  --raio: 14px;
  --sombra: 0 1px 2px rgba(20, 30, 60, .06), 0 4px 16px rgba(20, 30, 60, .06);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--texto);
  background: var(--fundo);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); min-height: 100vh; -webkit-text-size-adjust: 100%; }
a { color: var(--azul-2); }
button, input, select { font: inherit; }

/* topo */
.topo { background: var(--azul); color: #fff; position: sticky; top: 0; z-index: 10; }
.topo-in { max-width: 920px; margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; gap: 14px; }
.topo img.logo { height: 34px; display: block; }
.topo .nome-app { font-weight: 600; letter-spacing: .02em; padding-left: 14px; border-left: 1px solid rgba(255,255,255,.25); font-size: 15px; }
.topo .espaco { flex: 1; }
.topo .usuario { display: flex; align-items: center; gap: 8px; font-size: 14px; opacity: .9; }
.topo .usuario img { width: 28px; height: 28px; border-radius: 50%; }
.topo button.sair { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.35); border-radius: 8px; padding: 5px 10px; cursor: pointer; font-size: 13px; }
.filete { height: 3px; background: var(--dourado); }

main { max-width: 920px; margin: 0 auto; padding: 20px 16px 80px; }
h1 { font-size: 24px; margin: 4px 0 16px; color: var(--azul); }
h2 { font-size: 17px; margin: 24px 0 10px; color: var(--azul); }
.suave { color: var(--suave); }
.pequeno { font-size: 13px; }

/* botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 10px; padding: 11px 18px; font-weight: 600; cursor: pointer; background: var(--azul); color: #fff; text-decoration: none; font-size: 15px; min-height: 44px; }
.btn:hover { background: var(--azul-2); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.secundario { background: var(--cartao); color: var(--azul); border: 1px solid var(--linha); }
.btn.secundario:hover { background: var(--azul-claro); }
.btn.perigo { background: var(--cartao); color: var(--vermelho); border: 1px solid #efc6c2; }
.btn.perigo:hover { background: var(--vermelho-claro); }
.btn.grande { padding: 14px 24px; font-size: 16px; }
.btn.gravar { background: var(--vermelho); }
.btn.gravar:hover { background: #962019; }
.btn svg { width: 18px; height: 18px; flex: none; }
.link { background: none; border: 0; color: var(--azul-2); cursor: pointer; padding: 0; text-decoration: underline; font-size: inherit; }

/* lista */
.barra { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.barra input[type=search] { flex: 1; min-width: 180px; }
input[type=text], input[type=search], input[type=email] { border: 1px solid var(--linha); border-radius: 10px; padding: 11px 13px; background: #fff; min-height: 44px; width: 100%; }
input:focus { outline: 2px solid var(--azul-2); outline-offset: 1px; }
.lista { display: grid; gap: 10px; }
.item { background: var(--cartao); border-radius: var(--raio); box-shadow: var(--sombra); padding: 14px 16px; display: flex; gap: 14px; align-items: center; cursor: pointer; text-decoration: none; color: inherit; border: 1px solid transparent; }
.item:hover { border-color: var(--azul-claro); }
.item .icone { width: 40px; height: 40px; border-radius: 10px; background: var(--azul-claro); color: var(--azul); display: grid; place-items: center; flex: none; }
.item .icone svg { width: 20px; height: 20px; }
.item .corpo { flex: 1; min-width: 0; }
.item .titulo { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item .meta { font-size: 13px; color: var(--suave); margin-top: 2px; }
.vazio { text-align: center; padding: 48px 16px; color: var(--suave); background: var(--cartao); border-radius: var(--raio); box-shadow: var(--sombra); }
.vazio img { width: 64px; opacity: .9; margin-bottom: 10px; }

.selo { font-size: 12px; font-weight: 600; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.selo.pronta { background: var(--verde-claro); color: var(--verde); }
.selo.fila { background: var(--azul-claro); color: var(--azul); }
.selo.processando { background: var(--ambar-claro); color: #7a5410; }
.selo.erro { background: var(--vermelho-claro); color: var(--vermelho); }
.selo.gravando { background: #f1f1f4; color: var(--suave); }

/* nova reunião */
.cartao { background: var(--cartao); border-radius: var(--raio); box-shadow: var(--sombra); padding: 20px; }
.modos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 14px 0 6px; }
.modo { border: 2px solid var(--linha); border-radius: var(--raio); padding: 16px; cursor: pointer; background: #fff; text-align: left; display: block; width: 100%; }
.modo:hover { border-color: #c4cbe0; }
.modo.ativo { border-color: var(--azul); background: #f7f9fd; }
.modo .mt { font-weight: 700; color: var(--azul); display: flex; align-items: center; gap: 8px; }
.modo .mt svg { width: 20px; height: 20px; }
.modo p { margin: 6px 0 0; font-size: 13px; color: var(--suave); line-height: 1.4; }
.modo.indisponivel { opacity: .5; cursor: not-allowed; }
.dica { background: var(--ambar-claro); border-radius: 10px; padding: 12px 14px; font-size: 14px; line-height: 1.45; margin: 14px 0; }
.dica b { color: #6a4a0c; }
.dica ol { margin: 6px 0 0; padding-left: 20px; }
.acoes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
label.rot { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }

/* gravação */
.gravacao { text-align: center; padding: 28px 20px; }
.relogio { font-size: 56px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--azul); letter-spacing: .02em; }
.estado { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 8px; color: var(--vermelho); }
.estado .ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--vermelho); animation: pulso 1.2s infinite; }
.estado.pausado { color: var(--suave); }
.estado.pausado .ponto { background: var(--suave); animation: none; }
@keyframes pulso { 50% { opacity: .25; } }
.nivel { height: 10px; background: var(--azul-claro); border-radius: 999px; overflow: hidden; max-width: 360px; margin: 18px auto 6px; }
.nivel > div { height: 100%; width: 0; background: linear-gradient(90deg, var(--verde), var(--dourado)); transition: width .08s linear; }
.envio { font-size: 14px; color: var(--suave); margin-top: 12px; }
.envio.alerta { color: var(--vermelho); font-weight: 600; }
.aviso-tela { font-size: 13px; color: var(--suave); margin-top: 18px; line-height: 1.5; }

/* barra de progresso */
.progresso { height: 8px; background: var(--azul-claro); border-radius: 999px; overflow: hidden; margin: 12px 0 6px; }
.progresso > div { height: 100%; background: var(--azul); width: 0; transition: width .4s; }

/* reunião */
.cab-reuniao { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.cab-reuniao h1 { margin-bottom: 4px; word-break: break-word; }
.voltar { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-size: 14px; color: var(--suave); margin-bottom: 8px; }
.downloads { display: flex; flex-wrap: wrap; gap: 8px; }
audio { width: 100%; margin: 6px 0 4px; }
.transcricao { background: var(--cartao); border-radius: var(--raio); box-shadow: var(--sombra); padding: 8px 20px; }
.par { display: grid; grid-template-columns: 64px 1fr; gap: 10px; padding: 12px 0; border-bottom: 1px solid #eef0f5; line-height: 1.6; }
.par:last-child { border-bottom: 0; }
.par .t { font-size: 12px; color: var(--dourado-escuro); font-variant-numeric: tabular-nums; padding-top: 4px; background: none; border: 0; text-align: left; cursor: pointer; font-weight: 600; align-self: start; padding-left: 0; }
.par .t:hover { text-decoration: underline; }
.par.tocando { background: #fbf6e8; margin: 0 -20px; padding-left: 20px; padding-right: 20px; }
mark { background: #fde8a7; border-radius: 3px; }
.busca-trans { margin: 0 0 10px; }
.compartilhar { display: flex; gap: 8px; flex-wrap: wrap; }
.compartilhar input { flex: 1; min-width: 200px; }
.pessoas { list-style: none; padding: 0; margin: 10px 0 0; }
.pessoas li { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #eef0f5; font-size: 14px; }
.zona-perigo { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--linha); }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--texto); color: #fff; padding: 12px 18px; border-radius: 10px; font-size: 14px; z-index: 50; box-shadow: var(--sombra); max-width: calc(100% - 32px); }
.toast.erro { background: var(--vermelho); }

@media (max-width: 600px) {
  .topo .nome-app, .topo .usuario span { display: none; }
  .topo img.logo { height: 28px; }
  h1 { font-size: 21px; }
  .relogio { font-size: 44px; }
  .par { grid-template-columns: 1fr; gap: 2px; }
  .item .selo { display: none; }
  .item .meta .selo-m { display: inline; }
}
.item .meta .selo-m { display: none; }

/* ata */
.ata { margin-top: 16px; line-height: 1.6; }
.ata h2 { font-size: 16px; margin: 20px 0 6px; }
.ata h2:first-child { margin-top: 4px; }
.ata h3 { font-size: 14.5px; margin: 12px 0 4px; color: var(--azul); }
.ata p { margin: 0 0 10px; }
.ata ul { margin: 0 0 10px; padding-left: 20px; }
.ata li { margin-bottom: 5px; }
textarea { width: 100%; border: 1px solid var(--linha); border-radius: 10px; padding: 11px 13px; font: inherit; line-height: 1.5; background: #fff; resize: vertical; }
textarea:focus { outline: 2px solid var(--azul-2); outline-offset: 1px; }
#ata-texto { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.progresso .indeterminado { width: 35%; animation: vaivem 1.4s ease-in-out infinite; }
@keyframes vaivem { 0% { margin-left: -35%; } 100% { margin-left: 100%; } }

/* destinatários */
.chips { display: flex; flex-wrap: wrap; gap: 6px; border: 1px solid var(--linha); border-radius: 10px; padding: 6px; background: #fff; min-height: 44px; cursor: text; }
.chips input { border: 0; flex: 1; min-width: 200px; padding: 6px; min-height: 30px; }
.chips input:focus { outline: none; }
.chip { display: inline-flex; align-items: center; gap: 4px; background: var(--azul-claro); color: var(--azul); border-radius: 999px; padding: 4px 6px 4px 12px; font-size: 14px; }
.chip button { border: 0; background: none; color: var(--azul); font-size: 17px; line-height: 1; cursor: pointer; padding: 0 4px; }
label.check { display: flex; gap: 8px; align-items: center; margin-top: 12px; font-size: 14px; cursor: pointer; }
label.check input { width: 18px; height: 18px; }