/* ============================================================
   DachOS Design System — tokens e componentes
   Carregado APENAS em páginas que adotam o novo sistema.
   Todos os tokens são prefixados com --d-* para evitar colisão
   com variables.css do HuliOS. Todos os componentes vivem
   dentro do escopo .dachos (não há estilos globais).
   ============================================================ */

/* ---- Tokens globais — definidos SÓ em :root para que html[data-theme="light"] ---- */
/*      possa sobrescrever via cascade. Qualquer .dachos wrapper herda via cascade.   ---- */
:root,
:root[data-theme="dark"],
.dachos[data-theme="dark"] {
  /* Neutros */
  --d-ink-0: #05060a;
  --d-ink-1: #0a0c14;
  --d-ink-2: #0f1220;
  --d-ink-3: #161a2b;
  --d-ink-4: #1e2238;
  --d-ink-5: #2a2f48;

  /* Foreground */
  --d-fg-0: #f4f5fa;
  --d-fg-1: #c8ccd9;
  --d-fg-2: #8a90a8;
  --d-fg-3: #5a607a;
  --d-fg-4: #3a3f55;

  /* Bordas */
  --d-border-subtle:  rgba(255, 255, 255, 0.06);
  --d-border-default: rgba(255, 255, 255, 0.10);
  --d-border-strong:  rgba(255, 255, 255, 0.18);
  --d-border-neon:    rgba(0, 255, 163, 0.45);

  /* Neon accents */
  --d-neon-green:       #00ffa3;
  --d-neon-green-dim:   #00c27c;
  --d-neon-green-glow:  rgba(0, 255, 163, 0.35);

  --d-neon-magenta:      #ff2e7e;
  --d-neon-magenta-dim:  #c41e5e;
  --d-neon-magenta-glow: rgba(255, 46, 126, 0.35);

  --d-neon-amber:      #ffb700;
  --d-neon-amber-dim:  #c78d00;
  --d-neon-amber-glow: rgba(255, 183, 0, 0.35);

  --d-neon-cyan:      #00e5ff;
  --d-neon-cyan-dim:  #00a8bd;
  --d-neon-cyan-glow: rgba(0, 229, 255, 0.30);

  --d-neon-violet:      #a78bfa;
  --d-neon-violet-glow: rgba(167, 139, 250, 0.30);

  /* Status */
  --d-status-queued:    #5a607a;
  --d-status-running:   #00e5ff;
  --d-status-success:   #00ffa3;
  --d-status-failed:    #ff2e7e;
  --d-status-timeout:   #ffb700;
  --d-status-cancelled: #5a607a;

  /* Money */
  --d-money-positive: #00ffa3;
  --d-money-negative: #ff2e7e;
  --d-money-neutral:  #c8ccd9;

  /* Glass */
  --d-glass-1: rgba(15, 18, 32, 0.60);
  --d-glass-2: rgba(22, 26, 43, 0.72);
  --d-glass-3: rgba(30, 34, 56, 0.80);
  --d-glass-border: rgba(255, 255, 255, 0.08);
  --d-glass-blur: saturate(140%) blur(18px);

  /* Sombras */
  --d-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
  --d-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.30);
  --d-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.40);
  --d-shadow-xl: 0 32px 80px rgba(0, 0, 0, 0.65), 0 4px 16px rgba(0, 0, 0, 0.45);

  --d-glow-green:   0 0 0 1px rgba(0,255,163,0.25), 0 0 24px rgba(0,255,163,0.20);
  --d-glow-magenta: 0 0 0 1px rgba(255,46,126,0.25), 0 0 24px rgba(255,46,126,0.20);
  --d-glow-amber:   0 0 0 1px rgba(255,183,0,0.25), 0 0 24px rgba(255,183,0,0.20);
  --d-glow-cyan:    0 0 0 1px rgba(0,229,255,0.25), 0 0 24px rgba(0,229,255,0.20);

  --d-inset-highlight: inset 0 1px 0 rgba(255,255,255,0.06);
  --d-inset-highlight-strong: inset 0 1px 0 rgba(255,255,255,0.10);

  /* Gradiente + textura */
  --d-gradient-vignette: radial-gradient(ellipse at 50% -20%, rgba(0,255,163,0.06) 0%, transparent 60%),
                         radial-gradient(ellipse at 100% 100%, rgba(255,46,126,0.04) 0%, transparent 50%),
                         var(--d-ink-1);

  --d-texture-grid: repeating-linear-gradient(
      0deg,
      rgba(255,255,255,0.015) 0px,
      rgba(255,255,255,0.015) 1px,
      transparent 1px,
      transparent 32px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.015) 0px,
      rgba(255,255,255,0.015) 1px,
      transparent 1px,
      transparent 32px
    );

  /* Fontes */
  --d-font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --d-font-body:    'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --d-font-mono:    'JetBrains Mono', 'SF Mono', Consolas, 'Liberation Mono', monospace;
  --d-font-jp:      'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;

  /* Escala tipográfica */
  --d-fs-display: 42px;
  --d-fs-h1:      32px;
  --d-fs-h2:      24px;
  --d-fs-h3:      18px;
  --d-fs-h4:      15px;
  --d-fs-body:    14px;
  --d-fs-body-sm: 13px;
  --d-fs-caption: 12px;
  --d-fs-micro:   11px;
  --d-fs-nano:    10px;
  --d-fs-data-lg: 28px;
  --d-fs-data:    14px;
  --d-fs-data-sm: 12px;

  /* Spacing / Radii / Motion */
  --d-space-1:  4px;
  --d-space-2:  8px;
  --d-space-3:  12px;
  --d-space-4:  16px;
  --d-space-5:  20px;
  --d-space-6:  24px;
  --d-space-7:  32px;
  --d-space-8:  40px;
  --d-space-9:  48px;
  --d-space-10: 64px;
  --d-space-11: 80px;
  --d-space-12: 96px;

  --d-radius-sm:  4px;
  --d-radius-md:  6px;
  --d-radius-lg:  10px;
  --d-radius-xl:  14px;
  --d-radius-2xl: 20px;
  --d-radius-full: 9999px;

  --d-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --d-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --d-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --d-dur-instant: 80ms;
  --d-dur-fast:    160ms;
  --d-dur-normal:  220ms;
  --d-dur-slow:    360ms;

  --d-ff-tabular: "tnum" 1, "lnum" 1, "zero" 1;
}

