/* galaxia.88app.com.br no design system do 88kanban (88chrome/design-system.md): glassmorphism roxo, escuro primeiro e claro de
   primeira classe. Os tokens daqui também redefinem os do painel da extensão (base.css, relatorio.css, resultados.css), então o
   relatório e os resultados seguem o tema sem mudar os módulos. Raios só {8, 12, 16, 20, 24, 100}; #8000FF só como preenchimento
   com texto branco; roxo de frente = --accent. */

.gw-tela {
  /* AppColors (dark) */
  --primary: #8000FF;
  --accent: #C6A7FF;
  --t-text: #FFFFFF;
  --t-sub: rgba(255, 255, 255, 0.70);
  --t-dim: rgba(255, 255, 255, 0.54);
  --t-hint: #BDBDBD;
  --card: rgba(255, 255, 255, 0.05);
  --tertiary: #2B2337;
  --dialog: #1A1128;
  --input: rgba(0, 0, 0, 0.20);
  --border: rgba(255, 255, 255, 0.10);
  --border-light: rgba(255, 255, 255, 0.05);
  --divider: rgba(255, 255, 255, 0.12);
  --hover: rgba(255, 255, 255, 0.05);
  --sidebar: transparent;
  --sidebar-border: rgba(255, 255, 255, 0.12);
  --on-surface: 255, 255, 255;
  --sombra-painel: none;
  --verde: #69F0AE;
  --vermelho: #FF6B8A;
  --fundo: linear-gradient(135deg, #2E0249 0%, #000000 100%);
  --login-fill: rgba(255, 255, 255, 0.05);
  --login-border: rgba(255, 255, 255, 0.20);

  /* tokens do painel da extensão, mapeados para os do 88kanban */
  --bg: transparent;
  --surface: var(--card);
  --surface-2: var(--input);
  --line: var(--border);
  --line-forte: var(--divider);
  --text: var(--t-text);
  --muted: var(--t-sub);
  --faint: var(--t-dim);
  --roxo-claro: var(--accent);
  --ok: var(--verde);
  --perigo: var(--vermelho);
  --prim-rgb: 128, 0, 255;
  --grad: linear-gradient(135deg, rgba(var(--prim-rgb), 0.2) 0%, rgba(var(--prim-rgb), 0.8) 50%, rgba(var(--prim-rgb), 0.6) 100%);
  --raio: 16px;

  min-height: 100vh;
  background: var(--fundo);
  background-attachment: fixed;
  color: var(--t-text);
  font-family: Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
.gw-tela[data-tema='claro'] {
  --primary: #7000E0;
  --accent: #7000E0;
  --t-text: #1A1128;
  --t-sub: #4A3A5C;
  --t-dim: #6B5B7B;
  --t-hint: #8570A3;
  --card: #F8F4FF;
  --tertiary: #EDE5FA;
  --dialog: #FFFFFF;
  --input: rgba(112, 0, 224, 0.08);
  --border: rgba(112, 0, 224, 0.10);
  --border-light: rgba(112, 0, 224, 0.06);
  --divider: rgba(112, 0, 224, 0.10);
  --hover: rgba(112, 0, 224, 0.06);
  --sidebar: rgba(255, 255, 255, 0.60);
  --sidebar-border: rgba(112, 0, 224, 0.08);
  --on-surface: 26, 17, 40;
  --sombra-painel: 0 4px 16px rgba(0, 0, 0, 0.06);
  --verde: #0E8345;
  --vermelho: #C2185B;
  --fundo: linear-gradient(135deg, #F0E6FF 0%, #D4BFFA 50%, #B89DF0 100%);
  --login-fill: rgba(255, 255, 255, 0.35);
  --login-border: rgba(255, 255, 255, 0.50);
  --prim-rgb: 112, 0, 224;
  --grad: linear-gradient(135deg, rgba(var(--prim-rgb), 0.2) 0%, rgba(var(--prim-rgb), 0.8) 50%, rgba(var(--prim-rgb), 0.6) 100%);
}
html, body { background: #000 !important; }
.gw-tela *, .gw-tela *::before, .gw-tela *::after { box-sizing: border-box; }
.gw-tela button, .gw-tela input { font-family: inherit; color: inherit; }
.gw-tela a { color: var(--accent); }
.gw-tela ::selection { background: rgba(128, 0, 255, 0.35); }
.gw-tela :focus-visible { outline: 1.5px solid var(--primary); outline-offset: 2px; }

/* vidro: blur 10 (painéis) e 12 (cartões de análise); sem blur quando a pessoa pede menos movimento */
.gw-vidro { background: var(--card); border: 1.5px solid var(--border); border-radius: 24px; box-shadow: var(--sombra-painel);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
@media (prefers-reduced-transparency: reduce) { .gw-vidro { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--dialog); } }

/* ---------- Botões (I. FuturisticDarkButton; secundário = contorno raio 12) ---------- */
.gw-tela .if-btn { border-radius: 12px; border: 1px solid var(--border); background: transparent; color: var(--t-text); font-weight: 600; font-size: 13px;
  padding: 10px 16px; transition: transform .4s ease-out, background .2s ease-in-out, box-shadow .4s ease-out; }
.gw-tela .if-btn:hover:not(:disabled) { background: var(--hover); }
/* FuturisticDarkButton, porta fiel de 88kanban lib/view/widgets/futuristic_dark_button.dart: degradê TL→BR da cor-base a 0.2/0.8/0.6
   (stops 0/.5/1), raio 12, sombra base@0.1 blur 15 y 4 → base@0.3 blur 25 y 6, sobe 2px em 400ms easeOut, brilho no topo
   white@0.05→0.15 (stops 0/.1), onda branca do centro (white@0.1 sumindo, raio 1.5× a largura), texto branco w600 0.5 */
.gw-tela .if-btn-primary { position: relative; overflow: hidden; isolation: isolate; border: 0; color: #fff; font-weight: 600; letter-spacing: .5px;
  background: var(--grad); box-shadow: 0 4px 15px rgba(var(--prim-rgb), 0.1);
  transition: transform .4s ease-out, box-shadow .4s ease-out; }
.gw-tela .if-btn-primary::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, transparent 10%); transition: background .4s ease-out; }
.gw-tela .if-btn-primary::after { content: ''; position: absolute; left: 50%; top: 50%; width: 300%; aspect-ratio: 1; border-radius: 100px; pointer-events: none; z-index: -1;
  background: rgba(255, 255, 255, 0.1); transform: translate(-50%, -50%) scale(0); opacity: 1; transition: transform .4s ease-out, opacity .4s ease-out; }
.gw-tela .if-btn-primary:hover:not(:disabled) { background: var(--grad); filter: none; transform: translateY(-2px); box-shadow: 0 6px 25px rgba(var(--prim-rgb), 0.3); }
.gw-tela .if-btn-primary:hover:not(:disabled)::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, transparent 10%); }
.gw-tela .if-btn-primary:hover:not(:disabled)::after { transform: translate(-50%, -50%) scale(1); opacity: 0; }
.gw-tela .if-btn-primary:active:not(:disabled) { background: var(--grad); }
.gw-tela .if-btn .material-symbols-outlined { font-size: 18px; }
.gw-icone { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 0; background: transparent; color: var(--t-sub); cursor: pointer; transition: background .2s ease-in-out; }
.gw-icone:hover { background: var(--hover); }

