/* ============================================================
   AJUDA // DESIGN SYSTEM  ·  ajuda-ds.css
   Identidade visual da Ajuda Ecommerce.

   FONTE ÚNICA (hospedado no servidor — sempre puxe daqui):
     <link rel="stylesheet" href="https://ui.ajudaecom.com.br/ajuda-ds.css">
   Comportamentos (máscaras, abas, navbar):
     <script src="https://ui.ajudaecom.com.br/ajuda-ds.js"></script>
   Fonte (Google Fonts):
     <link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Space+Grotesk:wght@400;600;700&display=swap" rel="stylesheet">

   NÃO copie este arquivo para dentro dos apps. Sempre referencie a URL acima,
   para que toda mudança aqui no servidor reflita em todos os apps de uma vez.
   Uso: aplique as classes aj-* (ex.: <button class="aj-btn aj-btn--primary aj-btn--lg">).
   ============================================================ */

/* — TOKENS — */
:root{
  /* — cores núcleo (extraídas do logo) — */
  --aj-lime:       #A0E800;
  --aj-blue:       #004070;
  --aj-white:      #F8F8F8;

  /* — verde: escala — */
  --aj-lime-700:   #6FA200;
  --aj-lime-600:   #84C000;
  --aj-lime-500:   #A0E800;
  --aj-lime-300:   #C6F25C;
  --aj-lime-100:   #ECFBC4;
  --aj-lime-50:    #F6FDE6;

  /* — azul: escala — */
  --aj-blue-900:   #002B4D;
  --aj-blue-800:   #003660;
  --aj-blue-700:   #004070;
  --aj-blue-500:   #1A6AA8;
  --aj-blue-300:   #7FA8C7;
  --aj-blue-100:   #D6E4EF;
  --aj-blue-50:    #EEF4F9;

  /* — neutros — */
  --aj-ink:        #0E1B26;
  --aj-gray-700:   #3C4D5A;
  --aj-gray-500:   #6B7B87;
  --aj-gray-300:   #B4C0C9;
  --aj-gray-100:   #E6EBEF;
  --aj-bg:         #F8F8F8;
  --aj-surface:    #FFFFFF;

  /* — semânticos — */
  --aj-success:    #2E9E5B;
  --aj-warning:    #E0A800;
  --aj-danger:     #D64545;

  /* — tipografia — */
  --aj-font-mono:    "PX Grotesk Mono","Space Mono",ui-monospace,monospace;
  --aj-font-display: "PX Grotesk","Space Grotesk",sans-serif;
  --aj-font-body:    "Space Grotesk",system-ui,sans-serif;

  /* — escala tipográfica (tamanho) — */
  --aj-text-xs: .75rem;  --aj-text-sm: .875rem; --aj-text-base: 1rem;
  --aj-text-lg: 1.25rem; --aj-text-xl: 1.75rem; --aj-text-2xl: 2.5rem;
  --aj-text-3xl: 3.5rem;

  /* — pesos — */
  --aj-w-light:300; --aj-w-regular:400; --aj-w-medium:500;
  --aj-w-semibold:600; --aj-w-bold:700;

  /* — line-height — */
  --aj-lh-tight:1.1; --aj-lh-snug:1.3; --aj-lh-normal:1.6; --aj-lh-relaxed:1.75;

  /* — letter-spacing — */
  --aj-ls-tight:-.02em; --aj-ls-normal:0; --aj-ls-wide:.04em; --aj-ls-mono:.12em;

  /* — botões — */
  --aj-btn-pad-md: 14px 28px;
  --aj-btn-pad-lg: 18px 38px;
  --aj-btn-font-md: var(--aj-text-sm);
  --aj-btn-font-lg: var(--aj-text-base);
  --aj-btn-gap: 10px;
  --aj-btn-radius: var(--aj-r);
  --aj-btn-weight: var(--aj-w-bold);
  --aj-btn-tracking: .01em;

  /* — espaçamento (base 4px) — */
  --aj-1:4px; --aj-2:8px; --aj-3:12px; --aj-4:16px; --aj-5:24px;
  --aj-6:32px; --aj-7:48px; --aj-8:64px; --aj-9:96px;

  /* — raios — */
  --aj-r-sm:2px; --aj-r:4px; --aj-r-lg:8px; --aj-r-pill:999px;

  /* — sombras — */
  --aj-shadow-sm: 0 1px 2px rgba(0,64,112,.08);
  --aj-shadow:    0 4px 16px rgba(0,64,112,.10);
  --aj-shadow-lg: 0 12px 40px rgba(0,64,112,.14);

  /* — borda assinatura — */
  --aj-border: 1.5px solid var(--aj-gray-100);
}