/* ============================================================
   Paleta LIGHT — responde a html[data-theme="light"]
   Baseada no DS original (ink branco, fg preto, neons escurecidos
   para ter contraste AAA sobre fundo claro).
   ============================================================ */
:root[data-theme="light"],
.dachos[data-theme="light"] {
  /* Neutros (inverte a escala) */
  --d-ink-0: #ffffff;
  --d-ink-1: #fafafa;
  --d-ink-2: #f4f4f2;
  --d-ink-3: #ebebe6;
  --d-ink-4: #dedcd3;
  --d-ink-5: #c0bcae;

  /* Foreground (inverte) */
  --d-fg-0: #0a0c14;
  --d-fg-1: #2a2f48;
  --d-fg-2: #5a607a;
  --d-fg-3: #8a90a8;
  --d-fg-4: #b8bcc9;

  /* Bordas (sombras escuras ao invés de claras) */
  --d-border-subtle:  rgba(0, 0, 0, 0.06);
  --d-border-default: rgba(0, 0, 0, 0.10);
  --d-border-strong:  rgba(0, 0, 0, 0.18);
  --d-border-neon:    rgba(0, 157, 96, 0.45);

  /* Neons escurecidos para contraste AAA sobre bg claro */
  --d-neon-green:       #009d60;
  --d-neon-green-dim:   #006b42;
  --d-neon-green-glow:  rgba(0, 157, 96, 0.25);

  --d-neon-magenta:      #d61965;
  --d-neon-magenta-dim:  #9c1048;
  --d-neon-magenta-glow: rgba(214, 25, 101, 0.25);

  --d-neon-amber:      #c78400;
  --d-neon-amber-dim:  #8f5e00;
  --d-neon-amber-glow: rgba(199, 132, 0, 0.25);

  --d-neon-cyan:      #0090a8;
  --d-neon-cyan-dim:  #006777;
  --d-neon-cyan-glow: rgba(0, 144, 168, 0.25);

  --d-neon-violet:      #7c3aed;
  --d-neon-violet-glow: rgba(124, 58, 237, 0.25);

  /* Status (reaproveitam neons escurecidos) */
  --d-status-queued:    #8a90a8;
  --d-status-running:   #0090a8;
  --d-status-success:   #009d60;
  --d-status-failed:    #d61965;
  --d-status-timeout:   #c78400;
  --d-status-cancelled: #8a90a8;

  /* Money */
  --d-money-positive:   #009d60;
  --d-money-negative:   #d61965;
  --d-money-neutral:    #2a2f48;

  /* Glass (branco translúcido) */
  --d-glass-1: rgba(255, 255, 255, 0.65);
  --d-glass-2: rgba(250, 250, 250, 0.80);
  --d-glass-3: rgba(244, 244, 242, 0.90);
  --d-glass-border: rgba(0, 0, 0, 0.06);

  /* Sombras suaves (azul-escuro com alpha baixo) */
  --d-shadow-sm:   0 1px 2px rgba(12, 15, 30, 0.08);
  --d-shadow-md:   0 4px 12px rgba(12, 15, 30, 0.10), 0 1px 2px rgba(12, 15, 30, 0.06);
  --d-shadow-lg:   0 16px 40px rgba(12, 15, 30, 0.14), 0 2px 8px rgba(12, 15, 30, 0.08);
  --d-shadow-xl:   0 32px 80px rgba(12, 15, 30, 0.18), 0 4px 16px rgba(12, 15, 30, 0.10);

  /* Glows com neons escurecidos */
  --d-glow-green:   0 0 0 1px rgba(0,157,96,0.25), 0 0 24px rgba(0,157,96,0.18);
  --d-glow-magenta: 0 0 0 1px rgba(214,25,101,0.25), 0 0 24px rgba(214,25,101,0.18);
  --d-glow-amber:   0 0 0 1px rgba(199,132,0,0.25), 0 0 24px rgba(199,132,0,0.18);
  --d-glow-cyan:    0 0 0 1px rgba(0,144,168,0.25), 0 0 24px rgba(0,144,168,0.18);

  /* Inset highlight (agora branco puro — destaque sobre superfície clara) */
  --d-inset-highlight: inset 0 1px 0 rgba(255,255,255,0.80);
  --d-inset-highlight-strong: inset 0 1px 0 rgba(255,255,255,1);

  /* Gradiente + textura adaptados */
  --d-gradient-vignette: radial-gradient(ellipse at 50% -20%, rgba(0,157,96,0.06) 0%, transparent 60%),
                         radial-gradient(ellipse at 100% 100%, rgba(214,25,101,0.04) 0%, transparent 50%),
                         var(--d-ink-1);

  --d-texture-grid: repeating-linear-gradient(
      0deg,
      rgba(0,0,0,0.02) 0px,
      rgba(0,0,0,0.02) 1px,
      transparent 1px,
      transparent 32px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(0,0,0,0.02) 0px,
      rgba(0,0,0,0.02) 1px,
      transparent 1px,
      transparent 32px
    );
}

