:root {
  /* Tema "Verde Artesanal" — Torrando Café */
  --bg: #14201a;
  --bg-soft: #1a2c23;
  --card: #1e3329;
  --card-2: #294a3a;
  --accent: #d9a441;
  --accent-strong: #f0c25e;
  --danger: #d9533f;
  --text: #ede6d8;
  --text-dim: #9fb3a3;
  --ok: #8bbf6a;
  --radius: 16px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior: none;
}

body {
  /* respeita notch / safe areas em modo fullscreen */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ---------- Telas ---------- */
.screen {
  display: none;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 20px 18px 28px;
  max-width: 560px;
  margin: 0 auto;
}
.screen.active { display: flex; }

.app-header { text-align: center; margin-bottom: 14px; }
.app-header h1 { font-size: 1.5rem; margin: 0 0 4px; }
.subtitle { color: var(--text-dim); margin: 0; font-size: .95rem; }

/* Marca Torrando Café */
.app-header.brand { margin-bottom: 22px; }
.app-header.brand h1 {
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: .5px;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--card-2);
  border: 2px solid var(--accent);
  font-size: 1.2rem;
}
.brand-kicker {
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: .7rem;
  color: var(--accent);
  font-weight: 700;
  margin: 0 0 2px;
}

/* ---------- Setup ---------- */
.setup-body { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.field-label { font-weight: 700; margin-top: 16px; font-size: 1rem; }
.hint { color: var(--text-dim); font-size: .82rem; margin: 0 0 4px; }

/* Inputs de texto (ficha técnica, peso) */
.text-input {
  width: 100%;
  padding: 13px 14px;
  font-size: 1rem;
  background: var(--bg-soft);
  border: 2px solid var(--card-2);
  border-radius: 12px;
  color: var(--text);
  margin: 4px 0;
}
.text-input:focus { outline: none; border-color: var(--accent); }
.text-input::placeholder { color: var(--text-dim); }
.field-pair { display: flex; gap: 10px; }
.field-pair .text-input { flex: 1; }

.interval-options { display: flex; gap: 10px; margin: 6px 0; }
.chip {
  flex: 1;
  padding: 14px;
  border: 2px solid var(--card-2);
  background: var(--card);
  color: var(--text);
  border-radius: var(--radius);
  font-size: 1.1rem;
  font-weight: 700;
}
.chip.active { border-color: var(--accent); background: var(--card-2); color: var(--accent-strong); }

/* ---------- Inputs grandes ---------- */
.big-input {
  width: 100%;
  padding: 18px;
  font-size: 2.2rem;
  text-align: center;
  font-weight: 800;
  letter-spacing: 1px;
  background: var(--bg-soft);
  border: 2px solid var(--card-2);
  border-radius: var(--radius);
  color: var(--text);
  margin: 6px 0;
}
.big-input:focus { outline: none; border-color: var(--accent); }
.big-input::placeholder { color: var(--text-dim); font-weight: 600; }

/* ---------- Botões ---------- */
.primary-btn, .danger-btn, .ghost-btn {
  width: 100%;
  padding: 18px;
  border: none;
  border-radius: var(--radius);
  font-size: 1.15rem;
  font-weight: 800;
  margin-top: 10px;
}
.primary-btn { background: var(--accent); color: #2a1404; }
.primary-btn:active { background: var(--accent-strong); }
.danger-btn { background: var(--danger); color: #fff; }
.ghost-btn { background: transparent; color: var(--text-dim); border: 2px solid var(--card-2); }

/* ---------- Tela torra ---------- */
.roast-top {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}
.timer-block, .countdown-block {
  flex: 1;
  background: var(--card);
  border-radius: var(--radius);
  padding: 14px;
  text-align: center;
}
.timer-label { display: block; color: var(--text-dim); font-size: .8rem; text-transform: uppercase; letter-spacing: 1px; }
.timer-value { font-size: 2.6rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.countdown-value { font-size: 2.6rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--accent-strong); }
.countdown-block.due { animation: pulse 1s infinite; }
.countdown-block.due .countdown-value { color: #fff; }
@keyframes pulse {
  0%,100% { background: var(--card); }
  50% { background: var(--accent); }
}

.stat-row { display: flex; gap: 12px; margin-bottom: 10px; }
.stat-box {
  flex: 1;
  text-align: center;
  background: var(--bg-soft);
  border-radius: var(--radius);
  padding: 10px 8px;
  border: 2px solid transparent;
}
.stat-value { display: block; font-weight: 800; font-size: 1.8rem; font-variant-numeric: tabular-nums; }
.stat-sub { display: block; color: var(--text-dim); font-size: .72rem; margin-top: 2px; }

/* RoR (Δ por minuto) — faixa alvo 7–11 °C */
#rorBox.ror-ok { border-color: var(--ok); }
#rorBox.ror-ok .stat-value { color: var(--ok); }
#rorBox.ror-bad { border-color: var(--accent); }
#rorBox.ror-bad .stat-value { color: var(--accent-strong); }
#rorBox.ror-strict { border-color: var(--danger); animation: pulse-bad 1s infinite; }
#rorBox.ror-strict .stat-value { color: #ff7d6e; }
@keyframes pulse-bad {
  0%,100% { background: var(--bg-soft); }
  50% { background: rgba(192,57,43,.35); }
}

/* Botão de evento (cicla desidratação → caramelização → pop) */
.event-btn {
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: var(--radius);
  font-size: 1.05rem;
  font-weight: 800;
  margin-top: 10px;
  color: #2a1404;
}

.input-area {
  background: var(--card);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 12px;
}
.input-prompt { text-align: center; color: var(--text-dim); font-size: .9rem; margin-bottom: 4px; min-height: 1.1em; }
.input-area.due { box-shadow: 0 0 0 3px var(--accent); }
.input-area.due .input-prompt { color: var(--accent-strong); font-weight: 700; }

/* Dica de atalhos — só faz sentido com teclado físico (esconde em touch) */
.shortcut-hint { text-align: center; color: var(--text-dim); font-size: .78rem; margin: 8px 0 0; }
.shortcut-hint kbd {
  background: var(--bg-soft);
  border: 1px solid var(--card-2);
  border-radius: 5px;
  padding: 1px 6px;
  font-family: inherit;
  font-weight: 700;
  color: var(--text);
}
@media (hover: none) and (pointer: coarse) {
  .shortcut-hint { display: none; }
}

/* Controles de estado: Chama e Airflow (segmented) */
.control-group { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.control-label { width: 92px; flex-shrink: 0; font-weight: 700; font-size: .9rem; }
.segmented { display: flex; flex: 1; gap: 6px; }
.segmented button {
  flex: 1;
  padding: 12px 4px;
  border: 2px solid var(--card-2);
  background: var(--card);
  color: var(--text-dim);
  border-radius: 12px;
  font-weight: 700;
  font-size: .92rem;
}
.seg-flame button.active { border-color: #e0573f; background: var(--card-2); color: #ff8b73; }
.seg-air button.active   { border-color: #4fb3d9; background: var(--card-2); color: #7fd0ec; }

.readings-log {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-content: flex-start;
  margin-bottom: 12px;
}
.reading-pill {
  background: var(--bg-soft);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
}
.reading-pill .t { color: var(--text-dim); }
.reading-pill .v { font-weight: 800; margin-left: 5px; }
.reading-pill.charge { background: var(--card-2); border: 1px solid var(--accent); }
.reading-pill.event { border: 1px solid currentColor; font-weight: 700; }
.reading-pill.event .t { color: inherit; opacity: .85; }
.reading-pill.action { border: 1px dashed currentColor; font-weight: 700; }
.reading-pill.action .t { color: inherit; opacity: .85; }

.roast-actions { margin-top: auto; }

/* ---------- Resultado ---------- */
.chart-wrap {
  background: var(--card);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 14px;
}
#chart { width: 100%; height: 280px; display: block; }

.result-events { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.event-chip {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 2px solid currentColor;
  font-weight: 700; font-size: .85rem;
  font-variant-numeric: tabular-nums;
}
.event-chip .dot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; }

/* Peso de saída e quebra */
.weight-box {
  display: flex; gap: 12px; align-items: stretch;
  margin-bottom: 14px;
}
.weight-field { flex: 1; }
.weight-field label { display: block; color: var(--text-dim); font-size: .82rem; margin-bottom: 2px; }
.weight-field .text-input { margin: 0; }
.weight-result {
  flex: 0 0 38%;
  background: var(--bg-soft);
  border-radius: 12px;
  padding: 8px 12px;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.weight-label { color: var(--text-dim); font-size: .78rem; text-transform: uppercase; letter-spacing: 1px; }
.weight-value { font-weight: 800; font-size: 1.6rem; font-variant-numeric: tabular-nums; color: var(--accent-strong); }

/* Ficha técnica no resultado */
.result-ficha { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.ficha-chip {
  background: var(--bg-soft);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: .82rem;
}
.ficha-chip b { color: var(--text-dim); font-weight: 600; margin-right: 4px; }

.table-head-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.section-title { font-size: 1rem; margin: 0; }
.link-btn { background: none; border: none; color: var(--accent); font-weight: 700; font-size: .9rem; }

.result-table { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.result-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding: 8px 12px; background: var(--bg-soft); border-radius: 8px; font-variant-numeric: tabular-nums; }
.result-row .label { color: var(--text-dim); }
.result-row .col-c { text-align: right; }
.result-row.head { background: var(--card-2); font-weight: 700; }
.result-row .ror-good { color: var(--ok); }
.result-row .ror-warn { color: #ff7d6e; }
/* Edição de leituras */
.result-row .edit-input {
  width: 100%;
  padding: 6px 8px;
  background: var(--card);
  border: 1px solid var(--card-2);
  border-radius: 6px;
  color: var(--text);
  font-size: .9rem;
  font-variant-numeric: tabular-nums;
}
.result-row .edit-input:focus { outline: none; border-color: var(--accent); }

/* ---------- Histórico ---------- */
.history-list { flex: 1; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.history-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 14px;
}
.history-card .date { font-weight: 700; }
.history-card .meta { color: var(--text-dim); font-size: .85rem; margin-top: 4px; }
.history-card .del { float: right; color: var(--danger); background: none; border: none; font-size: 1.1rem; }
.empty { color: var(--text-dim); text-align: center; margin-top: 40px; }