*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    --bg: #f3f4f6;
    --sidebar-bg: #ffffff;
    --detail-bg: #ffffff;
    --border: #e5e7eb;
    --text: #111827;
    --muted: #6b7280;
    --accent: #2563eb;
    --accent-h: #1d4ed8;
    --green: #16a34a;
    --red: #dc2626;
    --orange: #ea580c;
    --yellow: #ca8a04;
    --wa: #25d366;
    --hot: #ef4444;
    --warm: #f59e0b;
    --cold: #3b82f6;
    --radius: 10px;
    --shadow: 0 1px 3px rgba(0,0,0,.08);

    /* Responsividade: grandezas que variam por viewport */
    --header-height: 64px;
    --brand-padding: 22px;
    --sidebar-width-tablet: 280px;
    --touch-min: 44px;
  }
  /* Mobile (<768px): header compacto + padding reduzido */
  @media (max-width: 767px) {
    :root {
      --header-height: 56px;
      --brand-padding: 12px;
    }
  }
  html, body { height: 100%; overflow: hidden; font-family: 'Sora', 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--text); font-size: 14px; }