/* ============================================================
   Re-alias de tokens HuliOS → DachOS (dentro de .dachos scope)
   Faz com que todo o CSS legado (variables.css, base.css,
   components.css) e inline var(--accent) etc. no JS resolvam
   para cores DachOS automaticamente dentro do wrapper.
   ============================================================ */
.dachos {
  /* Backgrounds */
  --bg-primary:   var(--d-ink-1);
  --bg-secondary: var(--d-ink-2);
  --bg-tertiary:  var(--d-ink-3);
  --bg-input:     var(--d-ink-2);
  --bg-hover:     var(--d-ink-3);
  --bg-active:    var(--d-ink-4);

  /* Foreground */
  --text-primary:   var(--d-fg-0);
  --text-secondary: var(--d-fg-1);
  --text-muted:     var(--d-fg-3);
  --text-link:      var(--d-neon-cyan);

  /* Borders */
  --border:         var(--d-border-default);
  --border-light:   var(--d-border-subtle);
  --border-focus:   var(--d-neon-cyan);

  /* Accents */
  --accent:         var(--d-neon-cyan);
  --accent-hover:   var(--d-neon-cyan);
  --accent-subtle:  rgba(0, 229, 255, 0.15);

  /* Semantic */
  --success:      var(--d-neon-green);
  --success-bg:   rgba(0, 255, 163, 0.15);
  --warning:      var(--d-neon-amber);
  --warning-bg:   rgba(255, 183, 0, 0.15);
  --error:        var(--d-neon-magenta);
  --error-bg:     rgba(255, 46, 126, 0.15);
  --running:      var(--d-neon-cyan);
  --running-bg:   rgba(0, 229, 255, 0.15);
  --purple:       var(--d-neon-violet);
  --purple-bg:    rgba(167, 139, 250, 0.15);

  /* Execute button (ações primárias) */
  --execute:        var(--d-neon-green);
  --execute-hover:  var(--d-neon-green);
  --execute-border: rgba(0, 255, 163, 0.45);
  --execute-glow:   rgba(0, 255, 163, 0.35);

  /* Shadows */
  --shadow-sm: var(--d-shadow-sm);
  --shadow-md: var(--d-shadow-md);
  --shadow-lg: var(--d-shadow-lg);
  --shadow-xl: var(--d-shadow-xl);

  /* Fontes */
  --font-ui:   var(--d-font-display);
  --font-mono: var(--d-font-mono);
}