/* — PATTERN (textura //) — */
:root{
  --aj-pat-lime-blue:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzOC4zIiBoZWlnaHQ9IjMzLjgiIHZpZXdCb3g9IjAgMCAzOC4zIDMzLjgiPjxyZWN0IHdpZHRoPSIzOC4zIiBoZWlnaHQ9IjMzLjgiIGZpbGw9IiNBMEU4MDAiLz48cGF0aCBkPSJNLTM4LjMwLDAuMDAgTC0zNi4yNiwwLjAwIEwtNDEuMDksMTYuODMgTC00My4xNCwxNi44MyBaIE0tMzEuODAsMC4wMCBMLTI5Ljc2LDAuMDAgTC0zNC41OSwxNi44MyBMLTM2LjY0LDE2LjgzIFogTTAuMDAsMC4wMCBMMi4wNCwwLjAwIEwtMi43OSwxNi44MyBMLTQuODQsMTYuODMgWiBNNi41MCwwLjAwIEw4LjU0LDAuMDAgTDMuNzEsMTYuODMgTDEuNjYsMTYuODMgWiBNMzguMzAsMC4wMCBMNDAuMzQsMC4wMCBMMzUuNTEsMTYuODMgTDMzLjQ2LDE2LjgzIFogTTQ0LjgwLDAuMDAgTDQ2Ljg0LDAuMDAgTDQyLjAxLDE2LjgzIEwzOS45NiwxNi44MyBaIE0tMjEuNDAsMTYuOTAgTC0xOS4zNiwxNi45MCBMLTI0LjE5LDMzLjczIEwtMjYuMjQsMzMuNzMgWiBNLTE0LjkwLDE2LjkwIEwtMTIuODYsMTYuOTAgTC0xNy42OSwzMy43MyBMLTE5Ljc0LDMzLjczIFogTTE2LjkwLDE2LjkwIEwxOC45NCwxNi45MCBMMTQuMTEsMzMuNzMgTDEyLjA2LDMzLjczIFogTTIzLjQwLDE2LjkwIEwyNS40NCwxNi45MCBMMjAuNjEsMzMuNzMgTDE4LjU2LDMzLjczIFogTTU1LjIwLDE2LjkwIEw1Ny4yNCwxNi45MCBMNTIuNDEsMzMuNzMgTDUwLjM2LDMzLjczIFogTTYxLjcwLDE2LjkwIEw2My43NCwxNi45MCBMNTguOTEsMzMuNzMgTDU2Ljg2LDMzLjczIFoiIGZpbGw9IiMwMDQwNzAiLz48L3N2Zz4=");
  --aj-pat-white-blue:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzOC4zIiBoZWlnaHQ9IjMzLjgiIHZpZXdCb3g9IjAgMCAzOC4zIDMzLjgiPjxyZWN0IHdpZHRoPSIzOC4zIiBoZWlnaHQ9IjMzLjgiIGZpbGw9IiNGOEY4RjgiLz48cGF0aCBkPSJNLTM4LjMwLDAuMDAgTC0zNi4yNiwwLjAwIEwtNDEuMDksMTYuODMgTC00My4xNCwxNi44MyBaIE0tMzEuODAsMC4wMCBMLTI5Ljc2LDAuMDAgTC0zNC41OSwxNi44MyBMLTM2LjY0LDE2LjgzIFogTTAuMDAsMC4wMCBMMi4wNCwwLjAwIEwtMi43OSwxNi44MyBMLTQuODQsMTYuODMgWiBNNi41MCwwLjAwIEw4LjU0LDAuMDAgTDMuNzEsMTYuODMgTDEuNjYsMTYuODMgWiBNMzguMzAsMC4wMCBMNDAuMzQsMC4wMCBMMzUuNTEsMTYuODMgTDMzLjQ2LDE2LjgzIFogTTQ0LjgwLDAuMDAgTDQ2Ljg0LDAuMDAgTDQyLjAxLDE2LjgzIEwzOS45NiwxNi44MyBaIE0tMjEuNDAsMTYuOTAgTC0xOS4zNiwxNi45MCBMLTI0LjE5LDMzLjczIEwtMjYuMjQsMzMuNzMgWiBNLTE0LjkwLDE2LjkwIEwtMTIuODYsMTYuOTAgTC0xNy42OSwzMy43MyBMLTE5Ljc0LDMzLjczIFogTTE2LjkwLDE2LjkwIEwxOC45NCwxNi45MCBMMTQuMTEsMzMuNzMgTDEyLjA2LDMzLjczIFogTTIzLjQwLDE2LjkwIEwyNS40NCwxNi45MCBMMjAuNjEsMzMuNzMgTDE4LjU2LDMzLjczIFogTTU1LjIwLDE2LjkwIEw1Ny4yNCwxNi45MCBMNTIuNDEsMzMuNzMgTDUwLjM2LDMzLjczIFogTTYxLjcwLDE2LjkwIEw2My43NCwxNi45MCBMNTguOTEsMzMuNzMgTDU2Ljg2LDMzLjczIFoiIGZpbGw9IiMwMDQwNzAiLz48L3N2Zz4=");
  --aj-pat-blue-lime:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzOC4zIiBoZWlnaHQ9IjMzLjgiIHZpZXdCb3g9IjAgMCAzOC4zIDMzLjgiPjxyZWN0IHdpZHRoPSIzOC4zIiBoZWlnaHQ9IjMzLjgiIGZpbGw9IiMwMDQwNzAiLz48cGF0aCBkPSJNLTM4LjMwLDAuMDAgTC0zNi4yNiwwLjAwIEwtNDEuMDksMTYuODMgTC00My4xNCwxNi44MyBaIE0tMzEuODAsMC4wMCBMLTI5Ljc2LDAuMDAgTC0zNC41OSwxNi44MyBMLTM2LjY0LDE2LjgzIFogTTAuMDAsMC4wMCBMMi4wNCwwLjAwIEwtMi43OSwxNi44MyBMLTQuODQsMTYuODMgWiBNNi41MCwwLjAwIEw4LjU0LDAuMDAgTDMuNzEsMTYuODMgTDEuNjYsMTYuODMgWiBNMzguMzAsMC4wMCBMNDAuMzQsMC4wMCBMMzUuNTEsMTYuODMgTDMzLjQ2LDE2LjgzIFogTTQ0LjgwLDAuMDAgTDQ2Ljg0LDAuMDAgTDQyLjAxLDE2LjgzIEwzOS45NiwxNi44MyBaIE0tMjEuNDAsMTYuOTAgTC0xOS4zNiwxNi45MCBMLTI0LjE5LDMzLjczIEwtMjYuMjQsMzMuNzMgWiBNLTE0LjkwLDE2LjkwIEwtMTIuODYsMTYuOTAgTC0xNy42OSwzMy43MyBMLTE5Ljc0LDMzLjczIFogTTE2LjkwLDE2LjkwIEwxOC45NCwxNi45MCBMMTQuMTEsMzMuNzMgTDEyLjA2LDMzLjczIFogTTIzLjQwLDE2LjkwIEwyNS40NCwxNi45MCBMMjAuNjEsMzMuNzMgTDE4LjU2LDMzLjczIFogTTU1LjIwLDE2LjkwIEw1Ny4yNCwxNi45MCBMNTIuNDEsMzMuNzMgTDUwLjM2LDMzLjczIFogTTYxLjcwLDE2LjkwIEw2My43NCwxNi45MCBMNTguOTEsMzMuNzMgTDU2Ljg2LDMzLjczIFoiIGZpbGw9IiNBMEU4MDAiLz48L3N2Zz4=");
  --aj-pat-white-lime:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzOC4zIiBoZWlnaHQ9IjMzLjgiIHZpZXdCb3g9IjAgMCAzOC4zIDMzLjgiPjxyZWN0IHdpZHRoPSIzOC4zIiBoZWlnaHQ9IjMzLjgiIGZpbGw9IiNGOEY4RjgiLz48cGF0aCBkPSJNLTM4LjMwLDAuMDAgTC0zNi4yNiwwLjAwIEwtNDEuMDksMTYuODMgTC00My4xNCwxNi44MyBaIE0tMzEuODAsMC4wMCBMLTI5Ljc2LDAuMDAgTC0zNC41OSwxNi44MyBMLTM2LjY0LDE2LjgzIFogTTAuMDAsMC4wMCBMMi4wNCwwLjAwIEwtMi43OSwxNi44MyBMLTQuODQsMTYuODMgWiBNNi41MCwwLjAwIEw4LjU0LDAuMDAgTDMuNzEsMTYuODMgTDEuNjYsMTYuODMgWiBNMzguMzAsMC4wMCBMNDAuMzQsMC4wMCBMMzUuNTEsMTYuODMgTDMzLjQ2LDE2LjgzIFogTTQ0LjgwLDAuMDAgTDQ2Ljg0LDAuMDAgTDQyLjAxLDE2LjgzIEwzOS45NiwxNi44MyBaIE0tMjEuNDAsMTYuOTAgTC0xOS4zNiwxNi45MCBMLTI0LjE5LDMzLjczIEwtMjYuMjQsMzMuNzMgWiBNLTE0LjkwLDE2LjkwIEwtMTIuODYsMTYuOTAgTC0xNy42OSwzMy43MyBMLTE5Ljc0LDMzLjczIFogTTE2LjkwLDE2LjkwIEwxOC45NCwxNi45MCBMMTQuMTEsMzMuNzMgTDEyLjA2LDMzLjczIFogTTIzLjQwLDE2LjkwIEwyNS40NCwxNi45MCBMMjAuNjEsMzMuNzMgTDE4LjU2LDMzLjczIFogTTU1LjIwLDE2LjkwIEw1Ny4yNCwxNi45MCBMNTIuNDEsMzMuNzMgTDUwLjM2LDMzLjczIFogTTYxLjcwLDE2LjkwIEw2My43NCwxNi45MCBMNTguOTEsMzMuNzMgTDU2Ljg2LDMzLjczIFoiIGZpbGw9IiNBMEU4MDAiLz48L3N2Zz4=");
}

