/**
 * Ajustes fortes de contraste e hierarquia do /phone.
 * Separa melhor fundo, cards, campos, abas e estados operacionais.
 * Mantem a arquitetura modular, mas deixa o painel mais legivel.
 */
:root {
  --bg: #eef2f7;
  --surface: #ffffff;
  --surface-soft: #f8fafc;
  --surface-strong: #f1f5f9;
  --line: #b8c4d4;
  --line-strong: #94a3b8;
  --text: #0f172a;
  --muted: #4b5563;
  --accent: #1d4ed8;
  --accent-strong: #1e40af;
  --shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
  --shadow-soft: 0 4px 14px rgba(15, 23, 42, 0.06);
}
body { background: linear-gradient(180deg, #f4f6fb 0%, #edf2f8 100%); color: var(--text); }
.wrap { max-width: 1280px; }
a, .mini-details summary, .hint a { color: var(--accent-strong); }
.header { margin-bottom: 1.2rem; }
.header h1 { color: var(--text); font-size: 1.55rem; font-weight: 800; }
.links a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 0.9rem;
  border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, 0.88);
  color: #334155; font-weight: 700;
}
.card, .mini-card, .result-box, .bubble, .audit-box, .structured-card, .code-block, .stack-item, .stack-empty {
  border-color: var(--line); box-shadow: var(--shadow-soft);
}
.card { background: var(--surface); box-shadow: var(--shadow); }
button, input, textarea, select, .ghost {
  border: 1.5px solid var(--line); background: var(--surface); color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
input, textarea, select { border-radius: 14px; }
button:not(.primary), .ghost { background: #fff; color: #1f2937; font-weight: 700; }
.primary {
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
  border-color: #1d4ed8; color: #fff; box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18);
}
button:hover, .ghost:hover, .panel-tab:hover, .chip-main:hover, .chip-remove:hover, .links a:hover {
  border-color: var(--line-strong); background: var(--surface-strong);
}
.primary:hover { background: linear-gradient(180deg, #1d4ed8 0%, #1e40af 100%); border-color: #1e40af; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible,
.ghost:focus-visible, .panel-tab:focus-visible, .chip-main:focus-visible, .chip-remove:focus-visible, .links a:focus-visible {
  outline: 3px solid rgba(29, 78, 216, 0.18); outline-offset: 1px; border-color: #60a5fa;
}
input::placeholder, textarea::placeholder { color: #6b7280; opacity: 1; }
.muted, .hint, .field label, .checks label, .empty-inline, .type-muted, .conversation-meta, .progress-meta, .bubble-head, .audit-label, .section-copy, .helper-line {
  color: var(--muted);
}
.hint, .muted { font-size: 0.93rem; }
.toolbar, .selection-card, .overview, .admin-panel, .table-card { background: rgba(255, 255, 255, 0.97); }
.toolbar, .table-head, .table-filters { border-bottom-color: var(--line); }
.table-head, .table-filters { background: #f8fafc; }
.mini-card { background: #ffffff; border-width: 1.5px; }
.mini-card span { color: #64748b; font-weight: 700; }
.mini-card strong, .table-title, .header h1, .admin-panel h2, th, td, .bubble-body, .audit-value { color: var(--text); }
.admin-panel h2, .table-title { font-size: 1.05rem; font-weight: 800; }
.panel-switch { gap: 0.7rem; margin-bottom: 1rem; }
.panel-tab {
  min-height: 44px; padding: 0 1rem; border: 1.5px solid #bcc8d8; background: #e8edf5;
  color: #334155; font-weight: 800;
}
.panel-tab.active {
  background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
  border-color: #60a5fa; color: var(--accent-strong);
  box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.result-box { background: #f8fafc; border-width: 1.5px; }
.result-box.ok { background: #f0fdf4; }
.result-box.warn { background: #fff7ed; }
.pill, .tag { border: 0; background: #dbeafe; color: #1e3a8a; font-weight: 700; }
.pill-row .pill { border: 1px solid #bfdbfe; background: #eff6ff; color: #1e3a8a; }
.pill-row .pill.active { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.chip-item { border: 1.5px solid #c7d2e0; background: #f8fafc; }
.chip-item.active { border-color: #60a5fa; background: #dbeafe; }
.chip-main { color: var(--text); font-weight: 700; }
.chip-remove { background: #e2e8f0; color: #334155; font-weight: 800; }
th { background: #eaf0f7; color: #334155; font-weight: 800; }
tbody tr:nth-child(even) { background: #fbfdff; }
tbody tr:hover { background: #f4f8ff; }
.badge { font-weight: 800; }
.status {
  display: inline-flex; align-items: center; gap: 0.42rem; padding: 0.34rem 0.7rem;
  border: 1px solid #cbd5e1; border-radius: 999px; background: #f8fafc; color: #334155; font-weight: 800;
}
.status::before {
  content: ''; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: #94a3b8; flex: 0 0 auto;
}
.status.waiting { border-color: #fdba74; background: #fff7ed; color: #9a3412; }
.status.waiting::before { background: #f97316; }
.status.sent { border-color: #86efac; background: #ecfdf5; color: #166534; }
.status.sent::before { background: #16a34a; }
.status.error { border-color: #fca5a5; background: #fef2f2; color: #b91c1c; }
.status.error::before { background: #dc2626; }