:root {
  --rosa: #DA9990;
  --rosa-escuro: #AF7269;
  --rosa-claro: #F6E3DF;
  --bg: #FBF7F5;
  --card: #FFFFFF;
  --texto: #3A2F2E;
  --texto-2: #7A6663;
  --linha: #EBDDD9;
  --ok: #4C8C5C;
  --erro: #B4413C;
  --aviso: #B7842E;
  --raio: 16px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--texto); font-family: Poppins, -apple-system, system-ui, sans-serif; font-size: 16px; -webkit-font-smoothing: antialiased; }
body { min-height: 100vh; overscroll-behavior-y: none; }
#app { max-width: 520px; margin: 0 auto; padding: calc(var(--safe-top) + 12px) 16px calc(var(--safe-bottom) + 24px); }
h1 { font-size: 22px; font-weight: 600; margin: 8px 0 4px; }
h2 { font-size: 17px; font-weight: 600; margin: 20px 0 8px; color: var(--rosa-escuro); }
p { line-height: 1.5; margin: 6px 0; }
.sub { color: var(--texto-2); font-size: 14px; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.top .voltar { background: none; border: 0; color: var(--rosa-escuro); font: inherit; font-weight: 500; padding: 8px 0; text-decoration: none; }
.card { background: var(--card); border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px 16px; margin: 10px 0; }
.card.tap { cursor: pointer; }
.card.tap:active { background: var(--rosa-claro); }
.lista .card { color: inherit; text-decoration: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.lista .nome { font-weight: 500; }
.lista .meta { font-size: 13px; color: var(--texto-2); }
.lista .card > div:first-child { flex: 1; min-width: 0; }
.excluir-card { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--linha); background: #fff; color: var(--texto-2); display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
.excluir-card:active { background: #F7E0DF; color: var(--erro); }
.badge { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--rosa-claro); color: var(--rosa-escuro); white-space: nowrap; }
.badge.pronto { background: #E3F0E6; color: var(--ok); }
.badge.erro { background: #F7E0DF; color: var(--erro); }
.badge.gravando { background: #F7E0DF; color: var(--erro); }
.btn { display: block; text-align: center; text-decoration: none; box-sizing: border-box; width: 100%; border: 0; border-radius: 14px; padding: 15px 18px; font: inherit; font-size: 16px; font-weight: 600; background: var(--rosa-escuro); color: #fff; margin: 10px 0; cursor: pointer; }
.btn:active { opacity: .85; }
.btn.sec { background: var(--rosa-claro); color: var(--rosa-escuro); }
.btn.ghost { background: transparent; color: var(--texto-2); border: 1px solid var(--linha); font-weight: 500; }
.btn.perigo { background: transparent; color: var(--erro); border: 1px solid #F0C9C7; font-weight: 500; }
.btn:disabled { opacity: .5; }
.btn.grande { padding: 20px; font-size: 18px; }
input[type=text], input[type=password], textarea { width: 100%; border: 1px solid var(--linha); border-radius: 12px; padding: 13px 14px; font: inherit; font-size: 16px; background: #fff; color: var(--texto); }
textarea { min-height: 120px; line-height: 1.5; }
label { display: block; font-size: 14px; color: var(--texto-2); margin: 12px 0 6px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; margin: 12px 0; }
.check input { width: 22px; height: 22px; margin-top: 1px; flex: none; accent-color: var(--rosa-escuro); }
.erro { color: var(--erro); font-size: 14px; }
.aviso { background: #FBF1DF; border: 1px solid #F0DDB5; color: #6E4E12; border-radius: 12px; padding: 10px 12px; font-size: 14px; margin: 10px 0; }
.ok { color: var(--ok); }

/* gravacao */
.rec { text-align: center; padding: 24px 0 8px; }
.rec .timer { font-size: 52px; font-weight: 600; letter-spacing: 1px; font-variant-numeric: tabular-nums; margin: 6px 0; }
.rec .estado { color: var(--texto-2); font-size: 14px; min-height: 20px; }
.nivel { height: 8px; background: var(--linha); border-radius: 999px; overflow: hidden; margin: 18px 30px; }
.nivel > div { height: 100%; width: 0; background: var(--rosa); transition: width .08s linear; }
.botao-rec { width: 96px; height: 96px; border-radius: 50%; border: 0; background: var(--erro); margin: 14px auto; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(180,65,60,.35); cursor: pointer; }
.botao-rec .quadrado { width: 30px; height: 30px; border-radius: 6px; background: #fff; }
.botao-rec.pausado { background: var(--rosa-escuro); box-shadow: 0 6px 20px rgba(175,114,105,.35); }
.botao-rec .tri { width: 0; height: 0; border-left: 28px solid #fff; border-top: 17px solid transparent; border-bottom: 17px solid transparent; margin-left: 6px; }
.pulso { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--erro); margin-right: 6px; animation: pulso 1.2s infinite; vertical-align: middle; }
@keyframes pulso { 0%,100% { opacity: 1 } 50% { opacity: .25 } }
.acoes-rec { display: flex; gap: 10px; }
.acoes-rec .btn { margin: 6px 0; }

/* detalhe */
.sec { margin: 14px 0; }
.sec .titulo { font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--rosa-escuro); font-weight: 600; margin-bottom: 4px; }
.sec .corpo { white-space: pre-wrap; line-height: 1.55; font-size: 15px; }
.sec ul { margin: 4px 0 0 18px; padding: 0; line-height: 1.55; font-size: 15px; }
.tabs { display: flex; gap: 6px; margin: 10px 0; }
.tabs button { flex: 1; border: 1px solid var(--linha); background: #fff; border-radius: 10px; padding: 9px; font: inherit; font-size: 14px; color: var(--texto-2); }
.tabs button.ativa { background: var(--rosa-escuro); color: #fff; border-color: var(--rosa-escuro); }
.transcricao { white-space: pre-wrap; font-size: 14px; line-height: 1.6; color: var(--texto); }
.alerta-lista { background: #FBF1DF; border-radius: 12px; padding: 10px 12px 10px 28px; margin: 8px 0; font-size: 14px; }
.spinner { width: 34px; height: 34px; border: 3px solid var(--linha); border-top-color: var(--rosa-escuro); border-radius: 50%; animation: gira .9s linear infinite; margin: 20px auto; }
@keyframes gira { to { transform: rotate(360deg) } }
.toast { position: fixed; left: 50%; bottom: calc(var(--safe-bottom) + 20px); transform: translateX(-50%); background: var(--texto); color: #fff; padding: 10px 16px; border-radius: 999px; font-size: 14px; opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 9; }
.toast.on { opacity: 1; }
.centro { text-align: center; }
.vazio { text-align: center; color: var(--texto-2); padding: 30px 10px; }
.rodape { text-align: center; font-size: 12px; color: var(--texto-2); margin-top: 30px; }
.rodape button { background: none; border: 0; color: var(--texto-2); font: inherit; font-size: 12px; text-decoration: underline; }

input[type=file] { width: 100%; border: 1px dashed var(--rosa); border-radius: 12px; padding: 14px; font: inherit; font-size: 15px; background: #fff; color: var(--texto); }
input[type=file]::file-selector-button { border: 0; border-radius: 999px; padding: 8px 14px; margin-right: 10px; background: var(--rosa-claro); color: var(--rosa-escuro); font: inherit; font-weight: 600; }