/* — COMPONENTES — */
/* ============================================================
   PATTERN // (textura assinatura)
   .aj-pattern--<combo> aplica o pattern como background tileável.
   ============================================================ */
:root{
  --aj-pat-lime-blue:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzOC4zIiBoZWlnaHQ9IjMzLjgiIHZpZXdCb3g9IjAgMCAzOC4zIDMzLjgiPjxyZWN0IHdpZHRoPSIzOC4zIiBoZWlnaHQ9IjMzLjgiIGZpbGw9IiNBMEU4MDAiLz48cGF0aCBkPSJNLTM4LjMwLDAuMDAgTC0zNi4yNiwwLjAwIEwtNDEuMDksMTYuODMgTC00My4xNCwxNi44MyBaIE0tMzEuODAsMC4wMCBMLTI5Ljc2LDAuMDAgTC0zNC41OSwxNi44MyBMLTM2LjY0LDE2LjgzIFogTTAuMDAsMC4wMCBMMi4wNCwwLjAwIEwtMi43OSwxNi44MyBMLTQuODQsMTYuODMgWiBNNi41MCwwLjAwIEw4LjU0LDAuMDAgTDMuNzEsMTYuODMgTDEuNjYsMTYuODMgWiBNMzguMzAsMC4wMCBMNDAuMzQsMC4wMCBMMzUuNTEsMTYuODMgTDMzLjQ2LDE2LjgzIFogTTQ0LjgwLDAuMDAgTDQ2Ljg0LDAuMDAgTDQyLjAxLDE2LjgzIEwzOS45NiwxNi44MyBaIE0tMjEuNDAsMTYuOTAgTC0xOS4zNiwxNi45MCBMLTI0LjE5LDMzLjczIEwtMjYuMjQsMzMuNzMgWiBNLTE0LjkwLDE2LjkwIEwtMTIuODYsMTYuOTAgTC0xNy42OSwzMy43MyBMLTE5Ljc0LDMzLjczIFogTTE2LjkwLDE2LjkwIEwxOC45NCwxNi45MCBMMTQuMTEsMzMuNzMgTDEyLjA2LDMzLjczIFogTTIzLjQwLDE2LjkwIEwyNS40NCwxNi45MCBMMjAuNjEsMzMuNzMgTDE4LjU2LDMzLjczIFogTTU1LjIwLDE2LjkwIEw1Ny4yNCwxNi45MCBMNTIuNDEsMzMuNzMgTDUwLjM2LDMzLjczIFogTTYxLjcwLDE2LjkwIEw2My43NCwxNi45MCBMNTguOTEsMzMuNzMgTDU2Ljg2LDMzLjczIFoiIGZpbGw9IiMwMDQwNzAiLz48L3N2Zz4=");
  --aj-pat-white-blue:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzOC4zIiBoZWlnaHQ9IjMzLjgiIHZpZXdCb3g9IjAgMCAzOC4zIDMzLjgiPjxyZWN0IHdpZHRoPSIzOC4zIiBoZWlnaHQ9IjMzLjgiIGZpbGw9IiNGOEY4RjgiLz48cGF0aCBkPSJNLTM4LjMwLDAuMDAgTC0zNi4yNiwwLjAwIEwtNDEuMDksMTYuODMgTC00My4xNCwxNi44MyBaIE0tMzEuODAsMC4wMCBMLTI5Ljc2LDAuMDAgTC0zNC41OSwxNi44MyBMLTM2LjY0LDE2LjgzIFogTTAuMDAsMC4wMCBMMi4wNCwwLjAwIEwtMi43OSwxNi44MyBMLTQuODQsMTYuODMgWiBNNi41MCwwLjAwIEw4LjU0LDAuMDAgTDMuNzEsMTYuODMgTDEuNjYsMTYuODMgWiBNMzguMzAsMC4wMCBMNDAuMzQsMC4wMCBMMzUuNTEsMTYuODMgTDMzLjQ2LDE2LjgzIFogTTQ0LjgwLDAuMDAgTDQ2Ljg0LDAuMDAgTDQyLjAxLDE2LjgzIEwzOS45NiwxNi44MyBaIE0tMjEuNDAsMTYuOTAgTC0xOS4zNiwxNi45MCBMLTI0LjE5LDMzLjczIEwtMjYuMjQsMzMuNzMgWiBNLTE0LjkwLDE2LjkwIEwtMTIuODYsMTYuOTAgTC0xNy42OSwzMy43MyBMLTE5Ljc0LDMzLjczIFogTTE2LjkwLDE2LjkwIEwxOC45NCwxNi45MCBMMTQuMTEsMzMuNzMgTDEyLjA2LDMzLjczIFogTTIzLjQwLDE2LjkwIEwyNS40NCwxNi45MCBMMjAuNjEsMzMuNzMgTDE4LjU2LDMzLjczIFogTTU1LjIwLDE2LjkwIEw1Ny4yNCwxNi45MCBMNTIuNDEsMzMuNzMgTDUwLjM2LDMzLjczIFogTTYxLjcwLDE2LjkwIEw2My43NCwxNi45MCBMNTguOTEsMzMuNzMgTDU2Ljg2LDMzLjczIFoiIGZpbGw9IiMwMDQwNzAiLz48L3N2Zz4=");
  --aj-pat-blue-lime:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzOC4zIiBoZWlnaHQ9IjMzLjgiIHZpZXdCb3g9IjAgMCAzOC4zIDMzLjgiPjxyZWN0IHdpZHRoPSIzOC4zIiBoZWlnaHQ9IjMzLjgiIGZpbGw9IiMwMDQwNzAiLz48cGF0aCBkPSJNLTM4LjMwLDAuMDAgTC0zNi4yNiwwLjAwIEwtNDEuMDksMTYuODMgTC00My4xNCwxNi44MyBaIE0tMzEuODAsMC4wMCBMLTI5Ljc2LDAuMDAgTC0zNC41OSwxNi44MyBMLTM2LjY0LDE2LjgzIFogTTAuMDAsMC4wMCBMMi4wNCwwLjAwIEwtMi43OSwxNi44MyBMLTQuODQsMTYuODMgWiBNNi41MCwwLjAwIEw4LjU0LDAuMDAgTDMuNzEsMTYuODMgTDEuNjYsMTYuODMgWiBNMzguMzAsMC4wMCBMNDAuMzQsMC4wMCBMMzUuNTEsMTYuODMgTDMzLjQ2LDE2LjgzIFogTTQ0LjgwLDAuMDAgTDQ2Ljg0LDAuMDAgTDQyLjAxLDE2LjgzIEwzOS45NiwxNi44MyBaIE0tMjEuNDAsMTYuOTAgTC0xOS4zNiwxNi45MCBMLTI0LjE5LDMzLjczIEwtMjYuMjQsMzMuNzMgWiBNLTE0LjkwLDE2LjkwIEwtMTIuODYsMTYuOTAgTC0xNy42OSwzMy43MyBMLTE5Ljc0LDMzLjczIFogTTE2LjkwLDE2LjkwIEwxOC45NCwxNi45MCBMMTQuMTEsMzMuNzMgTDEyLjA2LDMzLjczIFogTTIzLjQwLDE2LjkwIEwyNS40NCwxNi45MCBMMjAuNjEsMzMuNzMgTDE4LjU2LDMzLjczIFogTTU1LjIwLDE2LjkwIEw1Ny4yNCwxNi45MCBMNTIuNDEsMzMuNzMgTDUwLjM2LDMzLjczIFogTTYxLjcwLDE2LjkwIEw2My43NCwxNi45MCBMNTguOTEsMzMuNzMgTDU2Ljg2LDMzLjczIFoiIGZpbGw9IiNBMEU4MDAiLz48L3N2Zz4=");
  --aj-pat-white-lime:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzOC4zIiBoZWlnaHQ9IjMzLjgiIHZpZXdCb3g9IjAgMCAzOC4zIDMzLjgiPjxyZWN0IHdpZHRoPSIzOC4zIiBoZWlnaHQ9IjMzLjgiIGZpbGw9IiNGOEY4RjgiLz48cGF0aCBkPSJNLTM4LjMwLDAuMDAgTC0zNi4yNiwwLjAwIEwtNDEuMDksMTYuODMgTC00My4xNCwxNi44MyBaIE0tMzEuODAsMC4wMCBMLTI5Ljc2LDAuMDAgTC0zNC41OSwxNi44MyBMLTM2LjY0LDE2LjgzIFogTTAuMDAsMC4wMCBMMi4wNCwwLjAwIEwtMi43OSwxNi44MyBMLTQuODQsMTYuODMgWiBNNi41MCwwLjAwIEw4LjU0LDAuMDAgTDMuNzEsMTYuODMgTDEuNjYsMTYuODMgWiBNMzguMzAsMC4wMCBMNDAuMzQsMC4wMCBMMzUuNTEsMTYuODMgTDMzLjQ2LDE2LjgzIFogTTQ0LjgwLDAuMDAgTDQ2Ljg0LDAuMDAgTDQyLjAxLDE2LjgzIEwzOS45NiwxNi44MyBaIE0tMjEuNDAsMTYuOTAgTC0xOS4zNiwxNi45MCBMLTI0LjE5LDMzLjczIEwtMjYuMjQsMzMuNzMgWiBNLTE0LjkwLDE2LjkwIEwtMTIuODYsMTYuOTAgTC0xNy42OSwzMy43MyBMLTE5Ljc0LDMzLjczIFogTTE2LjkwLDE2LjkwIEwxOC45NCwxNi45MCBMMTQuMTEsMzMuNzMgTDEyLjA2LDMzLjczIFogTTIzLjQwLDE2LjkwIEwyNS40NCwxNi45MCBMMjAuNjEsMzMuNzMgTDE4LjU2LDMzLjczIFogTTU1LjIwLDE2LjkwIEw1Ny4yNCwxNi45MCBMNTIuNDEsMzMuNzMgTDUwLjM2LDMzLjczIFogTTYxLjcwLDE2LjkwIEw2My43NCwxNi45MCBMNTguOTEsMzMuNzMgTDU2Ljg2LDMzLjczIFoiIGZpbGw9IiNBMEU4MDAiLz48L3N2Zz4=");
}
.aj-pattern{background-repeat:repeat;background-size:48px auto}
.aj-pattern--lime-blue{background-image:var(--aj-pat-lime-blue)}
.aj-pattern--white-blue{background-image:var(--aj-pat-white-blue)}
.aj-pattern--blue-lime{background-image:var(--aj-pat-blue-lime)}
.aj-pattern--white-lime{background-image:var(--aj-pat-white-lime)}
/* ============================================================
   TIPOGRAFIA — classes canônicas (use nos apps)
   Cada nível define família, tamanho, peso, line-height e tracking.
   ============================================================ */