/* ============================================================
   Wrapper
   ============================================================ */
.dachos {
  font-family: var(--d-font-body);
  font-size: var(--d-fs-body);
  color: var(--d-fg-0);
  background: var(--d-ink-1);
  background-image: var(--d-texture-grid);
  border: 1px solid var(--d-border-default);
  border-radius: var(--d-radius-xl);
  padding: var(--d-space-6);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   Typography primitives
   ============================================================ */
.dachos .dachos-label {
  font-family: var(--d-font-mono);
  font-size: var(--d-fs-micro);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--d-fg-2);
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}

.dachos .dachos-jp-accent {
  font-family: var(--d-font-jp);
  font-size: var(--d-fs-nano);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--d-fg-3);
}

.dachos .dachos-mono {
  font-family: var(--d-font-mono);
  font-feature-settings: var(--d-ff-tabular);
}

/* Page head */
.dachos .dachos-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--d-space-4);
  margin: 0 0 var(--d-space-5);
  padding-bottom: var(--d-space-4);
  border-bottom: 1px solid var(--d-border-subtle);
}

.dachos .dachos-page-head .head-left { display: flex; flex-direction: column; gap: 6px; }
.dachos .dachos-page-head .head-right { display: flex; align-items: center; gap: 8px; }

.dachos .dachos-page-head h1 {
  font-family: var(--d-font-display);
  font-size: var(--d-fs-h1);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--d-fg-0);
  margin: 0;
}

