/* onaiagents — pixel theme: a rich blue+yellow dark palette applied to the
   Pixelarticons icon set and shared buttons/pills. Loaded after each page's own
   styles so it wins. Additive + tasteful; does not rewrite page layout. */
:root{
  /* 13-colour palette — blues + golds lead, jewel accents support */
  --px-blue:#4C82F7; --px-blue-2:#6EA8FF; --px-sky:#38BDF8; --px-cyan:#22D3EE;
  --px-teal:#2DD4BF; --px-indigo:#818CF8; --px-violet:#A78BFA; --px-purple:#C084FC;
  --px-yellow:#FFD23F; --px-gold:#FBBF24; --px-amber:#F59E0B;
  --px-rose:#FB7185; --px-green:#34D399;
  --px-glow-blue:0 0 0 3px rgba(76,130,247,.18);
}

/* Pixelarticons render crisp — keep their pixel grid sharp and centred. */
.pxi{ vertical-align:-.14em; flex-shrink:0; }

/* ── Credits pills → warm gold accent everywhere ── */
.pg-credits,.credits,.cr{
  border-color:rgba(251,191,36,.42)!important;
  background:linear-gradient(180deg,rgba(251,191,36,.10),rgba(251,191,36,.03))!important;
}
.pg-credits .pxi,.credits .pxi,.cr .pxi,
.pg-credits svg,.credits svg,.cr svg{ color:var(--px-gold)!important; }
.pg-credits:hover,.credits:hover,.cr:hover{ border-color:var(--px-yellow)!important; box-shadow:0 8px 22px -10px rgba(251,191,36,.55)!important; }