.aj-display{font-family:var(--aj-font-display);font-size:var(--aj-text-3xl);font-weight:var(--aj-w-bold);line-height:var(--aj-lh-tight);letter-spacing:var(--aj-ls-tight);color:var(--aj-blue-700)}
/* números de destaque: use a fonte display (a mono tem zero cortado, ruim em números grandes) */
.aj-num{font-family:var(--aj-font-display);font-weight:var(--aj-w-bold);letter-spacing:-.01em}
.aj-h1{font-family:var(--aj-font-mono);font-size:var(--aj-text-2xl);font-weight:var(--aj-w-bold);line-height:var(--aj-lh-tight);letter-spacing:var(--aj-ls-tight);color:var(--aj-blue-700)}
.aj-h2{font-family:var(--aj-font-mono);font-size:var(--aj-text-xl);font-weight:var(--aj-w-bold);line-height:var(--aj-lh-snug);letter-spacing:var(--aj-ls-tight);color:var(--aj-blue-700)}
.aj-h3{font-family:var(--aj-font-mono);font-size:var(--aj-text-lg);font-weight:var(--aj-w-semibold);line-height:var(--aj-lh-snug);letter-spacing:var(--aj-ls-normal);color:var(--aj-ink)}
.aj-body{font-family:var(--aj-font-body);font-size:var(--aj-text-base);font-weight:var(--aj-w-regular);line-height:var(--aj-lh-normal);letter-spacing:var(--aj-ls-normal);color:var(--aj-gray-700)}
.aj-small{font-family:var(--aj-font-body);font-size:var(--aj-text-sm);font-weight:var(--aj-w-regular);line-height:var(--aj-lh-normal);letter-spacing:var(--aj-ls-normal);color:var(--aj-gray-500)}
.aj-label-txt{font-family:var(--aj-font-mono);font-size:var(--aj-text-xs);font-weight:var(--aj-w-bold);line-height:var(--aj-lh-normal);letter-spacing:var(--aj-ls-mono);text-transform:lowercase;color:var(--aj-lime-700)}
.spec-table,.btn-spec,.aj-table{min-width:480px}
/* botões */
.aj-btn{
  font-family:var(--aj-font-mono);
  font-weight:var(--aj-btn-weight);
  font-size:var(--aj-btn-font-md);
  line-height:1.2;
  padding:var(--aj-btn-pad-md);
  border:none;border-radius:var(--aj-btn-radius);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--aj-btn-gap);
  white-space:nowrap;text-align:center;
  transition:all .15s ease;
  text-transform:lowercase;letter-spacing:var(--aj-btn-tracking);
}
/* tamanhos */
.aj-btn--md{padding:var(--aj-btn-pad-md);font-size:var(--aj-btn-font-md)}
.aj-btn--lg{padding:var(--aj-btn-pad-lg);font-size:var(--aj-btn-font-lg)}
/* variantes de cor */
/* variantes de cor — PRINCIPAL = primary (verde cheio). Use sempre o primary;
   só use as outras quando houver hierarquia real (ação principal vs. alternativa). */
