/* ══════════ FONTES LOCAIS (o app roda offline: nada vem de CDN) ══════════ */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:500 800;font-display:swap;src:url('/fonts/bricolage-grotesque-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:500 800;font-display:swap;src:url('/fonts/bricolage-grotesque-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url('/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url('/fonts/jetbrains-mono-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url('/fonts/manrope-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url('/fonts/manrope-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ══════════ TOKENS ══════════ */
/* --muted-ink é a cor de TEXTO secundária. Nunca use --muted: no bundle React ela é cor de FUNDO. */
:root{
  --bg:#F2F4EE; --bg-sunk:#E9EDE3; --surface:#FFFFFF; --surface-2:#F8FAF5;
  --ink:#122019; --ink-2:#34443C; --muted-ink:#62716A; --line:#DCE3D8; --line-2:#C5D0C1;
  --primary:#1E6A48; --primary-hover:#155437; --primary-soft:#DDEFE3; --primary-ink:#0F3F2A;
  --lime:#CFEF63; --accent-soft:#FBE7DA; --accent-ink:#9A4717;
  --danger:#B2372C; --danger-soft:#F8E1DE;
  --warn:#7A5410; --warn-soft:#FBF0D5; --info:#3F4DB8; --info-soft:#E6E9FA;
  --side-bg:#102019; --side-ink:#E9F1EA; --side-muted:#8FA49A;
  --side-line:rgba(233,241,234,.09); --side-hover:rgba(233,241,234,.06);
  --font-display:'Bricolage Grotesque','Manrope',Georgia,serif;
  --font-body:'Manrope','Bricolage Grotesque',system-ui,sans-serif;
  --font-mono:'JetBrains Mono','Courier New',monospace;
  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:22px;
  --shadow-sm:0 1px 2px rgba(18,32,25,.07);
  --shadow-md:0 14px 30px -14px rgba(18,32,25,.22);
  --shadow-lg:0 30px 80px -20px rgba(10,30,20,.38);
  --ease:cubic-bezier(.16,1,.3,1); --dur:180ms;
  --side-w:264px;
  color-scheme:light;
}

/* ══════════ BASE — vale para as duas interfaces ══════════ */
*,*::before,*::after{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0;font-family:var(--font-body);line-height:1.55;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3{font-family:var(--font-display);font-weight:700;letter-spacing:-.03em}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
[hidden]{display:none!important}

/* ══════════ SISTEMA DE COMPONENTES ══════════ */
/* Escopado em .gf (fluxos e disparos). O bundle React tem classes de mesmo nome
   — .page-title, .empty, .notice, .sidebar — e não pode herdar estas regras. */
.gf{font-size:15px}
.gf .eyebrow{margin:0;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-ink)}
.gf .hint{margin:6px 0 0;font-size:12.5px;color:var(--muted-ink)}
.gf .hint b{color:var(--ink-2)}

/* estrutura */
/* A faixa escura é pintada na grade: a sidebar é sticky e não acompanha páginas longas. */
.gf .app{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);min-height:100vh;background:linear-gradient(90deg,var(--side-bg) 0 var(--side-w),transparent var(--side-w))}
.gf .sidebar{position:sticky;top:0;align-self:start;height:100vh;display:flex;flex-direction:column;gap:18px;padding:22px 14px 16px;background:var(--side-bg);color:var(--side-ink);overflow:hidden}
.gf .sidebar :focus-visible{outline-color:var(--lime)}
.gf .brand{display:inline-flex;align-items:center;gap:10px;padding:0 8px;font-family:var(--font-display);font-size:19px;font-weight:700;letter-spacing:-.02em;color:inherit;text-decoration:none}
.gf .brand-mark{flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:var(--lime);color:var(--side-bg)}
.gf .brand-mark svg{width:18px;height:18px}
.gf .brand small{display:block;margin-top:1px;font-family:var(--font-body);font-size:11.5px;font-weight:500;letter-spacing:0;color:var(--side-muted)}
.gf .nav{flex:1;min-height:0;display:flex;flex-direction:column;gap:2px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(233,241,234,.18) transparent}
.gf .nav::-webkit-scrollbar{width:6px}
.gf .nav::-webkit-scrollbar-thumb{background:rgba(233,241,234,.18);border-radius:3px}
.gf .nav-label{margin:0;padding:16px 10px 6px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--side-muted)}
.gf .nav-item{position:relative;display:flex;align-items:center;gap:11px;min-height:40px;padding:0 10px;border:0;border-radius:9px;background:none;color:var(--side-muted);font-size:14px;font-weight:600;text-align:left;text-decoration:none;transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.gf .nav-item svg{flex:none;width:17px;height:17px}
.gf .nav-item>span:first-of-type{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gf .nav-item:hover{background:var(--side-hover);color:var(--side-ink)}
.gf .nav-item[aria-current="page"]{background:rgba(207,239,99,.1);color:var(--side-ink)}
.gf .nav-item[aria-current="page"] svg{color:var(--lime)}
.gf .nav-item[aria-current="page"]::before{content:'';position:absolute;left:-14px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--lime)}
.gf .side-item{display:block;width:100%;padding:9px 10px;border:0;border-radius:9px;background:none;color:var(--side-muted);text-align:left;cursor:pointer;transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.gf .side-item:hover{background:var(--side-hover);color:var(--side-ink)}
.gf .side-item.active{background:rgba(207,239,99,.1);color:var(--side-ink)}
.gf .side-item b{display:block;font-size:13.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gf .side-item small{display:block;margin-top:2px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--side-muted)}
.gf .side-empty{padding:10px;font-size:12.5px;color:var(--side-muted)}
.gf .side-foot{padding-top:14px;border-top:1px solid var(--side-line)}
.gf .side-new{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:38px;border:1px dashed rgba(233,241,234,.22);border-radius:9px;background:none;color:var(--side-ink);font-size:13px;font-weight:700;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.gf .side-new:hover{background:var(--side-hover);border-color:var(--lime)}
/* A barra da Central (React) repetida nas páginas avulsas, com as medidas de #root .sidebar:
   o menu não pode mudar ao sair da Central. app-sidebar.js preenche o cartão do WhatsApp. */
.gf .app-side{position:sticky;top:0;align-self:start;height:100vh;display:flex;flex-direction:column;min-height:0;background:var(--side-bg);color:var(--side-ink);overflow:hidden}
.gf .app-side :focus-visible{outline-color:var(--lime)}
.gf .app-brand{flex:none;display:flex;align-items:center;gap:12px;padding:22px 16px 18px;border-bottom:1px solid var(--side-line);font-family:var(--font-display);color:inherit;text-decoration:none}
.gf .app-brand .brand-mark{width:32px;height:32px}
.gf .app-brand .brand-mark svg{width:20px;height:20px}
.gf .app-brand strong{display:block;font-size:19px;font-weight:700;letter-spacing:-.02em}
.gf .app-brand small{display:block;margin-top:2px;font-size:11.5px;color:var(--side-muted)}
.gf .app-nav{flex:1;min-height:0;overflow-y:auto;padding:10px 14px}
.gf .app-nav a{position:relative;display:flex;align-items:center;gap:12px;min-height:40px;margin-bottom:2px;padding:0 10px;border-radius:9px;color:var(--side-muted);font-size:14px;font-weight:600;text-decoration:none}
.gf .app-nav a:hover{background:var(--side-hover);color:var(--side-ink)}
.gf .app-nav a[aria-current="page"]{background:rgba(207,239,99,.1);color:var(--side-ink)}
.gf .app-nav a[aria-current="page"] svg{color:var(--lime)}
.gf .app-nav a[aria-current="page"]::before{content:'';position:absolute;left:-14px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--lime)}
.gf .app-nav svg{flex:none;width:18px;height:18px}
.gf .wa-card{flex:none;margin:16px;padding:16px;border:1px solid var(--side-line);border-radius:var(--r-lg);background:rgba(233,241,234,.05)}
.gf .wa-card-top{display:flex;align-items:center;justify-content:space-between;font-size:14px;color:var(--side-muted)}
.gf .wa-card-top b{display:flex;align-items:center;gap:6px;color:var(--lime)}
.gf .wa-card>strong{display:block;margin-top:12px;font-size:14px}
.gf .wa-card button{display:flex;align-items:center;gap:7px;margin-top:12px;padding:0;border:0;background:none;color:var(--side-muted);font-size:14px}
.gf .wa-card button:disabled{cursor:not-allowed}
.gf .wa-card button svg{width:14px;height:24px} /* na Central o ícone ocupa 24px de altura */
.gf .main{position:relative;isolation:isolate;min-width:0;padding:clamp(24px,3.4vw,48px) clamp(18px,3.6vw,56px) 80px}
.gf .main::before{content:'';position:absolute;inset:0 0 auto 0;height:360px;z-index:-1;pointer-events:none;background:radial-gradient(50% 100% at 88% 0%,color-mix(in srgb,var(--primary) 13%,transparent),transparent 70%)}
.gf .page{max-width:1180px;margin:0 auto}
.gf .page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 24px;margin-bottom:26px}
.gf .page-title{margin:8px 0 10px;font-size:clamp(34px,4.2vw,54px);line-height:.96;letter-spacing:-.045em}
.gf .page-lede{margin:0;max-width:58ch;font-size:15.5px;color:var(--muted-ink)}
.gf .page-actions{display:flex;flex-wrap:wrap;gap:8px}

/* botões */
.gf .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border:1px solid transparent;border-radius:var(--r-md);font-size:14px;font-weight:700;white-space:nowrap;text-decoration:none;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.gf .btn svg{width:16px;height:16px}
.gf .btn:disabled{opacity:.55;cursor:not-allowed;transform:none!important}
.gf .btn-primary{background:var(--primary);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 22px -12px rgba(30,106,72,.8)}
.gf .btn-primary:hover:not(:disabled){background:var(--primary-hover);transform:translateY(-1px)}
.gf .btn-secondary{background:var(--surface);border-color:var(--line-2);color:var(--ink-2)}
.gf .btn-secondary:hover:not(:disabled){border-color:var(--ink-2);color:var(--ink)}
.gf .btn-ghost{background:none;border-color:transparent;color:var(--muted-ink)}
.gf .btn-ghost:hover:not(:disabled){background:var(--bg-sunk);color:var(--ink)}
.gf .btn-danger{background:var(--surface);border-color:color-mix(in srgb,var(--danger) 35%,var(--line));color:var(--danger)}
.gf .btn-danger:hover:not(:disabled){border-color:var(--danger);background:var(--danger-soft)}
.gf .btn-sm{min-height:36px;padding:0 12px;font-size:13px}
.gf .btn-block{width:100%}
.gf .icon-btn{flex:none;width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);color:var(--ink-2);font-size:18px;line-height:1;transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.gf .icon-btn:hover{border-color:var(--line-2);color:var(--ink)}

/* campos */
.gf .field{display:grid;gap:6px;margin:0}
.gf .field>span,.gf .field-label{font-size:13.5px;font-weight:700;color:var(--ink)}
.gf input[type=text],.gf input[type=number],.gf input[type=search],.gf input[type=datetime-local],.gf input[type=date],.gf input:not([type]),.gf textarea,.gf select,.gf .input,.gf .textarea{width:100%;padding:11px 13px;border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--surface);color:var(--ink);font-size:15px;line-height:1.5;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.gf input:hover,.gf textarea:hover,.gf select:hover{border-color:#AEBBAA}
.gf input:focus,.gf textarea:focus,.gf select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 16%,transparent)}
.gf input::placeholder,.gf textarea::placeholder{color:#97A49C}
.gf textarea,.gf .textarea{min-height:110px;resize:vertical}
.gf select,.gf .select{appearance:none;padding-right:38px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%2362716A%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m6 9 6 6 6-6%22/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px}
.gf input[type=checkbox],.gf input[type=radio]{width:auto;min-height:0;padding:0;accent-color:var(--primary)}
.gf .check{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;cursor:pointer}
.gf .check input{flex:none;width:17px;height:17px;margin:0}

/* superfícies */
.gf .panel{overflow:hidden;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface)}
.gf .panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px 22px;border-bottom:1px solid var(--line)}
.gf .panel-head h2,.gf .panel-head h3{margin:0;font-size:19px;line-height:1.15}
.gf .panel-head p{margin:4px 0 0;font-size:13.5px;color:var(--muted-ink)}
.gf .panel-body{padding:18px 22px 22px}
.gf .section-num{display:grid;place-items:center;width:24px;height:24px;border-radius:6px;background:var(--primary-soft);font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:0;color:var(--primary)}
.gf .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));overflow:hidden;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.gf .stat{display:grid;gap:2px;padding:14px 18px;border-left:1px solid var(--line)}
.gf .stat:first-child{border-left:0}
.gf .stat-value{font-family:var(--font-display);font-size:28px;font-weight:700;line-height:1.1;letter-spacing:-.03em}
.gf .stat-label{font-size:12.5px;font-weight:600;color:var(--muted-ink)}
.gf .stat--ok .stat-value{color:var(--primary)}
.gf .stat--bad .stat-value{color:var(--danger)}
.gf .stat--info .stat-value{color:var(--info)}
.gf .segmented{display:inline-flex;padding:3px;border:1px solid var(--line);border-radius:11px;background:var(--bg-sunk)}
.gf .segmented button{min-height:36px;padding:0 14px;border:0;border-radius:8px;background:none;font-size:13.5px;font-weight:700;color:var(--muted-ink);transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.gf .segmented button:hover:not(:disabled){color:var(--ink)}
.gf .segmented button.active{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}
.gf .table-wrap{overflow:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.gf .table{width:100%;border-collapse:collapse;font-size:14px}
.gf .table th{position:sticky;top:0;z-index:1;padding:11px 14px;background:var(--surface-2);border-bottom:1px solid var(--line);font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:.1em;text-align:left;text-transform:uppercase;color:var(--muted-ink);white-space:nowrap}
.gf .table td{padding:10px 14px;border-bottom:1px solid var(--line);color:var(--ink-2)}
.gf .table tr:last-child td{border-bottom:0}
.gf .table .num{text-align:right;font-variant-numeric:tabular-nums}
.gf .pill{display:inline-block;padding:3px 10px;border-radius:999px;font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.04em;text-transform:uppercase}
.gf .pill--neutral{background:var(--bg-sunk);color:var(--muted-ink)}
.gf .pill--ok{background:var(--primary-soft);color:var(--primary-ink)}
.gf .pill--bad{background:var(--danger-soft);color:var(--danger)}
.gf .pill--info{background:var(--info-soft);color:var(--info)}
.gf .pill--warn{background:var(--warn-soft);color:var(--warn)}
.gf .notice{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:var(--r-md);font-size:13.5px;line-height:1.5}
.gf .notice--info{background:var(--primary-soft);color:var(--primary-ink)}
.gf .notice--warn{background:var(--warn-soft);color:var(--warn)}
.gf .notice--danger{background:var(--danger-soft);color:var(--danger)}
.gf .empty{margin:0;padding:26px 14px;text-align:center;font-size:14px;color:var(--muted-ink)}

/* modal e toast */
.gf .modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px;background:rgba(10,22,16,.45);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:gf-fade 200ms var(--ease)}
.gf .modal.hidden{display:none}
.gf .modal-card{width:min(640px,100%);max-height:86vh;overflow:auto;border-radius:var(--r-xl);background:var(--bg);box-shadow:var(--shadow-lg);animation:gf-rise 320ms var(--ease)}
.gf .modal-head{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px 16px;border-bottom:1px solid var(--line);background:var(--surface)}
.gf .modal-head h2{margin:0;font-size:23px;line-height:1.1}
.gf .modal-body{padding:20px 24px 24px}
.gf #toast{position:fixed;left:50%;bottom:24px;z-index:60;display:none;max-width:min(560px,92vw);padding:12px 18px;border-radius:var(--r-md);background:var(--ink);color:#fff;font-size:14px;font-weight:600;box-shadow:var(--shadow-lg);transform:translateX(-50%);animation:gf-toast 260ms var(--ease)}
.gf #toast.is-error{background:var(--danger)}
@keyframes gf-fade{from{opacity:0}}
@keyframes gf-rise{from{opacity:0;transform:translateY(12px)}}
@keyframes gf-toast{from{opacity:0;transform:translate(-50%,10px)}}

/* Abaixo de 900px a coluna vira uma barra superior compacta: a lateral inteira
   empurraria todo o conteudo para fora da primeira tela. */
@media(max-width:900px){
  .gf .app{grid-template-columns:minmax(0,1fr);background:none}
  .gf .sidebar{position:sticky;top:0;z-index:30;height:auto;min-width:0;flex-direction:row;align-items:center;gap:12px;padding:10px 14px;overflow:hidden}
  .gf .brand{flex:none;font-size:17px;padding:0}
  .gf .brand>span:last-child{display:none}
  .gf .nav{flex-direction:row;align-items:center;gap:6px;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
  .gf .nav::-webkit-scrollbar{display:none}
  .gf .nav-label{display:none}
  .gf .nav-item{flex:none;min-height:34px;padding:0 11px;border-radius:999px;background:var(--side-hover)}
  .gf .nav-item[aria-current="page"]::before{left:8px;right:8px;top:auto;bottom:2px;width:auto;height:2px;border-radius:2px}
  .gf .side-item{width:auto;flex:none;padding:7px 11px;border-radius:999px;background:var(--side-hover);white-space:nowrap}
  .gf .side-item small{display:none}
  .gf .side-empty{display:none}
  .gf .side-foot{flex:none;padding:0;border-top:0}
  .gf .side-new{width:auto;min-height:34px;padding:0 12px;white-space:nowrap}
  .gf .app-side{z-index:30;height:auto;flex-direction:row;align-items:center;gap:12px;padding:10px 14px}
  .gf .app-brand{padding:0;border:0}
  .gf .app-brand-text{display:none}
  .gf .app-nav{display:flex;align-items:center;gap:6px;padding:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
  .gf .app-nav::-webkit-scrollbar{display:none}
  .gf .app-nav a{flex:none;min-height:34px;margin:0;padding:0 11px;border-radius:999px;background:var(--side-hover);white-space:nowrap}
  .gf .app-nav a[aria-current="page"]::before{left:8px;right:8px;top:auto;bottom:2px;width:auto;height:2px;border-radius:2px}
  .gf .wa-card{display:none}
  .gf .main{padding:22px 16px 72px}
}

/* ══════════ CENTRAL (bundle React) ══════════ */
/* O bundle é compilado: o tema entra pelas variáveis do Tailwind e pelas classes semânticas dele. */
:root{
  --background:#F2F4EE; --foreground:#122019; --card:#FFFFFF; --card-foreground:#122019;
  --popover:#FFFFFF; --popover-foreground:#122019;
  --primary-foreground:#FFFFFF; --secondary:#E9EDE3; --secondary-foreground:#34443C;
  --muted:#E9EDE3; --muted-foreground:#62716A; --accent:#DDEFE3; --accent-foreground:#0F3F2A;
  --destructive:#B2372C; --border:#DCE3D8; --input:#C5D0C1; --ring:#1E6A48; --radius:.625rem;
}
/* Tudo abaixo é escopado em #root (a raiz do React): sem isso, regras como
   .sidebar{width:264px} vazariam para as páginas de fluxos e disparos. */
#root .sidebar{width:var(--side-w);background:var(--side-bg);color:var(--side-ink)}
#root .main-area{padding-left:var(--side-w)}
#root .sidebar .brand{height:auto;padding:22px 16px 18px;border-bottom:1px solid var(--side-line);font-family:var(--font-display)}
#root .sidebar .brand strong{font-size:19px;font-weight:700;letter-spacing:-.02em}
#root .sidebar .brand span{color:var(--side-muted);font-size:11.5px}
#root .brand-mark{width:32px;height:32px;border-radius:9px;background:var(--lime);color:var(--side-bg)}
#root .sidebar nav{padding:10px 14px}
#root .sidebar nav button{position:relative;min-height:40px;margin-bottom:2px;padding:0 10px;border-radius:9px;color:var(--side-muted);font-size:14px;font-weight:600}
#root .sidebar nav button:hover{background:var(--side-hover);color:var(--side-ink)}
#root .sidebar nav button.active{background:rgba(207,239,99,.1);color:var(--side-ink)}
#root .sidebar nav button.active svg{color:var(--lime)}
#root .sidebar nav button.active::before{content:'';position:absolute;left:-14px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--lime)}
#root .wa-card{background:rgba(233,241,234,.05);border:1px solid var(--side-line);border-radius:var(--r-lg)}
#root .wa-card-top{color:var(--side-muted)}
#root .wa-card-top b{color:var(--lime)}
#root .wa-card-top i{background:var(--lime)}
#root .wa-card button{color:var(--side-muted)}
#root .wa-status{background:var(--side-bg);border-radius:var(--r-xl);box-shadow:var(--shadow-md)}
#root .wa-status>p, #root .wa-status>small, #root .number-box span, #root .muted-light{color:var(--side-muted)!important}
#root .status-top svg{color:var(--lime)}
#root .status-top>div{background:rgba(233,241,234,.08)}
/* O botão do cartão escuro herdava color:#fff sobre um fundo claro e ficava ilegível. */
#root .wa-status [data-slot=button]{background:rgba(233,241,234,.1)!important;border:1px solid var(--side-line);color:var(--side-ink)!important}
#root .wa-status [data-slot=button]:hover{background:rgba(233,241,234,.18)!important}
#root .number-box{background:rgba(233,241,234,.05);border:1px solid var(--side-line);border-radius:var(--r-md)}
#root .compact-nav button{border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--muted-ink);font-weight:700}
#root .compact-nav button.active{background:var(--primary);color:#fff;border-color:var(--primary)}
#root .mobile-nav{background:var(--surface);border-top:1px solid var(--line)}
#root .mobile-nav button{color:var(--muted-ink);font-weight:700}
#root .mobile-nav button.active{color:var(--primary)}
#root .topbar{background:color-mix(in srgb,var(--bg) 92%,transparent);border-bottom:1px solid var(--line)}
#root .page-title p, #root .section-heading p, #root .table-toolbar>span, #root .export-summary dt, #root .compose-footer p, #root .field-meta, #root .muted{color:var(--muted-ink)}
#root .surface{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-sm)}
#root .avatar{background:linear-gradient(140deg,var(--lime),#7FD39A);color:var(--side-bg)}
#root .metric i.blue{color:var(--info);background:var(--info-soft)}
#root .metric i.green{color:var(--primary);background:var(--primary-soft)}
#root .metric i.purple{color:#6F49C0;background:#EFE9FB}
#root .metric i.orange{color:var(--accent-ink);background:var(--accent-soft)}
#root .metric>div>span, #root .metric>small, #root .group-main span, #root .selector-list small, #root .select-grid small, #root .dedupe small, #root .calendar-day small{color:var(--muted-ink)}
#root .message-box, #root .message-preview{background:var(--surface-2)}
#root .upload{background:var(--surface-2);border:1px dashed var(--line-2);border-radius:var(--r-md);color:var(--muted-ink)}
#root .upload:hover{background:var(--primary-soft);border-color:var(--primary);color:var(--primary-ink)}
#root .empty{background:var(--surface-2);border-radius:var(--r-md);color:var(--muted-ink)}
#root .selector-list>label, #root .dedupe{background:var(--surface-2);border-radius:var(--r-md)}
#root .selector-list>label.selected, #root .select-grid>label.selected, #root .dialog-tag-grid>label.selected{background:var(--primary-soft);border-color:color-mix(in srgb,var(--primary) 45%,transparent)}
#root .select-grid>label, #root .dialog-tag-grid>label, #root .calendar-day{border-color:var(--line);border-radius:var(--r-md)}
#root .calendar-day{background:var(--surface-2)}
#root .calendar-day.chosen{background:var(--primary-soft);border-color:var(--primary)}
#root .calendar-day span{background:var(--primary-soft);color:var(--primary-ink)}
#root .group-row:hover{background:var(--surface-2)}
#root .group-row, #root .campaign-row, #root .contact-row, #root .file-row, #root .run-target, #root .export-summary dl>div, #root .table-toolbar, #root .compose-footer, #root .export-tags{border-color:var(--line)}
#root .group-icon, #root .download-icon, #root .custom-tags>span{background:var(--primary-soft);color:var(--primary-ink);border-radius:var(--r-md)}
#root .custom-tags>span{border-radius:999px}
#root .filter-pills button{border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--muted-ink)}
#root .filter-pills button.active{background:var(--primary)!important;color:#fff!important;border-color:var(--primary)!important}
#root .filter-title{color:var(--muted-ink)}
#root .qr-panel{background:var(--surface-2);border-radius:var(--r-lg);color:var(--primary)}
#root .launch-link, #root .green-button, #root .status-top span{background:var(--primary)!important;color:#fff!important}
#root .launch-link{border-radius:var(--r-md)}
#root .server-badge{background:var(--primary-soft)!important;color:var(--primary-ink)!important;border-color:color-mix(in srgb,var(--primary) 30%,transparent)!important}
#root .notice{background:var(--warn-soft);border:1px solid color-mix(in srgb,var(--warn) 30%,transparent);color:var(--warn);border-radius:var(--r-md)}
#root .privacy-note{background:var(--warn-soft);color:var(--warn);border-radius:var(--r-md)}
#root .warning-badge{background:var(--warn-soft)!important;color:var(--warn)!important}
#root .error-text{color:var(--danger)}
#root .file-row a, #root .subhead button{color:var(--primary)}