/* Credits-pill popover: gold balance, blue buy button */
.oa-cp-lbl{ color:var(--px-gold)!important; }
.oa-cp-bal svg{ color:var(--px-gold)!important; }
.oa-cp-buy{ background:var(--px-blue)!important; color:#04122E!important; }
.oa-cp-buy:hover{ background:var(--px-blue-2)!important; box-shadow:0 12px 26px -12px rgba(76,130,247,.6)!important; }

/* ── Multicolour icon accents: rotate the palette so the UI feels alive ── */
/* Pricing "included tools" strip */
.tools .tool:nth-child(7n+1) svg{ color:var(--px-blue)!important; }
.tools .tool:nth-child(7n+2) svg{ color:var(--px-yellow)!important; }
.tools .tool:nth-child(7n+3) svg{ color:var(--px-cyan)!important; }
.tools .tool:nth-child(7n+4) svg{ color:var(--px-violet)!important; }
.tools .tool:nth-child(7n+5) svg{ color:var(--px-green)!important; }
.tools .tool:nth-child(7n+6) svg{ color:var(--px-gold)!important; }
.tools .tool:nth-child(7n+7) svg{ color:var(--px-sky)!important; }

/* Pricing free-tier feature icons */
.free-feats li:nth-child(4n+1) svg{ color:var(--px-blue)!important; }
.free-feats li:nth-child(4n+2) svg{ color:var(--px-yellow)!important; }
.free-feats li:nth-child(4n+3) svg{ color:var(--px-cyan)!important; }
.free-feats li:nth-child(4n+4) svg{ color:var(--px-violet)!important; }
.free-pill{ background:linear-gradient(135deg,var(--px-blue),var(--px-sky))!important; color:#04122E!important; }

/* Plan feature check-marks → gold, list bullets stay readable */
.card li svg{ color:var(--px-gold)!important; }

/* ── Buttons: primary leans blue, keep light option too ── */
.btn-primary,.result-btn.primary,.composer-send,.send-btn{
  background:linear-gradient(180deg,var(--px-blue-2),var(--px-blue))!important; color:#04122E!important;
  border-color:transparent!important;
}
.btn-primary:hover,.result-btn.primary:hover{ box-shadow:0 12px 30px -12px rgba(76,130,247,.65)!important; }
.btn-primary .pxi,.result-btn.primary .pxi{ color:#04122E!important; }

/* Send / generate arrow buttons glow blue */
#genBtn,.gen-btn,.composer-send{ box-shadow:var(--px-glow-blue); }

/* Nav link icons pick up a soft blue */
.pg-links a .pxi{ color:var(--px-blue-2); }

/* Prompt hub shell and common controls */
.menu-btn .pxi,.searchbar .pxi{ width:20px!important;height:20px!important;color:var(--px-blue-2); }
.searchbar .pxi{ filter:drop-shadow(0 0 8px rgba(56,189,248,.24)); }
.btn .pxi,.lk .pxi,.link .pxi,.tb-btn .pxi,.sbtn .pxi{ width:16px!important;height:16px!important; }
.btn-line .pxi,.lk .pxi,.link .pxi{ color:var(--px-blue); }
.tabs button .pxi{ width:15px!important;height:15px!important;color:var(--px-gold);margin-right:5px;vertical-align:-2px; }
.tabs button:nth-child(2) .pxi{ color:var(--px-cyan); }
.tabs button:nth-child(3) .pxi{ color:var(--px-rose); }

/* Pixel studio badges and admin navigation */
.chip{ display:inline-flex!important;align-items:center;gap:6px; }
.chip .pxi{ width:14px!important;height:14px!important;color:var(--px-gold);filter:drop-shadow(0 0 7px rgba(251,191,36,.34)); }
.navpill .pxi{ width:15px!important;height:15px!important;color:var(--px-blue-2);opacity:.95; }
.navpill:nth-child(3n+2) .pxi{ color:var(--px-gold); }
.navpill:nth-child(3n+3) .pxi{ color:var(--px-cyan); }
.navpill.on .pxi{ color:var(--px-yellow);filter:drop-shadow(0 0 8px rgba(251,191,36,.38)); }
.tb-btn .pxi{ color:currentColor; }

/* KPI/card icon capsules: colorful pixel pack treatment */
.kpi .ic,.kpi .k-ic,.ccard .ic{
  background:linear-gradient(135deg,rgba(76,130,247,.18),rgba(251,191,36,.12))!important;
  border:1px solid rgba(76,130,247,.22);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 10px 24px -18px rgba(76,130,247,.8);
}
.kpi .ic .pxi,.kpi .k-ic .pxi,.ccard .ic .pxi{ width:20px!important;height:20px!important;color:var(--px-blue-2); }
.kpis .kpi:nth-child(4n+2) .ic .pxi,.kpis .kpi:nth-child(4n+2) .k-ic .pxi{ color:var(--px-green); }
.kpis .kpi:nth-child(4n+3) .ic .pxi,.kpis .kpi:nth-child(4n+3) .k-ic .pxi{ color:var(--px-gold); }
.kpis .kpi:nth-child(4n+4) .ic .pxi,.kpis .kpi:nth-child(4n+4) .k-ic .pxi{ color:var(--px-cyan); }
.card h3 .pxi,.panel h3 .pxi,.card h2 .pxi{
  width:16px!important;height:16px!important;color:var(--px-sky);
  filter:drop-shadow(0 0 7px rgba(56,189,248,.28));
}
.card h2>span{ display:inline-flex;align-items:center;gap:8px; }
.panel:nth-child(4n+2) h3 .pxi,.card:nth-child(4n+2) h3 .pxi{ color:var(--px-gold); }
.panel:nth-child(4n+3) h3 .pxi,.card:nth-child(4n+3) h3 .pxi{ color:var(--px-green); }
.panel:nth-child(4n+4) h3 .pxi,.card:nth-child(4n+4) h3 .pxi{ color:var(--px-violet); }

/* Prompt Studio / repo cards: subtle pixel-NFT framing */
.post,.repo,.pcard{
  box-shadow:0 18px 50px -44px rgba(56,189,248,.75);
}
.post .badge,.repo p,.pcard .pcat,.pcard .seo span{
  border-color:rgba(76,130,247,.28)!important;
  background:linear-gradient(180deg,rgba(76,130,247,.1),rgba(251,191,36,.04))!important;
}
.thumb-empty .pxi,.pimg.empty .pxi,.blank .pxi,.noimg .pxi{ color:var(--px-gold); }
.oa-cp-caret{ width:12px!important;height:12px!important;color:var(--px-gold); }
.oa-cp-buy .pxi{ width:16px!important;height:16px!important;color:#04122E!important; }

@media(prefers-reduced-motion:reduce){ .pxi{ transition:none; } }