.aj-btn--primary{background:var(--aj-lime-500);color:var(--aj-blue-900)}
.aj-btn--primary:hover{background:var(--aj-lime-600);transform:translateY(-1px);box-shadow:var(--aj-shadow)}
/* primary-soft: o "segundo verde" — para a 2ª ação quando ambas são verdes */
.aj-btn--primary-soft{background:var(--aj-lime-100);color:var(--aj-blue-900);box-shadow:inset 0 0 0 1.5px var(--aj-lime-300)}
.aj-btn--primary-soft:hover{background:var(--aj-lime-300);color:var(--aj-blue-900);transform:translateY(-1px);box-shadow:var(--aj-shadow)}
.aj-btn--secondary{background:var(--aj-blue-700);color:var(--aj-white)}
.aj-btn--secondary:hover{background:var(--aj-blue-800);transform:translateY(-1px);box-shadow:var(--aj-shadow)}
.aj-btn--ghost{background:transparent;color:var(--aj-blue-700);box-shadow:inset 0 0 0 1.5px var(--aj-blue-700)}
.aj-btn--ghost:hover{background:var(--aj-blue-50)}
.aj-btn:disabled,.aj-btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
/* ícone dentro do botão: linha fina, alinhado, tamanho consistente */
.aj-btn svg{width:18px;height:18px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.aj-btn--lg svg{width:20px;height:20px}
/* badges */
.aj-badge{display:inline-flex;align-items:center;justify-content:center;font-family:var(--aj-font-mono);font-size:var(--aj-text-xs);font-weight:700;padding:4px 10px;border-radius:var(--aj-r-pill);text-transform:lowercase;white-space:nowrap;line-height:1.2}
.aj-badge--lime{background:var(--aj-lime-100);color:var(--aj-lime-700)}
.aj-badge--blue{background:var(--aj-blue-100);color:var(--aj-blue-700)}
.aj-badge--gray{background:var(--aj-gray-100);color:var(--aj-gray-700)}
/* input */
.aj-field{display:flex;flex-direction:column;gap:6px;max-width:320px;width:100%}
.aj-label{font-family:var(--aj-font-mono);font-size:var(--aj-text-xs);color:var(--aj-gray-700);text-transform:lowercase}
.aj-input{
  font-family:var(--aj-font-body);font-size:var(--aj-text-base);
  padding:11px 14px;border:1.5px solid var(--aj-gray-300);border-radius:var(--aj-r);
  background:var(--aj-surface);transition:border .15s,box-shadow .15s;
}
.aj-input:focus{outline:none;border-color:var(--aj-lime-500);box-shadow:0 0 0 3px var(--aj-lime-100)}
/* card */
.aj-card{
  background:var(--aj-surface);border:var(--aj-border);border-radius:var(--aj-r-lg);
  padding:var(--aj-5);box-shadow:var(--aj-shadow-sm);max-width:340px;
  border-top:3px solid var(--aj-lime-500);
}
.aj-card h3{font-family:var(--aj-font-mono);font-size:var(--aj-text-lg);color:var(--aj-blue-700);margin-bottom:8px}
.aj-card p{color:var(--aj-gray-500);font-size:var(--aj-text-sm)}
.demo .aj-btn{justify-content:center;width:100%}
.aj-field,.aj-card{max-width:100%}
.aj-navbar{gap:var(--aj-3)}
.aj-navbar .spacer{flex-basis:100%;height:0}
.demo .aj-select,.demo .aj-textarea{max-width:100%}
/* ============================================================
   FOCO ACESSÍVEL — anel padrão para navegação por teclado
   ============================================================ */
.aj-btn:focus-visible,.aj-input:focus-visible,.aj-select:focus-visible,
.aj-textarea:focus-visible,.aj-check input:focus-visible+.aj-check__box,
.aj-radio input:focus-visible+.aj-radio__dot,.aj-switch input:focus-visible+.aj-switch__track,
.aj-tab:focus-visible{outline:none;box-shadow:0 0 0 3px var(--aj-lime-100),0 0 0 4.5px var(--aj-lime-500)}
.aj-btn:active{transform:translateY(0);filter:brightness(.97)}
/* ============================================================
   SELECT
   ============================================================ */
.aj-select{
  font-family:var(--aj-font-body);font-size:var(--aj-text-base);
  padding:11px 38px 11px 14px;border:1.5px solid var(--aj-gray-300);
  border-radius:var(--aj-r);background:var(--aj-surface);color:var(--aj-ink);
  cursor:pointer;appearance:none;width:100%;max-width:320px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23004070' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
  transition:border .15s,box-shadow .15s;
}
.aj-select:focus{outline:none;border-color:var(--aj-lime-500);box-shadow:0 0 0 3px var(--aj-lime-100)}
.aj-select:disabled{opacity:.5;cursor:not-allowed;background-color:var(--aj-gray-100)}
/* ============================================================
   TEXTAREA + estados de validação (input/textarea/select)
   ============================================================ */
.aj-textarea{
  font-family:var(--aj-font-body);font-size:var(--aj-text-base);
  padding:11px 14px;border:1.5px solid var(--aj-gray-300);border-radius:var(--aj-r);
  background:var(--aj-surface);width:100%;max-width:320px;min-height:88px;resize:vertical;
  transition:border .15s,box-shadow .15s;
}
.aj-textarea:focus{outline:none;border-color:var(--aj-lime-500);box-shadow:0 0 0 3px var(--aj-lime-100)}
.is-error .aj-input,.is-error .aj-select,.is-error .aj-textarea,
.aj-input.is-error,.aj-select.is-error,.aj-textarea.is-error{border-color:var(--aj-danger);box-shadow:0 0 0 3px rgba(214,69,69,.12)}
.is-success .aj-input,.aj-input.is-success{border-color:var(--aj-success);box-shadow:0 0 0 3px rgba(46,158,91,.12)}
.aj-hint{font-family:var(--aj-font-mono);font-size:var(--aj-text-xs);color:var(--aj-gray-500)}
.aj-hint--error{color:var(--aj-danger)}
/* ============================================================
   CHECKBOX
   ============================================================ */
.aj-check{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:var(--aj-text-sm);color:var(--aj-gray-700)}
.aj-check input{position:absolute;opacity:0;width:0;height:0}
.aj-check__box{width:20px;height:20px;border:1.5px solid var(--aj-gray-300);border-radius:var(--aj-r-sm);background:var(--aj-surface);display:inline-flex;align-items:center;justify-content:center;transition:all .15s}
.aj-check__box::after{content:"";width:10px;height:6px;border-left:2px solid var(--aj-blue-900);border-bottom:2px solid var(--aj-blue-900);transform:rotate(-45deg) scale(0);transition:transform .15s;margin-top:-2px}
.aj-check input:checked+.aj-check__box{background:var(--aj-lime-500);border-color:var(--aj-lime-500)}
.aj-check input:checked+.aj-check__box::after{transform:rotate(-45deg) scale(1)}
.aj-check input:disabled+.aj-check__box{opacity:.5}
/* ============================================================
   RADIO
   ============================================================ */
.aj-radio{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:var(--aj-text-sm);color:var(--aj-gray-700)}
.aj-radio input{position:absolute;opacity:0;width:0;height:0}
.aj-radio__dot{width:20px;height:20px;border:1.5px solid var(--aj-gray-300);border-radius:50%;background:var(--aj-surface);display:inline-flex;align-items:center;justify-content:center;transition:all .15s}
.aj-radio__dot::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--aj-blue-700);transform:scale(0);transition:transform .15s}
.aj-radio input:checked+.aj-radio__dot{border-color:var(--aj-blue-700)}
.aj-radio input:checked+.aj-radio__dot::after{transform:scale(1)}
/* ============================================================
   SWITCH / TOGGLE
   ============================================================ */