/* ---------- Login (o único cartão de vidro branco cru, sobre o gradiente) ---------- */
.gw-centro { display: grid; place-items: center; padding: 16px; position: relative; }
.gw-login { width: 100%; max-width: 500px; padding: 30px; border-radius: 20px; background: var(--login-fill); border: 1.5px solid var(--login-border);
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  display: flex; flex-direction: column; gap: 16px; animation: gw-entra .8s cubic-bezier(.165, .84, .44, 1) both; }
@keyframes gw-entra { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: none; } }
.gw-login-topo { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 8px; text-align: center; }
.gw-login-topo img { width: 88px; height: 88px; }
.gw-wordmark { font-family: Outfit, Roboto, sans-serif; font-size: 40px; font-weight: 700; letter-spacing: 3px; color: var(--t-text); line-height: 1.1; }
.gw-login h1 { font-size: 18px; font-weight: 700; color: var(--t-text); }
.gw-login p { color: var(--t-sub); }
.gw-login .gw-pe { color: var(--t-dim); font-size: 13px; text-align: center; }
.gw-login .if-btn-primary { height: 56px; font-size: 16px; } /* tamanho padrão do FuturisticDarkButton: 56 de altura, texto 16 */
.gw-erro { color: var(--vermelho); font-size: 13px; }

