/* ==========================================================================
   AINATION GLOBAL MATTE OBSIDIAN & COFFEE WHITE DESIGN SYSTEM
   - Unified theme for Homepage & Console (/dashboard, /token, /channel, /log)
   - Restores 100% native Bento Grid dividers & connecting lines
   - Badass isometric cyber-crystal logo styling
   ========================================================================== */

/* 1. Global CSS Variables */
:root,
html,
html.light,
html.dark,
body {
  --background: #080706 !important;
  --foreground: #F5F2EB !important;
  --card: #0E0C0A !important;
  --card-foreground: #F5F2EB !important;
  --popover: #0E0C0A !important;
  --popover-foreground: #F5F2EB !important;
  --primary: #F5F2EB !important;
  --primary-foreground: #080706 !important;
  --secondary: #14110C !important;
  --secondary-foreground: #F5F2EB !important;
  --muted: #14110C !important;
  --muted-foreground: #DFD9CE !important;
  --accent: #14110C !important;
  --accent-foreground: #F5F2EB !important;
  --destructive-foreground: #F5F2EB !important;
  --border: rgba(240, 236, 228, 0.18) !important;
  --input: rgba(240, 236, 228, 0.18) !important;
  --ring: #F5F2EB !important;

  /* Console Sidebar */
  --sidebar: #080706 !important;
  --sidebar-foreground: #F5F2EB !important;
  --sidebar-primary: #F5F2EB !important;
  --sidebar-primary-foreground: #080706 !important;
  --sidebar-accent: #14110C !important;
  --sidebar-accent-foreground: #F5F2EB !important;
  --sidebar-border: rgba(240, 236, 228, 0.14) !important;
  --sidebar-ring: #00f5ff !important;

  --color-border: rgba(240, 236, 228, 0.18) !important;
  --color-muted-foreground: #DFD9CE !important;
}

/* 2. Global Page Backgrounds */
body,
#root,
html {
  background-color: #080706 !important;
  color: #F5F2EB !important;
}

main,
aside,
[data-sidebar="sidebar"],
[data-sidebar="wrapper"],
div[class*="min-h-screen"],
div[class*="min-h-svh"],
nav[class*="sidebar"] {
  background-color: #080706 !important;
  color: #F5F2EB !important;
}

/* 3. General Cards and Containers (excluding bento grid) */
.bg-card,
.bg-card\/50,
div[class*="bg-card"],
div[data-slot="card"],
section[class*="border"] {
  background-color: #0E0C0A !important;
  border-color: rgba(240, 236, 228, 0.16) !important;
}

div[class*="rounded-2xl"][class*="border"],
div[class*="rounded-xl"][class*="border"]:not(.grid):not([class*="gap-px"]),
div[class*="rounded-lg"][class*="border"]:not([class*="grid"]) {
  background-color: #0E0C0A !important;
  border-color: rgba(240, 236, 228, 0.16) !important;
}

/* 4. Hairline Coffee Borders */
.border,
.border-border,
.border-border\/40,
.border-border\/50,
.border-border\/60,
div[class*="border-border"],
[data-sidebar="border"],
hr {
  border-color: rgba(240, 236, 228, 0.16) !important;
}

/* 5. Typography */
body, p, label, li,
h1:not([class*="text-transparent"]):not([class*="bg-clip-text"]),
h2:not([class*="text-transparent"]):not([class*="bg-clip-text"]),
h3:not([class*="text-transparent"]):not([class*="bg-clip-text"]),
h4:not([class*="text-transparent"]):not([class*="bg-clip-text"]),
.text-foreground,
.text-foreground\/80,
.text-foreground\/90,
[data-slot="card-title"] {
  color: #F5F2EB !important;
}

span:not([class*="text-transparent"]):not([class*="bg-clip-text"]):not([class*="badge"]) {
  color: inherit;
}

.text-muted-foreground,
.text-muted-foreground\/80,
.text-muted-foreground\/70,
.text-muted-foreground\/60,
.text-muted-foreground\/45,
[data-slot="card-description"] {
  color: #DFD9CE !important;
}

/* ==========================================================================
   6. BENTO GRID: REVEAL 1PX HAIRLINE DIVIDERS & CARD STRUCTURE
   ========================================================================== */
/* The parent container background forms the crisp 1px dividing lines */
div.grid.gap-px,
div[class*="border-border/40"][class*="bg-border/40"] {
  background-color: rgba(240, 236, 228, 0.22) !important;
  border: 1px solid rgba(240, 236, 228, 0.22) !important;
}

/* Individual Bento Cards */
div.grid.gap-px > div {
  background-color: #0A0807 !important;
  transition: background-color 0.25s ease !important;
}

div.grid.gap-px > div:hover {
  background-color: #14110C !important;
}

/* Card 3 (Global Coverage): Hairline connecting lines */
div.grid.gap-px div.h-px,
div.grid.gap-px div[class*="bg-border"],
div.h-px.flex-1 {
  background-color: rgba(240, 236, 228, 0.25) !important;
}

/* Bento Badges 01, 02, 03, 04 */
div.grid.gap-px span[class*="tabular-nums"] {
  background-color: #14110C !important;
  border: 1px solid rgba(240, 236, 228, 0.25) !important;
  color: #DFD9CE !important;
}