.dachos .dachos-page-sub {
  font-family: var(--d-font-mono);
  font-size: var(--d-fs-micro);
  color: var(--d-fg-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ============================================================
   Botões
   ============================================================ */
.dachos .dachos-btn {
  font-family: var(--d-font-display);
  font-size: var(--d-fs-body-sm);
  font-weight: 600;
  border-radius: var(--d-radius-md);
  padding: 8px 14px;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
  letter-spacing: -0.005em;
  transition: background var(--d-dur-fast) var(--d-ease-out),
              color var(--d-dur-fast) var(--d-ease-out),
              filter var(--d-dur-fast) var(--d-ease-out),
              transform var(--d-dur-instant) var(--d-ease-out);
}
.dachos .dachos-btn:active { transform: scale(0.98); }

.dachos .dachos-btn-primary {
  background: var(--d-neon-green);
  color: var(--d-ink-0);
  box-shadow: 0 0 0 1px rgba(0,255,163,0.35),
              0 0 18px rgba(0,255,163,0.25),
              inset 0 1px 0 rgba(255,255,255,0.25);
}
.dachos .dachos-btn-primary:hover { filter: brightness(1.1); }

.dachos .dachos-btn-secondary {
  background: var(--d-ink-3);
  color: var(--d-fg-0);
  border-color: var(--d-border-default);
  box-shadow: var(--d-inset-highlight);
}
.dachos .dachos-btn-secondary:hover { background: var(--d-ink-4); }

.dachos .dachos-btn-ghost {
  background: transparent;
  color: var(--d-fg-1);
  border: 1px solid transparent;
}
.dachos .dachos-btn-ghost:hover { background: var(--d-ink-3); color: var(--d-fg-0); }

.dachos .dachos-btn-sm { padding: 4px 8px; font-size: var(--d-fs-caption); }
.dachos .dachos-btn-icon { padding: 0; width: 32px; height: 32px; justify-content: center; }

/* ============================================================
   Cards
   ============================================================ */
.dachos .dachos-card {
  background: var(--d-ink-2);
  border: 1px solid var(--d-border-default);
  border-radius: var(--d-radius-lg);
  box-shadow: var(--d-shadow-md), var(--d-inset-highlight);
  padding: var(--d-space-4);
}
.dachos .dachos-card.pad-lg { padding: var(--d-space-5); }

/* ============================================================
   KPI
   ============================================================ */
.dachos .dachos-kpi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0; /* permite shrink em grid auto-fit sem vazar */
}

.dachos .dachos-kpi .label-k {
  font-family: var(--d-font-mono);
  font-size: var(--d-fs-nano);
  color: var(--d-fg-2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
}

.dachos .dachos-kpi .val {
  font-family: var(--d-font-mono);
  font-size: var(--d-fs-data-lg);
  font-weight: 500;
  font-feature-settings: var(--d-ff-tabular);
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin-top: 4px;
  color: var(--d-fg-0);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dachos .dachos-kpi .delta {
  font-family: var(--d-font-mono);
  font-size: var(--d-fs-micro);
  font-weight: 500;
  min-height: 16px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.dachos .dachos-kpi .delta.pos { color: var(--d-neon-green); }
.dachos .dachos-kpi .delta.neg { color: var(--d-neon-magenta); }

/* ============================================================
   Badges
   ============================================================ */
.dachos .dachos-b {
  font-family: var(--d-font-mono);
  font-size: var(--d-fs-nano);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 3px 8px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1;
}
.dachos .dachos-b .dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.dachos .b-queued    { background: rgba(90,96,122,0.15); color: var(--d-fg-2); }
.dachos .b-running   { background: rgba(0,229,255,0.12); color: var(--d-neon-cyan); }
.dachos .b-running .dot { animation: d-pulse 1.6s ease-in-out infinite; }
.dachos .b-success   { background: rgba(0,255,163,0.12); color: var(--d-neon-green); }
.dachos .b-failed    { background: rgba(255,46,126,0.12); color: var(--d-neon-magenta); }
.dachos .b-timeout   { background: rgba(255,183,0,0.12); color: var(--d-neon-amber); }
.dachos .b-cancelled { background: rgba(90,96,122,0.10); color: var(--d-fg-3); }
.dachos .b-tag       { background: var(--d-ink-3); color: var(--d-fg-1); text-transform: lowercase; letter-spacing: 0; }

@keyframes d-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ============================================================
   Tabela
   ============================================================ */
.dachos .dachos-tbl {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--d-font-mono);
  font-feature-settings: var(--d-ff-tabular);
}
.dachos .dachos-tbl th,
.dachos .dachos-tbl td {
  padding: 10px 12px;
  font-size: var(--d-fs-caption);
  text-align: left;
  border-bottom: 1px solid var(--d-border-subtle);
  white-space: nowrap;
}
.dachos .dachos-tbl th {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--d-fg-3);
  font-weight: 600;
  padding-top: 8px;
  padding-bottom: 8px;
  cursor: pointer;
  user-select: none;
}
.dachos .dachos-tbl th:hover { color: var(--d-fg-1); }
.dachos .dachos-tbl td.num { text-align: right; color: var(--d-fg-0); }
.dachos .dachos-tbl td.dim { color: var(--d-fg-2); }
.dachos .dachos-tbl tbody tr:hover td { background: rgba(255,255,255,0.02); }

/* ============================================================
   Inputs
   ============================================================ */
.dachos .dachos-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dachos .dachos-field label {
  font-family: var(--d-font-mono);
  font-size: var(--d-fs-nano);
  color: var(--d-fg-2);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.dachos .dachos-inp {
  font-family: var(--d-font-body);
  font-size: var(--d-fs-body-sm);
  background: var(--d-ink-2);
  border: 1px solid var(--d-border-default);
  border-radius: var(--d-radius-md);
  padding: 9px 12px;
  color: var(--d-fg-0);
  outline: none;
  transition: border-color var(--d-dur-fast), box-shadow var(--d-dur-fast);
}
.dachos .dachos-inp.mono { font-family: var(--d-font-mono); font-feature-settings: var(--d-ff-tabular); }
.dachos .dachos-inp:focus {
  border-color: rgba(0, 229, 255, 0.55);
  box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.12);
}
.dachos .dachos-inp::placeholder { color: var(--d-fg-3); }

/* ============================================================
   Toolbar
   ============================================================ */
.dachos .dachos-toolbar {
  display: flex;
  align-items: flex-end;
  gap: var(--d-space-3);
  flex-wrap: wrap;
  margin-bottom: var(--d-space-5);
}
.dachos .dachos-toolbar .spacer { flex: 1; }

/* ============================================================
   Pulse dot
   ============================================================ */
.dachos .dachos-pulse-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
}
.dachos .dachos-pulse-dot.on { animation: d-pulse-ring 1.6s ease-in-out infinite; }
@keyframes d-pulse-ring {
  0%   { box-shadow: 0 0 0 0 currentColor; }
  70%  { box-shadow: 0 0 0 6px rgba(0,229,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,229,255,0); }
}