.aj-switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:var(--aj-text-sm);color:var(--aj-gray-700)}
.aj-switch input{position:absolute;opacity:0;width:0;height:0}
.aj-switch__track{width:42px;height:24px;border-radius:var(--aj-r-pill);background:var(--aj-gray-300);position:relative;transition:background .2s}
.aj-switch__track::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s}
.aj-switch input:checked+.aj-switch__track{background:var(--aj-lime-500)}
.aj-switch input:checked+.aj-switch__track::after{transform:translateX(18px)}
/* ============================================================
   TABS
   ============================================================ */
.aj-tabs{display:flex;gap:var(--aj-1);border-bottom:1.5px solid var(--aj-gray-100)}
.aj-tab{font-family:var(--aj-font-mono);font-size:var(--aj-text-sm);font-weight:700;padding:10px 16px;background:none;border:none;cursor:pointer;color:var(--aj-gray-500);border-bottom:2px solid transparent;margin-bottom:-1.5px;transition:all .15s;text-transform:lowercase}
.aj-tab:hover{color:var(--aj-blue-700)}
.aj-tab.is-active{color:var(--aj-blue-700);border-bottom-color:var(--aj-lime-500)}
/* ============================================================
   ALERTA / NOTIFICAÇÃO
   ============================================================ */