/* Card 1 (Lightning Fast): Model Pills */
div.grid.gap-px div.grid-cols-3 > div {
  border: 1px solid rgba(240, 236, 228, 0.16) !important;
  background-color: #120F0C !important;
  color: #DFD9CE !important;
}

div.grid.gap-px div.grid-cols-3 > div:hover {
  border-color: #00f5ff !important;
  background-color: rgba(0, 245, 255, 0.08) !important;
  color: #F5F2EB !important;
}

/* Card 4 (Developer Friendly): Overlapping Circular Avatar Badges */
div.grid.gap-px div[class*="-space-x-2"] > div {
  border-color: #0A0807 !important;
  background: #1A1612 !important;
  color: #F5F2EB !important;
}

/* 4 Feature Icons below Bento Grid (High Performance, Transparent Billing, etc.) */
div.mt-12 div.size-12 {
  background-color: #14110C !important;
  border: 1px solid rgba(240, 236, 228, 0.18) !important;
  color: #F5F2EB !important;
}

/* ==========================================================================
   7. CONSOLE STYLING (Sidebar, Tables, Inputs, Modals)
   ========================================================================== */
[data-sidebar="menu-button"],
[data-sidebar="menu-sub-button"] {
  color: #DFD9CE !important;
}
[data-sidebar="menu-button"]:hover,
[data-sidebar="menu-button"][data-active="true"],
[data-sidebar="menu-sub-button"]:hover,
[data-sidebar="menu-sub-button"][data-active="true"] {
  background-color: #14110C !important;
  color: #F5F2EB !important;
}

table {
  background-color: #0E0C0A !important;
  border-collapse: separate !important;
  border-color: rgba(240, 236, 228, 0.16) !important;
}

thead, thead tr, thead th {
  background-color: #14110C !important;
  color: #DFD9CE !important;
  border-bottom: 1px solid rgba(240, 236, 228, 0.16) !important;
}

tbody tr {
  background-color: #0E0C0A !important;
  border-bottom: 1px solid rgba(240, 236, 228, 0.1) !important;
}

tbody tr:hover {
  background-color: #14110C !important;
}

tbody td {
  color: #F5F2EB !important;
  border-bottom: 1px solid rgba(240, 236, 228, 0.08) !important;
}

input, textarea, select {
  background-color: #0E0C0A !important;
  border-color: rgba(240, 236, 228, 0.2) !important;
  color: #F5F2EB !important;
}

input:focus, textarea:focus, select:focus {
  border-color: #F5F2EB !important;
  outline: none !important;
}

div[role="dialog"],
div[data-slot="dialog-content"],
div[role="menu"],
div[data-slot="popover-content"] {
  background-color: #0E0C0A !important;
  border: 1px solid rgba(240, 236, 228, 0.2) !important;
  color: #F5F2EB !important;
}

/* ==========================================================================
   8. BADASS HEADER EMBLEM & BRANDING
   ========================================================================== */
header a.group div.shrink-0,
nav a.group div.shrink-0 {
  width: 32px !important;
  height: 32px !important;
  transition: transform 0.2s ease !important;
}

header a.group img,
nav a.group img,
img[alt="logo"] {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 6px rgba(0, 245, 255, 0.45)) !important;
  transition: transform 0.2s ease, filter 0.2s ease !important;
}

header a.group:hover img,
nav a.group:hover img {
  transform: scale(1.08) !important;
  filter: drop-shadow(0 0 12px rgba(0, 245, 255, 0.8)) !important;
}

/* Buttons */
a[href*="sign-up"][data-slot="button"],
button[data-slot="button"].bg-primary,
a[data-slot="button"].bg-primary {
  background-color: #F5F2EB !important;
  color: #080706 !important;
  font-weight: 800 !important;
  border: 1px solid #F5F2EB !important;
}

a[href*="pricing"][data-slot="button"],
button[data-slot="button"].bg-secondary,
a[data-slot="button"].bg-secondary {
  background-color: #14110C !important;
  color: #F5F2EB !important;
  border: 1px solid rgba(240, 236, 228, 0.3) !important;
}

/* Purge Foreign Links */
footer a[href*="QuantumNous"],
footer a[href*="new-api"],
a[href*="cherry-ai.com"],
a[href*="ccswitch.io"],
a[href*="docs.newapi.pro"],
div.flex:has(> a[href*="cherry-ai.com"]),
div.flex:has(> a[href*="ccswitch.io"]) {
  display: none !important;
}

/* ==========================================================================
   FLOATING PILL FOOTER (Exact Original Layout & Positions)
   ========================================================================== */
footer {
  background: transparent !important;
  border-top: 1px solid rgba(240, 236, 228, 0.1) !important;
  padding: 0 !important;
}

footer div.bg-muted\/20.border-border\/50 {
  background-color: rgba(14, 12, 10, 0.9) !important;
  border: 1px solid rgba(240, 236, 228, 0.16) !important;
  backdrop-filter: blur(12px) !important;
  border-radius: 1rem !important;
}

footer div.custom-footer {
  color: #DFD9CE !important;
  font-size: 14px !important;
}

footer div[class*="sm:border-l"] {
  border-color: rgba(240, 236, 228, 0.16) !important;
}

footer div[class*="sm:border-l"] span {
  color: #DFD9CE !important;
  font-size: 12px !important;
}