/* Quillon color accents, 2026-10-20.
 * Color-only layer: no geometry, layout, opacity, transform, or event changes.
 * Card identity follows the existing asset icon gradient, never card order.
 * Deliberately loaded after the theme bundle to retain asset identity in themes.
 */

/* Existing navigation, including the mobile menu and More drawer. */
#root nav:has(svg:is(.lucide-home, .lucide-house)) {
  background: linear-gradient(180deg, #091321, #0b1020) !important;
  border-color: #263650 !important;
  box-shadow: 0 0 18px #2067a017 !important;
}
#root nav:has(svg:is(.lucide-home, .lucide-house)) button:has(> svg) {
  --q-menu-color: #a9bad3;
  color: #d5deee !important;
}
#root nav:has(svg:is(.lucide-home, .lucide-house)) button:has(> svg:is(.lucide-home, .lucide-house)) { --q-menu-color: #a89bff; }
#root nav:has(svg:is(.lucide-home, .lucide-house)) button:has(> svg.lucide-send) { --q-menu-color: #60baff; }
#root nav:has(svg:is(.lucide-home, .lucide-house)) button:has(> svg.lucide-arrow-down-up) { --q-menu-color: #45e0c0; }
#root nav:has(svg:is(.lucide-home, .lucide-house)) button:has(> svg.lucide-search) { --q-menu-color: #7cbbff; }
#root nav:has(svg:is(.lucide-home, .lucide-house)) button:has(> svg.lucide-pickaxe) { --q-menu-color: #ffc156; }
#root nav:has(svg:is(.lucide-home, .lucide-house)) button:has(> svg.lucide-boxes) { --q-menu-color: #f6c755; }
#root nav:has(svg:is(.lucide-home, .lucide-house)) button:has(> svg.lucide-map-pin) { --q-menu-color: #ffd067; }
#root nav:has(svg:is(.lucide-home, .lucide-house)) button:has(> svg.lucide-building) { --q-menu-color: #edc16f; }
#root nav:has(svg:is(.lucide-home, .lucide-house)) button:has(> svg:is(.lucide-video, .lucide-message-square)) { --q-menu-color: #55e1ef; }
#root nav:has(svg:is(.lucide-home, .lucide-house)) button:has(> svg.lucide-mail) { --q-menu-color: #ffd36d; }
#root nav:has(svg:is(.lucide-home, .lucide-house)) button:has(> svg:is(.lucide-chart-column, .lucide-chart-no-axes-column-increasing, .lucide-bar-chart-3)) { --q-menu-color: #ce91ff; }
#root nav:has(svg:is(.lucide-home, .lucide-house)) button:has(> svg.lucide-download) { --q-menu-color: #45baff; }
#root nav:has(svg:is(.lucide-home, .lucide-house)) button:has(> svg.lucide-magnet) { --q-menu-color: #d895ff; }
#root nav:has(svg:is(.lucide-home, .lucide-house)) button:has(> svg.lucide-settings) { --q-menu-color: #bbcede; }
#root nav:has(svg:is(.lucide-home, .lucide-house)) button > svg {
  color: var(--q-menu-color) !important;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--q-menu-color) 38%, transparent)) !important;
}
#root nav:has(svg:is(.lucide-home, .lucide-house)) button:hover > span {
  color: #f3f7ff !important;
}
#root nav:has(svg:is(.lucide-home, .lucide-house)) button:has(> svg:is(.lucide-boxes, .lucide-map-pin, .lucide-chart-column, .lucide-download)) > span {
  color: var(--q-menu-color) !important;
}
/* Preserve the selected button's existing border width and dimensions. */
#root nav:has(svg:is(.lucide-home, .lucide-house)) button:has(> .ml-auto.rounded-full) {
  background: linear-gradient(120deg, color-mix(in srgb, var(--q-menu-color) 19%, #0d1220), #101626) !important;
  border-color: color-mix(in srgb, var(--q-menu-color) 56%, transparent) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--q-menu-color) 22%, transparent), 0 0 14px color-mix(in srgb, var(--q-menu-color) 12%, transparent) !important;
}
#root nav:has(svg:is(.lucide-home, .lucide-house)) button > .ml-auto.rounded-full {
  background: var(--q-menu-color) !important;
}

/* Only WalletCardWithGraph roots match this structure; chart modals do not. */
#root .group.select-none:has(> .flex.items-start.justify-between > .bg-gradient-to-br) {
  --q-asset: #a889ff;
  --q-card-top: #241e3c;
  --q-card-bottom: #111425;
  background: radial-gradient(ellipse at 15% 0%, color-mix(in srgb, var(--q-asset) 24%, transparent), transparent 65%), linear-gradient(145deg, var(--q-card-top), var(--q-card-bottom)) !important;
  border-color: color-mix(in srgb, var(--q-asset) 70%, #172032) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--q-asset) 45%, transparent), 0 0 14px color-mix(in srgb, var(--q-asset) 11%, transparent) !important;
}
#root .group.select-none:has(> .flex.items-start.justify-between > .from-amber-400) {
  --q-asset: #f5c34f;
  --q-card-top: #352331;
  --q-card-bottom: #191528;
}
#root .group.select-none:has(> .flex.items-start.justify-between > .to-cyan-500) {
  --q-asset: #22d8ee;
  --q-card-top: #073641;
  --q-card-bottom: #0b1b2b;
}
#root .group.select-none:has(> .flex.items-start.justify-between > .to-emerald-500) {
  --q-asset: #2fe4a3;
  --q-card-top: #073d31;
  --q-card-bottom: #0b2528;
}
#root .group.select-none:has(> .flex.items-start.justify-between > .from-purple-400) {
  --q-asset: #bd72f5;
  --q-card-top: #32204d;
  --q-card-bottom: #18172e;
}
#root .group.select-none:has(> .flex.items-start.justify-between > .from-cyan-400) {
  --q-asset: #52baff;
  --q-card-top: #153556;
  --q-card-bottom: #101d32;
}
#root .group.select-none:has(> .flex.items-start.justify-between > .from-orange-400) {
  --q-asset: #ffac40;
  --q-card-top: #402c20;
  --q-card-bottom: #211a24;
}
#root .group.select-none:has(> .flex.items-start.justify-between > .to-indigo-500) {
  --q-asset: #8990ff;
  --q-card-top: #26294d;
  --q-card-bottom: #171a32;
}
/* The maintenance opacity/cursor and all button disabled states are retained. */
#root .group.select-none:has(> .flex.items-start.justify-between > .bg-gradient-to-br) > .flex.items-start.justify-between > .text-right > .text-gray-400 {
  color: #c2ccdd !important;
}
#root .group.select-none:has(> .flex.items-start.justify-between > .bg-gradient-to-br) button.bg-blue-500\/20 {
  background: linear-gradient(180deg, #087fce, #095799) !important;
  border-color: #36bfff !important;
  color: #f0faff !important;
  box-shadow: inset 0 1px 0 #73d3ff55, 0 0 10px #149df025 !important;
}
#root .group.select-none:has(> .flex.items-start.justify-between > .bg-gradient-to-br) button.bg-purple-500\/20 {
  background: linear-gradient(180deg, #7b28b7, #51217d) !important;
  border-color: #be68f1 !important;
  color: #f9eeff !important;
  box-shadow: inset 0 1px 0 #dfabff40, 0 0 10px #ae38e820 !important;
}
#root .group.select-none:has(> .flex.items-start.justify-between > .bg-gradient-to-br) button.bg-green-500\/20 {
  background: linear-gradient(180deg, #087b52, #07513c) !important;
  border-color: #24d896 !important;
  color: #e5fff4 !important;
}