/* Escavado (inputs): fundo afundado, raio 8, foco primary 1.5 */
.gw-campo { width: 100%; height: 56px; border-radius: 8px; border: 1px solid var(--border); background: var(--input); color: var(--t-text);
  padding: 0 16px; font-size: 15px; outline: none; transition: border-color .2s ease-in-out, box-shadow .2s ease-in-out; }
.gw-campo::placeholder { color: var(--t-hint); }
.gw-campo:focus { border-color: var(--primary); box-shadow: 0 0 0 .5px var(--primary); }

/* ---------- Casca: barra lateral + topo ---------- */
.gw-corpo { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 100vh; }
.gw-lado { position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 16px 12px; display: flex; flex-direction: column; gap: 4px;
  background: var(--sidebar); border-right: 1px solid var(--sidebar-border); scrollbar-width: thin; }
.gw-marca { display: flex; align-items: center; gap: 10px; padding: 4px 8px 16px; font-weight: 700; font-size: 16px; color: var(--t-text); }
.gw-marca img { width: 40px; height: 40px; }
.gw-marca small { display: block; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); }
/* NeonSideNavButton: altura 45, raio 8, ativo = degradê roxo + borda 1.5 + brilho + barra de 4px à esquerda */
.gw-item { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 45px; text-align: left; padding: 8px 12px;
  border-radius: 8px; border: 1.5px solid transparent; background: none; cursor: pointer; font-size: 14px; color: var(--t-dim);
  transition: background .2s ease-in-out, color .2s ease-in-out, box-shadow .2s ease-in-out; }
.gw-item:hover { background: var(--hover); }
.gw-item .material-symbols-outlined { font-size: 20px; }
.gw-item.ativo { color: #fff; text-shadow: 0 0 8px rgba(128, 0, 255, 0.8); border-color: var(--primary);
  background: linear-gradient(90deg, rgba(128, 0, 255, 0.2), rgba(128, 0, 255, 0.05)); box-shadow: 0 0 12px rgba(128, 0, 255, 0.4); }
.gw-item.ativo::before { content: ''; position: absolute; left: -1.5px; top: 8px; bottom: 8px; width: 4px; border-radius: 0 100px 100px 0;
  background: var(--primary); box-shadow: 0 0 8px rgba(128, 0, 255, 0.8); }
.gw-tela[data-tema='claro'] .gw-item.ativo { color: var(--primary); text-shadow: none; border-color: rgba(112, 0, 224, 0.5);
  background: linear-gradient(90deg, rgba(112, 0, 224, 0.12), rgba(112, 0, 224, 0.05)); box-shadow: 0 0 12px rgba(112, 0, 224, 0.2); }
.gw-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw-grupo { display: flex; flex-direction: column; gap: 2px; margin-top: 16px; }
/* Rótulo de seção: maiúsculo, negrito, roxo de frente, letterSpacing 1.5 */
.gw-rotulo { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); padding: 0 8px 8px; }
.gw-lado-pe { margin-top: auto; padding-top: 16px; display: flex; flex-direction: column; gap: 4px; }
.gw-conta { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 12px; color: var(--t-dim); font-size: 12px; }
.gw-conta span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.gw-topo { display: none; }
.gw-main { padding: 24px; display: flex; flex-direction: column; gap: 24px; min-width: 0; max-width: 1280px; }

/* A. Cabeçalho da página */
.gw-cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.gw-cab h1 { font-size: 28px; font-weight: 700; color: var(--t-text); line-height: 1.2; letter-spacing: -0.5px; }
.gw-cab p, .gw-cab small { color: var(--t-dim); font-size: 14px; }
.gw-cab small { font-size: 12px; }
.gw-cab .gw-rotulo { padding: 0 0 4px; display: block; }

/* E. Barra de pílulas (filtro de período) */
.gw-pilulas { display: inline-flex; gap: 4px; height: 48px; padding: 4px 6px; align-items: center; border-radius: 100px; border: .8px solid rgba(var(--on-surface), 0.12);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); overflow-x: auto; max-width: 100%; }
.gw-pilulas button { height: 34px; padding: 0 16px; border-radius: 100px; border: 0; background: transparent; cursor: pointer; white-space: nowrap;
  font-size: 13px; font-weight: 500; color: rgba(var(--on-surface), 0.7); transition: background .25s, box-shadow .25s, color .25s; }