.aj-alert{display:flex;gap:12px;padding:var(--aj-4);border-radius:var(--aj-r);border-left:3px solid;font-size:var(--aj-text-sm);background:var(--aj-surface);box-shadow:var(--aj-shadow-sm)}
.aj-alert__title{font-family:var(--aj-font-mono);font-weight:700;margin-bottom:2px}
.aj-alert--info{border-color:var(--aj-blue-500);background:var(--aj-blue-50)}
.aj-alert--info .aj-alert__title{color:var(--aj-blue-700)}
.aj-alert--success{border-color:var(--aj-success);background:#EAF6EF}
.aj-alert--success .aj-alert__title{color:var(--aj-success)}
.aj-alert--warning{border-color:var(--aj-warning);background:#FBF3DC}
.aj-alert--warning .aj-alert__title{color:#8A6A00}
.aj-alert--danger{border-color:var(--aj-danger);background:#FBEAEA}
.aj-alert--danger .aj-alert__title{color:var(--aj-danger)}
/* ============================================================
   TOOLTIP
   ============================================================ */
.aj-tooltip{position:relative;display:inline-flex;border-bottom:1px dotted var(--aj-gray-500);cursor:help}
.aj-tooltip__pop{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);background:var(--aj-blue-900);color:#fff;font-family:var(--aj-font-mono);font-size:var(--aj-text-xs);padding:6px 10px;border-radius:var(--aj-r);white-space:nowrap;opacity:0;pointer-events:none;transition:all .15s;z-index:10}
.aj-tooltip__pop::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--aj-blue-900)}
.aj-tooltip:hover .aj-tooltip__pop,.aj-tooltip:focus-within .aj-tooltip__pop{opacity:1;transform:translateX(-50%) translateY(0)}
/* ============================================================
   AVATAR
   ============================================================ */
.aj-avatar{width:40px;height:40px;border-radius:50%;background:var(--aj-blue-700);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-family:var(--aj-font-mono);font-weight:700;font-size:var(--aj-text-sm)}
.aj-avatar--lime{background:var(--aj-lime-500);color:var(--aj-blue-900)}
.aj-avatar--lg{width:56px;height:56px;font-size:var(--aj-text-lg)}
/* ============================================================
   TABELA DE DADOS
   ============================================================ */
.aj-table{width:100%;border-collapse:collapse;font-size:var(--aj-text-sm)}
.aj-table th{font-family:var(--aj-font-mono);font-size:var(--aj-text-xs);text-transform:lowercase;letter-spacing:.06em;color:var(--aj-gray-500);text-align:left;padding:10px 12px;border-bottom:1.5px solid var(--aj-gray-300)}
.aj-table td{padding:12px;border-bottom:var(--aj-border);color:var(--aj-gray-700)}
.aj-table tbody tr:hover{background:var(--aj-blue-50)}
/* ============================================================
   PROGRESS + SPINNER + SKELETON
   ============================================================ */
.aj-progress{height:8px;background:var(--aj-gray-100);border-radius:var(--aj-r-pill);overflow:hidden}
.aj-progress__bar{height:100%;background:var(--aj-lime-500);border-radius:var(--aj-r-pill);transition:width .3s}
.aj-spinner{width:24px;height:24px;border:3px solid var(--aj-gray-100);border-top-color:var(--aj-lime-500);border-radius:50%;animation:aj-spin .7s linear infinite}
.aj-skeleton{background:linear-gradient(90deg,var(--aj-gray-100) 25%,var(--aj-gray-300) 37%,var(--aj-gray-100) 63%);background-size:400% 100%;animation:aj-shimmer 1.4s ease infinite;border-radius:var(--aj-r)}
/* ============================================================
   MODAL / DIALOG (estático para demo; toggle via :target ou JS)
   ============================================================ */
.aj-modal{background:var(--aj-surface);border-radius:var(--aj-r-lg);box-shadow:var(--aj-shadow-lg);max-width:420px;border-top:3px solid var(--aj-lime-500);overflow:hidden}
.aj-modal__head{padding:var(--aj-5) var(--aj-5) var(--aj-3);font-family:var(--aj-font-mono);font-weight:700;font-size:var(--aj-text-lg);color:var(--aj-blue-700)}
.aj-modal__body{padding:0 var(--aj-5) var(--aj-5);color:var(--aj-gray-700);font-size:var(--aj-text-sm)}
.aj-modal__foot{padding:var(--aj-4) var(--aj-5);background:var(--aj-bg);display:flex;gap:var(--aj-3);justify-content:flex-end}
/* ============================================================
   NAVBAR
   ============================================================ */
.aj-navbar{display:flex;align-items:center;gap:var(--aj-5);padding:var(--aj-4) var(--aj-5);background:var(--aj-blue-700);border-radius:var(--aj-r-lg);flex-wrap:wrap}
.aj-navbar img{height:24px}
.aj-navbar a{font-family:var(--aj-font-mono);font-size:var(--aj-text-sm);color:var(--aj-blue-100);text-decoration:none;transition:color .15s}
.aj-navbar a:hover,.aj-navbar a.is-active{color:var(--aj-lime-500)}
.aj-navbar .spacer{flex:1}

/* ============================================================
   PAINEL (APP SHELL) — sidebar + header + conteúdo.
   Estrutura:
   <div class="aj-shell">
     <aside class="aj-side">… marca + nav …</aside>
     <div class="aj-main">
       <header class="aj-topbar">…</header>
       <main class="aj-content">… ferramenta …</main>
     </div>
   </div>
   ============================================================ */
.aj-shell{display:grid;grid-template-columns:264px 1fr;min-height:100vh}
.aj-side{background:var(--aj-blue-900);color:var(--aj-blue-100);display:flex;flex-direction:column;padding:var(--aj-5) 0;position:sticky;top:0;height:100vh;overflow-y:auto}
.aj-side__brand{padding:0 var(--aj-5) var(--aj-5);display:flex;align-items:center}
.aj-side__brand img{height:24px}
.aj-side__nav{flex:1;padding:0 var(--aj-3)}
/* grupo de categoria (accordion) */
.aj-navgroup{margin-bottom:var(--aj-2)}
.aj-navgroup__head{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:none;cursor:pointer;
  font-family:var(--aj-font-mono);font-size:var(--aj-text-xs);font-weight:700;text-transform:lowercase;letter-spacing:.06em;
  color:var(--aj-blue-300);padding:10px var(--aj-3);border-radius:var(--aj-r);transition:color .15s}
.aj-navgroup__head:hover{color:var(--aj-lime-500)}
.aj-navgroup__head svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;transition:transform .2s}
.aj-navgroup.is-open .aj-navgroup__head svg{transform:rotate(180deg)}
.aj-navgroup__items{display:none;flex-direction:column;gap:2px;padding:4px 0 8px}
.aj-navgroup.is-open .aj-navgroup__items{display:flex}
/* item de ferramenta */
.aj-navitem{display:flex;align-items:center;gap:10px;padding:10px var(--aj-3);border-radius:var(--aj-r);
  font-family:var(--aj-font-body);font-size:var(--aj-text-sm);color:var(--aj-blue-100);text-decoration:none;transition:background .15s,color .15s}
.aj-navitem:hover{background:rgba(255,255,255,.06);color:#fff}
.aj-navitem.is-active{background:var(--aj-lime-500);color:var(--aj-blue-900);font-weight:600}
.aj-navitem svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
/* área principal */
.aj-main{display:flex;flex-direction:column;min-width:0}
.aj-topbar{display:flex;align-items:center;gap:var(--aj-4);padding:var(--aj-3) var(--aj-6);background:var(--aj-surface);border-bottom:var(--aj-border);position:sticky;top:0;z-index:20}
.aj-topbar__brand{display:flex;flex-direction:column;gap:3px;min-width:0}
.aj-topbar__brand img{height:16px;width:auto}
.aj-topbar__title{font-family:var(--aj-font-mono);font-weight:700;font-size:var(--aj-text-sm);color:var(--aj-blue-700);text-transform:lowercase;letter-spacing:.01em;line-height:1}
.aj-topbar .spacer{flex:1}
.aj-content{padding:var(--aj-6);flex:1}
/* botão hambúrguer (só aparece no mobile) */
.aj-burger{display:none;background:none;border:none;cursor:pointer;padding:6px;color:var(--aj-blue-700)}
.aj-burger svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
/* overlay do menu no mobile */
.aj-side__overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:40}

/* — ANIMAÇÕES — */
@keyframes aj-spin{to{transform:rotate(360deg)}}
@keyframes aj-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* ============================================================
   APP AVULSO — header (appbar) + footer.
   Para ferramentas que vivem sozinhas (sem o painel).
   <header class="aj-appbar"><img class="aj-appbar__logo">…<span class="aj-appbar__title">…</span></header>
   <footer class="aj-footer">…</footer>
   ============================================================ */
.aj-appbar{background:var(--aj-blue-700);padding:var(--aj-4) 0}
.aj-appbar__in{max-width:960px;margin:0 auto;padding:0 var(--aj-6);display:flex;align-items:center;gap:var(--aj-4);flex-wrap:wrap}
.aj-appbar__logo{height:22px;width:auto;flex-shrink:0}
.aj-appbar__title{font-family:var(--aj-font-mono);font-weight:700;font-size:var(--aj-text-sm);color:var(--aj-lime-500);text-transform:lowercase;letter-spacing:.01em;min-width:0;overflow-wrap:anywhere}
.aj-footer{background:var(--aj-blue-900);color:var(--aj-blue-300);margin-top:var(--aj-8)}
.aj-footer__in{max-width:960px;margin:0 auto;padding:var(--aj-6) var(--aj-5);display:flex;align-items:center;gap:var(--aj-5);flex-wrap:wrap}
.aj-footer__logo{height:22px;flex-shrink:0}
.aj-footer__links{display:flex;gap:var(--aj-5);flex-wrap:wrap}
.aj-footer__links a{font-family:var(--aj-font-body);font-size:var(--aj-text-sm);color:var(--aj-blue-100);text-decoration:none;transition:color .15s}
.aj-footer__links a:hover{color:var(--aj-lime-500)}
.aj-footer__copy{font-family:var(--aj-font-mono);font-size:var(--aj-text-xs);color:var(--aj-blue-300);margin-left:auto}

/* ============================================================
   RESPONSIVO MOBILE — aplica-se a todo app por padrão.
   Mobile-first: componentes empilham, ocupam largura total e
   respeitam área mínima de toque de 44px (acessibilidade).
   ============================================================ */
@media(max-width:640px){
  /* botões e campos: largura total e toque confortável */
  .aj-btn{width:100%;justify-content:center;min-height:48px}
  .aj-input,.aj-select,.aj-textarea{width:100%;max-width:100%;min-height:48px}
  .aj-field{max-width:100%}
  /* QUALQUER grupo de botões empilha no mobile e ocupa largura total.
     Cobre .aj-btn-row, o rodapé do modal e divs flex soltas com botões. */
  .aj-btn-row,.aj-modal__foot,.aj-btn-group{display:flex;flex-direction:column;align-items:stretch;gap:var(--aj-3)}
  .aj-btn-row>.aj-btn,.aj-modal__foot>.aj-btn,.aj-btn-group>.aj-btn{width:100%}
  /* alvos de toque ≥44px */
  .aj-tab{min-height:44px}
  .aj-check,.aj-radio,.aj-switch{min-height:44px}
  /* navbar quebra e links ficam tocáveis */
  .aj-navbar{flex-wrap:wrap;gap:var(--aj-3)}
  .aj-navbar .spacer{flex-basis:100%;height:0}
  .aj-navbar a{padding:11px 0;display:inline-block}
  /* card e modal ocupam a tela com folga */
  .aj-card,.aj-modal{max-width:100%}
  /* footer empilha no mobile */
  .aj-footer__in{flex-direction:column;align-items:flex-start;gap:var(--aj-4)}
  .aj-footer__copy{margin-left:0}
  /* tabelas largas rolam horizontalmente em vez de estourar */
  .aj-table{display:block;overflow-x:auto;white-space:nowrap}
  /* PAINEL no mobile: sidebar vira gaveta deslizante */
  .aj-shell{grid-template-columns:1fr}
  .aj-side{position:fixed;top:0;left:0;z-index:50;width:280px;max-width:85vw;height:100vh;
    transform:translateX(-100%);transition:transform .25s ease}
  .aj-shell.is-open .aj-side{transform:translateX(0)}
  .aj-shell.is-open .aj-side__overlay{display:block}
  .aj-burger{display:inline-flex}
  .aj-topbar{padding:var(--aj-4)}
  .aj-content{padding:var(--aj-4)}
}
/* telas muito estreitas (≤360px) */
@media(max-width:360px){
  .aj-btn--lg{padding:16px 20px;font-size:var(--aj-text-sm)}
  .aj-display{font-size:var(--aj-text-2xl)}
}

/* utilitário: linha de botões que empilha no mobile (use em vez de divs soltas) */
.aj-btn-row{display:flex;gap:var(--aj-3);flex-wrap:wrap}

.aj-email{font-family:var(--aj-font-body);word-break:break-all}