.gw-pilulas button.ativo { background: rgba(128, 0, 255, 0.8); color: #fff; font-weight: 700; box-shadow: 0 4px 10px rgba(128, 0, 255, 0.3); }
.gw-tela[data-tema='claro'] .gw-pilulas button.ativo { background: rgba(112, 0, 224, 0.8); }

/* F. Abas segmentadas (Desempenho | Consultoria | Concorrentes) */
.gw-seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; border: 1px solid var(--border); background: rgba(43, 35, 55, 0.4); max-width: 100%; overflow-x: auto; }
.gw-tela[data-tema='claro'] .gw-seg { background: var(--card); }
.gw-seg button { padding: 8px 16px; border-radius: 10px; border: 0; background: transparent; cursor: pointer; white-space: nowrap; font-size: 14px; font-weight: 500;
  color: var(--t-dim); transition: background .2s ease-in-out, color .2s ease-in-out; }
.gw-seg button.ativo { background: var(--primary); color: #fff; font-weight: 700; box-shadow: 0 2px 8px rgba(128, 0, 255, 0.3); }

/* D. Cartões de número (KPIs) e B. painéis */
.gw-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.gw-kpi { padding: 16px 20px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.157);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)), rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gw-tela[data-tema='claro'] .gw-kpi { background: #fff; border-color: #E0D8ED; box-shadow: 0 4px 12px rgba(112, 0, 224, 0.06); backdrop-filter: none; }
.gw-kpi span { font-size: 12px; font-weight: 500; color: var(--t-dim); }
.gw-kpi b { font-size: 24px; font-weight: 700; color: var(--t-text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.gw-kpi small { font-size: 12px; color: var(--t-dim); }
.gw-kpi.bom b { color: var(--verde); } .gw-kpi.ruim b { color: var(--vermelho); }
.gw-painel { padding: 0; overflow: hidden; }
.gw-painel-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 24px; border-bottom: 1px solid var(--border); }
.gw-painel-cab b { font-size: 18px; font-weight: 700; color: var(--t-text); }
.gw-conta-pilula { padding: 4px 12px; border-radius: 100px; border: 1px solid var(--border); background: rgba(0, 0, 0, 0.3); font-size: 12px; font-weight: 600; color: #fff; }
.gw-tela[data-tema='claro'] .gw-conta-pilula { background: rgba(112, 0, 224, 0.08); color: var(--primary); }
.gw-painel-corpo { padding: 16px 24px 20px; display: flex; flex-direction: column; gap: 12px; }
.gw-tabela { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.gw-tabela th { text-align: left; font-size: 12px; font-weight: 600; color: var(--t-dim); padding: 12px 24px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.gw-tabela td { padding: 12px 24px; border-bottom: 1px solid var(--border-light); color: var(--t-sub); }
.gw-tabela tr:last-child td { border-bottom: 0; }
.gw-tabela tbody tr { transition: background .2s ease-in-out; }
.gw-tabela tbody tr:hover { background: var(--hover); }
.gw-tabela .n { text-align: right; white-space: nowrap; }
.gw-rolar { overflow-x: auto; }
.gw-bom { color: var(--verde) !important; font-weight: 600; } .gw-ruim { color: var(--vermelho) !important; font-weight: 600; }
.gw-voce td { color: var(--accent); font-weight: 600; background: rgba(128, 0, 255, 0.08); }
.gw-link { border: 0; background: none; padding: 0; cursor: pointer; color: var(--t-text) !important; font-weight: 600; text-align: left; font-size: 13px; }
.gw-link:hover { color: var(--accent) !important; }
.gw-chip { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 100px; font-size: 11px; font-weight: 600; background: var(--input); color: var(--t-sub); }
.gw-chip.ifood { color: #FF5A67; } .gw-chip.\39 9food { color: #FFB300; } .gw-chip.keeta { color: #FFD54A; }
.gw-tela[data-tema='claro'] .gw-chip.ifood { color: #C62828; } .gw-tela[data-tema='claro'] .gw-chip.\39 9food,
.gw-tela[data-tema='claro'] .gw-chip.keeta { color: #B45309; }
.gw-sem { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 100px; background: var(--input); color: var(--t-dim); white-space: nowrap; }
.gw-leitura { margin: 0; padding-left: 18px; list-style: disc; color: var(--t-sub); font-size: 13px; line-height: 1.6; }
.gw-aviso { padding: 20px 24px; color: var(--t-sub); }
.gw-aviso.erro { color: var(--vermelho); }

/* G. Carregando: o spinner é sempre o roxo de frente */
.gw-carregando { display: flex; align-items: center; gap: 12px; padding: 24px; color: var(--t-dim); }
.gw-spin { width: 22px; height: 22px; border-radius: 100px; border: 2.5px solid rgba(198, 167, 255, 0.25); border-top-color: var(--accent); animation: gw-gira .8s linear infinite; }
@keyframes gw-gira { to { transform: rotate(360deg); } }

/* ---------- Os módulos do painel da extensão dentro do site ---------- */
.gw-modulo { max-width: 960px; }
.gw-modulo .if-card { border-radius: 24px; border: 1.5px solid var(--border); background: var(--card); box-shadow: var(--sombra-painel);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 24px; gap: 16px; }
.gw-modulo .rl, .gw-modulo .ri { font-size: 14px; }
.gw-modulo .rl-kpis { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.gw-modulo .rl-kpi { border-radius: 16px; padding: 12px 16px; background: var(--input); border-color: var(--border); }
.gw-modulo .rl-kpi b { font-size: 20px; }
.gw-modulo .rl-kpi span, .gw-modulo .rl-kpi small { font-size: 12px; }
.gw-modulo .rl-tab table { font-size: 13px; }
.gw-modulo .rl-abas { gap: 4px; padding: 4px 6px; border-radius: 100px; border: .8px solid rgba(var(--on-surface), 0.12); }
.gw-modulo .rl-abas button { height: 34px; padding: 0 16px; border-radius: 100px; border: 0; background: transparent; font-size: 13px; font-weight: 500; color: rgba(var(--on-surface), 0.7); }
.gw-modulo .rl-abas button.active { background: rgba(128, 0, 255, 0.8); color: #fff; font-weight: 700; box-shadow: 0 4px 10px rgba(128, 0, 255, 0.3); }
.gw-modulo .rl-resumo button { border-radius: 12px; padding: 12px 16px; font-size: 13px; color: var(--t-sub); }
.gw-modulo .rl-oferta { border-radius: 16px; }
.gw-tela[data-tema='claro'] .gw-modulo .rl-resumo button { background: rgba(194, 24, 91, 0.06); border-color: rgba(194, 24, 91, 0.2); }
.gw-tela[data-tema='claro'] .gw-modulo .rl-oferta { background: #fff; border-color: rgba(112, 0, 224, 0.2); }
.gw-tela[data-tema='claro'] .gw-modulo .rl-oferta p, .gw-tela[data-tema='claro'] .gw-modulo .rl-oferta b { color: var(--t-text); }

/* ---------- Celular: até 900 a barra lateral vira gaveta ---------- */
@media (max-width: 900px) {
  .gw-corpo { grid-template-columns: minmax(0, 1fr); }
  .gw-topo { display: flex; align-items: center; gap: 8px; position: sticky; top: 0; z-index: 20; height: 56px; padding: 0 8px;
    background: rgba(26, 17, 40, 0.8); border-bottom: 1px solid var(--sidebar-border); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .gw-tela[data-tema='claro'] .gw-topo { background: rgba(255, 255, 255, 0.7); }
  .gw-topo .gw-marca { padding: 0; margin-right: auto; }
  .gw-topo .gw-marca img { width: 32px; height: 32px; }
  .gw-lado { position: fixed; inset: 56px 0 0 0; height: auto; z-index: 15; background: var(--dialog); transform: translateX(-100%); transition: transform .3s; }
  .gw-lado.aberto { transform: none; }
  .gw-lado > .gw-marca { display: none; }
  .gw-main { padding: 16px; gap: 16px; }
  .gw-cab h1 { font-size: 24px; }
  .gw-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .gw-kpi { padding: 12px 14px; }
  .gw-kpi b { font-size: 20px; }
  .gw-tabela th, .gw-tabela td { padding: 10px 16px; }
  .gw-painel-cab, .gw-painel-corpo { padding-left: 16px; padding-right: 16px; }
  .gw-modulo .if-card { padding: 16px; border-radius: 16px; }
}

/* Tema claro nos módulos da extensão: o "vidro branco" (white @ 0.03–0.1) some sobre a superfície clara, e o número grande do
   Resultados é um degradê que começa no branco: os dois viram tokens (regras 1 e 4 do tema claro do design system) */
.gw-tela[data-tema='claro'] .ri-hero b { background: linear-gradient(90deg, #1A1128, #7000E0 55%, #4361EE); -webkit-background-clip: text; background-clip: text; }
.gw-tela[data-tema='claro'] .ri-nums div, .gw-tela[data-tema='claro'] .ri-fogo, .gw-tela[data-tema='claro'] .ri-liga,
.gw-tela[data-tema='claro'] .ri-medalha:not(.ganha), .gw-tela[data-tema='claro'] .ri-post, .gw-tela[data-tema='claro'] .ri-saude,
.gw-tela[data-tema='claro'] .ri-saude-l b, .gw-tela[data-tema='claro'] .rl-oferta blockquote { background: var(--input); }
.gw-tela[data-tema='claro'] .ri-barra, .gw-tela[data-tema='claro'] .rl-trilho, .gw-tela[data-tema='claro'] .rl-pilares i { background: rgba(112, 0, 224, 0.1); }
.gw-tela[data-tema='claro'] .rl-abas button.active { background: rgba(112, 0, 224, 0.8); border-color: transparent; }

/* Tarefas do dono (88universe 0344) */
.gw-tarefa .gw-pe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.gw-tarefa .gw-painel-corpo p { margin: 0; line-height: 1.55; color: var(--t-sub); }
.gw-tarefa.feita, .gw-tarefa.ignorada { opacity: 0.6; }
.gw-prazo { font-size: 12px; font-weight: 700; color: var(--vermelho); } /* token: legível nos dois temas */
.gw-acoes { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 24px 20px; }
@media (max-width: 900px) { .gw-acoes { padding: 0 16px 16px; } } /* breakpoint da escala do design system (600/900) */
/* Ações da tarefa = padrão A do design system: principal = FuturisticDarkButton de cabeçalho (40 de altura, texto 13), secundária =
   botão de contorno com canto 12 e padding 16/12 */
.gw-btn { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px;
  border-radius: 12px; border: 1px solid var(--border); background: transparent; color: var(--t-text); font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; text-decoration: none; transition: background .2s ease-in-out, transform .4s ease-out, box-shadow .4s ease-out; }
.gw-btn:hover { background: var(--hover); }
.gw-btn .material-symbols-outlined { font-size: 18px; }
.gw-btn.p { border: 0; color: #fff !important; letter-spacing: .5px; background: var(--grad); box-shadow: 0 4px 15px rgba(var(--prim-rgb), 0.1); }
.gw-btn.p::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, transparent 10%); transition: background .4s ease-out; }
.gw-btn.p:hover { background: var(--grad); transform: translateY(-2px); box-shadow: 0 6px 25px rgba(var(--prim-rgb), 0.3); }
.gw-btn.p:hover::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, transparent 10%); }
.gw-btn.leve { color: var(--t-dim); }
.gw-item .gw-conta-pilula { margin-left: auto; }

/* Conectar ao Claude e ChatGPT (88 MCP Portal com GaláxIA) */
.gw-passo { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 10px; border-radius: 100px; background: var(--primary); color: #fff; font-size: 13px; font-weight: 700; vertical-align: 2px; }
.gw-texto { color: var(--t-sub); margin: 0; }
.gw-nota { color: var(--t-dim); font-size: 13px; }
.gw-url { display: block; padding: 12px 16px; border-radius: 8px; background: var(--input); border: 1px solid var(--border); color: var(--accent);
  font-family: 'Fira Code', ui-monospace, monospace; font-size: 13px; overflow-wrap: anywhere; user-select: all; }
.gw-acoes0 { display: flex; flex-wrap: wrap; gap: 8px; }
.gw-tela .gw-btn40 { height: 40px; font-size: 13px; }
.gw-chaves, .gw-perguntas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.gw-chaves li, .gw-perguntas li { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 12px; border-radius: 12px; background: var(--input); color: var(--t-sub); font-size: 13px; }
.gw-chaves li span:not(.material-symbols-outlined), .gw-perguntas li span { flex: 1; min-width: 0; }
.gw-chaves .material-symbols-outlined { font-size: 18px; color: var(--accent); }
.gw-passos { margin: 0; padding-left: 22px; list-style: decimal; display: flex; flex-direction: column; gap: 8px; color: var(--t-text); line-height: 1.5; }
.gw-passos li::marker { color: var(--accent); font-weight: 700; }