:root {
  --ccu-bg: #06110d;
  --ccu-panel: #0d2119;
  --ccu-panel-2: #123227;
  --ccu-line: rgba(81, 255, 182, 0.22);
  --ccu-line-strong: rgba(81, 255, 182, 0.42);
  --ccu-text: #f2fff8;
  --ccu-muted: #a7cdbd;
  --ccu-brand: #3ee39f;
  --ccu-brand-2: #55d6c8;
}
body {
  background:
    radial-gradient(circle at 18% 0%, rgba(62, 227, 159, .13), transparent 36%),
    linear-gradient(180deg, #071610 0%, #050d0a 100%) !important;
}
.ccu-card,
.ccu-buy-card,
.ccu-redeem-card {
  border: 1px solid var(--ccu-line);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(18, 50, 39, .9), rgba(10, 28, 21, .96));
  color: var(--ccu-text);
  box-shadow: 0 18px 50px rgba(0,0,0,.18);
}
.ccu-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 28px 26px;
  margin: 0 0 18px;
}
.ccu-card h2,
.ccu-buy-card h2,
.ccu-redeem-card h2 { margin: 0 0 10px; color: var(--ccu-text); font-size: 26px; letter-spacing: 0; }
.ccu-card p,
.ccu-buy-card p,
.ccu-redeem-card p { margin: 0; color: var(--ccu-muted); line-height: 1.65; font-size: 15px; }
.ccu-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.ccu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.12);
  color: var(--ccu-text);
  background: rgba(255,255,255,.06);
  text-decoration: none;
  font-weight: 800;
  white-space: nowrap;
}
.ccu-btn.primary {
  color: #031a13;
  background: linear-gradient(135deg, var(--ccu-brand), var(--ccu-brand-2));
  border-color: transparent;
}
.ccu-buy-layout { max-width: 1320px; margin: 0 auto; padding: 28px 22px 48px; color: var(--ccu-text); }
.ccu-buy-hero { margin-bottom: 18px; }
.ccu-buy-hero h1 { margin: 0 0 8px; font-size: 34px; letter-spacing: 0; }
.ccu-buy-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(360px, .65fr); gap: 18px; align-items: start; }
.ccu-buy-card, .ccu-redeem-card { padding: 22px; }
.ccu-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-top: 18px; }
.ccu-plan {
  min-height: 132px;
  padding: 18px;
  border: 1px solid var(--ccu-line);
  border-radius: 10px;
  background: rgba(255,255,255,.035);
  text-decoration: none;
  color: var(--ccu-text);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.ccu-plan:hover { transform: translateY(-2px); border-color: var(--ccu-line-strong); background: rgba(62,227,159,.08); }
.ccu-plan strong { font-size: 30px; line-height: 1; }
.ccu-plan span { color: var(--ccu-muted); font-size: 14px; }
.ccu-form { display: grid; gap: 12px; margin-top: 18px; }
.ccu-input {
  width: 100%; min-height: 48px; border: 1px solid rgba(255,255,255,.14); border-radius: 9px;
  background: rgba(255,255,255,.06); color: var(--ccu-text); padding: 0 14px; outline: none;
}
.ccu-input:focus { border-color: var(--ccu-brand); box-shadow: 0 0 0 3px rgba(62,227,159,.15); }
.ccu-status { min-height: 24px; color: var(--ccu-muted); font-size: 14px; line-height: 1.5; }
.ccu-status.ok { color: var(--ccu-brand); }
.ccu-status.err { color: #ff7b8a; }
.ccu-page-shell { max-width: 1320px; margin: 0 auto; padding: 20px; }
.ccu-api-key-help-shell {
  padding-top: 16px;
  padding-bottom: 8px;
}
.ccu-api-key-help-grid {
  display: grid;
  grid-template-columns: minmax(360px, 0.8fr) minmax(520px, 1.2fr);
  gap: 18px;
  align-items: stretch;
}
.ccu-download-stack {
  display: grid;
  gap: 14px;
}
.ccu-download-card {
  min-height: 132px;
  align-items: center;
  margin: 0;
  padding: 20px 22px;
}
.ccu-download-card h2 {
  font-size: 24px;
}
.ccu-download-card p {
  max-width: 520px;
}
.ccu-tutorial-card {
  display: block;
  min-height: 278px;
  margin: 0;
  padding: 22px 24px;
  background:
    radial-gradient(circle at 92% 0%, rgba(91, 255, 190, .12), transparent 36%),
    linear-gradient(180deg, rgba(20, 64, 48, .94), rgba(10, 28, 21, .98));
}
.ccu-tutorial-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.ccu-tutorial-heading span {
  color: var(--ccu-brand);
  font-size: 26px;
  font-weight: 900;
}
.ccu-tutorial-heading strong {
  color: var(--ccu-muted);
  font-size: 14px;
}
.ccu-tutorial-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 22px;
  color: var(--ccu-text);
  line-height: 1.55;
}
.ccu-tutorial-list li {
  padding: 8px 10px;
  border: 1px solid rgba(91,255,190,.13);
  border-radius: 8px;
  background: rgba(255,255,255,.035);
}
.ccu-tutorial-list b {
  color: #ffffff;
}
.ccu-smile {
  display: inline-flex;
  transform: translateY(1px);
}
@media (max-width: 980px) {
  .ccu-card { align-items: flex-start; flex-direction: column; }
  .ccu-actions { justify-content: flex-start; }
  .ccu-buy-grid { grid-template-columns: 1fr; }
  .ccu-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ccu-api-key-help-grid { grid-template-columns: 1fr; }
  .ccu-download-card { min-height: auto; }
}
@media (max-width: 560px) {
  .ccu-plans { grid-template-columns: 1fr; }
  .ccu-card h2, .ccu-buy-card h2, .ccu-redeem-card h2 { font-size: 22px; }
}
#ccu-recharge-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 9999;
  min-height: 46px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--ccu-brand), var(--ccu-brand-2));
  color: #031a13;
  text-decoration: none;
  font-weight: 900;
  box-shadow: 0 12px 34px rgba(62, 227, 159, .28);
}
@media (max-width: 640px) {
  #ccu-recharge-float { right: 14px; bottom: 14px; min-height: 42px; padding: 0 16px; }
}

/* The floating shortcut is removed per current UX requirements. */
#ccu-recharge-float {
  display: none !important;
}

body.ccu-redeem-page .ccu-redeem-merge-root {
  display: grid !important;
  grid-template-columns: minmax(320px, 0.86fr) minmax(420px, 1.14fr);
  gap: 18px !important;
  align-items: start !important;
  max-width: 1320px;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.ccu-redeem-page .ccu-redeem-merge-root > :not(#ccu-redeem-buy-panel) {
  min-width: 0;
  grid-column: 2;
}

.ccu-redeem-buy-panel {
  position: sticky;
  top: 86px;
  align-self: start;
}

.ccu-redeem-plans {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ccu-redeem-plans .ccu-plan {
  min-height: 106px;
}

.ccu-redeem-plans .ccu-plan strong {
  font-size: 26px;
}

@media (max-width: 1050px) {
  body.ccu-redeem-page .ccu-redeem-merge-root {
    grid-template-columns: 1fr;
  }
  body.ccu-redeem-page .ccu-redeem-merge-root > :not(#ccu-redeem-buy-panel) {
    grid-column: auto;
  }
  .ccu-redeem-buy-panel {
    position: static;
  }
}

/* CCUHubs full green theme override for SubAPI built-in UI.
   This intentionally sits after the original helper styles so it wins over
   the bundled slate/blue Tailwind palette without touching the app bundle. */
:root {
  --ccu-page-bg: #050d0a;
  --ccu-shell-bg: #071610;
  --ccu-sidebar-bg: #081710;
  --ccu-topbar-bg: #0a1b14;
  --ccu-card-bg: #0d2119;
  --ccu-card-bg-2: #102b21;
  --ccu-card-hover: #14382b;
  --ccu-input-bg: #12281f;
  --ccu-border-soft: rgba(91, 255, 190, 0.16);
  --ccu-border: rgba(91, 255, 190, 0.24);
  --ccu-border-strong: rgba(91, 255, 190, 0.46);
  --ccu-text-main: #f2fff8;
  --ccu-text-muted: #a9d4c2;
  --ccu-text-dim: #7fac98;
  --ccu-accent: #37e39f;
  --ccu-accent-2: #5bd8c7;
  --ccu-accent-dark: #063b2b;
  --ccu-danger: #ff7182;
}

html,
body,
#app {
  min-height: 100%;
  background:
    radial-gradient(circle at 18% -8%, rgba(55, 227, 159, 0.16), transparent 36%),
    radial-gradient(circle at 95% 4%, rgba(91, 216, 199, 0.08), transparent 32%),
    linear-gradient(180deg, var(--ccu-shell-bg) 0%, var(--ccu-page-bg) 100%) !important;
  color: var(--ccu-text-main) !important;
}

main,
[role="main"],
[class*="min-h-screen"],
[class*="bg-background"],
[class*="bg-slate-950"],
[class*="bg-gray-950"],
[class*="bg-zinc-950"],
[class*="dark:bg-slate-950"],
[class*="dark:bg-gray-950"],
[class*="dark:bg-zinc-950"] {
  background:
    radial-gradient(circle at 14% 0%, rgba(55, 227, 159, 0.11), transparent 32%),
    linear-gradient(180deg, var(--ccu-shell-bg), var(--ccu-page-bg)) !important;
  color: var(--ccu-text-main) !important;
}

aside,
nav,
header,
[class*="sidebar"],
[class*="Sidebar"],
[class*="bg-sidebar"],
[class*="bg-slate-900"],
[class*="bg-gray-900"],
[class*="bg-zinc-900"],
[class*="dark:bg-slate-900"],
[class*="dark:bg-gray-900"],
[class*="dark:bg-zinc-900"] {
  background-color: var(--ccu-sidebar-bg) !important;
  color: var(--ccu-text-main) !important;
  border-color: var(--ccu-border-soft) !important;
}

header,
[class*="sticky"][class*="top-0"],
[class*="border-b"] {
  background: rgba(10, 27, 20, 0.94) !important;
  backdrop-filter: blur(14px);
  border-color: var(--ccu-border-soft) !important;
}

[class*="bg-slate-800"],
[class*="bg-gray-800"],
[class*="bg-zinc-800"],
[class*="dark:bg-slate-800"],
[class*="dark:bg-gray-800"],
[class*="dark:bg-zinc-800"],
[class*="card"],
[class*="Card"],
[class*="rounded-xl"],
[class*="rounded-2xl"] {
  background-color: var(--ccu-card-bg) !important;
  border-color: var(--ccu-border) !important;
  color: var(--ccu-text-main) !important;
}

[class*="bg-slate-700"],
[class*="bg-gray-700"],
[class*="bg-zinc-700"],
[class*="dark:bg-slate-700"],
[class*="dark:bg-gray-700"],
[class*="dark:bg-zinc-700"] {
  background-color: var(--ccu-card-bg-2) !important;
  border-color: var(--ccu-border) !important;
}

[class*="hover:bg-slate-"],
[class*="hover:bg-gray-"],
[class*="hover:bg-zinc-"] {
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}

[class*="hover:bg-slate-"]:hover,
[class*="hover:bg-gray-"]:hover,
[class*="hover:bg-zinc-"]:hover {
  background-color: var(--ccu-card-hover) !important;
  border-color: var(--ccu-border-strong) !important;
}

[class*="border-slate-"],
[class*="border-gray-"],
[class*="border-zinc-"],
[class*="dark:border-slate-"],
[class*="dark:border-gray-"],
[class*="dark:border-zinc-"],
table,
thead,
tbody,
tr,
td,
th {
  border-color: var(--ccu-border-soft) !important;
}

table,
[class*="table"],
[class*="Table"] {
  background-color: rgba(7, 22, 16, 0.62) !important;
  color: var(--ccu-text-main) !important;
}

thead,
[class*="bg-muted"],
[class*="bg-accent"] {
  background-color: rgba(18, 43, 33, 0.92) !important;
}

input,
textarea,
select,
button[role="combobox"],
[class*="input"],
[class*="Input"],
[class*="select"],
[class*="Select"],
[class*="bg-input"],
[class*="bg-slate-600"],
[class*="bg-gray-600"] {
  background-color: var(--ccu-input-bg) !important;
  border-color: var(--ccu-border) !important;
  color: var(--ccu-text-main) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--ccu-text-dim) !important;
}

input:focus,
textarea:focus,
select:focus,
button:focus-visible,
[class*="focus:ring"]:focus,
[class*="focus-visible:ring"]:focus-visible {
  border-color: var(--ccu-accent) !important;
  box-shadow: 0 0 0 3px rgba(55, 227, 159, 0.16) !important;
  outline: none !important;
}

[class*="text-slate-50"],
[class*="text-slate-100"],
[class*="text-gray-50"],
[class*="text-gray-100"],
[class*="dark:text-slate-50"],
[class*="dark:text-slate-100"],
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--ccu-text-main) !important;
}

[class*="text-slate-300"],
[class*="text-slate-400"],
[class*="text-gray-300"],
[class*="text-gray-400"],
[class*="text-muted"],
[class*="dark:text-slate-300"],
[class*="dark:text-slate-400"] {
  color: var(--ccu-text-muted) !important;
}

[class*="text-slate-500"],
[class*="text-gray-500"],
[class*="text-zinc-500"] {
  color: var(--ccu-text-dim) !important;
}

[class*="text-blue-"],
[class*="text-indigo-"],
[class*="text-cyan-"],
[class*="text-teal-"],
[class*="text-emerald-"] {
  color: var(--ccu-accent) !important;
}

[class*="bg-blue-"],
[class*="bg-indigo-"],
[class*="bg-cyan-"],
[class*="bg-teal-"],
[class*="bg-emerald-"],
button[type="submit"],
a[class*="bg-"],
.ccu-btn.primary {
  background: linear-gradient(135deg, var(--ccu-accent), var(--ccu-accent-2)) !important;
  border-color: transparent !important;
  color: #031a13 !important;
}

[class*="ring-slate-"],
[class*="ring-gray-"],
[class*="focus:ring-"],
[class*="focus-visible:ring-"] {
  --tw-ring-color: rgba(55, 227, 159, 0.32) !important;
}

[class*="from-slate-"],
[class*="from-gray-"],
[class*="from-zinc-"] {
  --tw-gradient-from: var(--ccu-card-bg) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(13, 33, 25, 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

[class*="via-slate-"],
[class*="via-gray-"],
[class*="via-zinc-"] {
  --tw-gradient-to: rgba(13, 33, 25, 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--ccu-card-bg-2) var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}

[class*="to-slate-"],
[class*="to-gray-"],
[class*="to-zinc-"] {
  --tw-gradient-to: var(--ccu-page-bg) var(--tw-gradient-to-position) !important;
}

[class*="shadow"],
[class*="Shadow"] {
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.22) !important;
}

[role="dialog"],
[data-radix-popper-content-wrapper] > *,
[class*="popover"],
[class*="Popover"],
[class*="dropdown"],
[class*="Dropdown"],
[class*="modal"],
[class*="Modal"] {
  background-color: var(--ccu-card-bg-2) !important;
  border-color: var(--ccu-border-strong) !important;
  color: var(--ccu-text-main) !important;
}

[role="dialog"] {
  background:
    radial-gradient(circle at 100% 0%, rgba(55, 227, 159, 0.11), transparent 30%),
    linear-gradient(180deg, #123227, #0d2119) !important;
  border: 1px solid var(--ccu-border-strong) !important;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.42) !important;
}

body > [data-radix-dialog-overlay],
body > div[data-radix-dialog-overlay],
body > div[class*="fixed"][class*="inset-0"][class*="bg-black"],
body > div[class*="fixed"][class*="inset-0"][class*="z-50"]:not([role="dialog"]) {
  background: transparent !important;
  backdrop-filter: none !important;
}

[data-ccu-hide-api-action="true"] {
  display: none !important;
}

.ccu-copy-key-btn {
  min-width: 86px !important;
  min-height: 30px !important;
  padding: 0 12px !important;
  border-radius: 7px !important;
  border: 1px solid rgba(91, 255, 190, .32) !important;
  background: rgba(55, 227, 159, .14) !important;
  color: #b8ffe1 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

[class*="bg-[#020617]"],
[class*="bg-[#030712]"],
[class*="bg-[#0f172a]"],
[class*="bg-[#111827]"],
[class*="bg-[#1e293b]"],
[class*="dark:bg-[#020617]"],
[class*="dark:bg-[#030712]"],
[class*="dark:bg-[#0f172a]"],
[class*="dark:bg-[#111827]"],
[class*="dark:bg-[#1e293b]"],
[class*="bg-primary"],
[class*="bg-secondary"],
[class*="bg-popover"],
[class*="bg-card"],
[class*="bg-muted"],
[class*="bg-accent"] {
  background-color: var(--ccu-card-bg) !important;
  border-color: var(--ccu-border) !important;
  color: var(--ccu-text-main) !important;
}

[class*="text-primary"],
[class*="text-secondary"],
[class*="text-popover"],
[class*="text-card"],
[class*="text-foreground"] {
  color: var(--ccu-text-main) !important;
}

[class*="text-muted-foreground"],
[class*="text-secondary-foreground"],
[class*="text-accent-foreground"] {
  color: var(--ccu-text-muted) !important;
}

[class*="bg-purple-"],
[class*="bg-violet-"] {
  background-color: rgba(55, 227, 159, .16) !important;
  color: #b8ffe1 !important;
  border-color: rgba(91,255,190,.26) !important;
}

[class*="text-purple-"],
[class*="text-violet-"] {
  color: #c084fc !important;
}

tr:hover,
[role="row"]:hover {
  background-color: rgba(62, 227, 159, .06) !important;
}

svg,
[class*="lucide"] {
  color: currentColor;
}

/* Menu fixes run before the SPA script hydrates, so hidden/renamed items do not flash. */
#ccu-recharge-float,
[data-ccu-hide-subscription="true"],
a[href*="/subscription"],
a[href*="/subscriptions"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

a[href="/redeem"],
a[href*="/redeem"] {
  font-size: 0 !important;
}

a[href="/redeem"] svg,
a[href*="/redeem"] svg,
a[href="/redeem"] [class*="icon"],
a[href*="/redeem"] [class*="icon"] {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  font-size: 18px !important;
}

a[href="/redeem"]::after,
a[href*="/redeem"]::after {
  content: "充值/兑换";
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #06110d;
}

::-webkit-scrollbar-thumb {
  background: rgba(91, 255, 190, 0.28);
  border-radius: 999px;
  border: 2px solid #06110d;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(91, 255, 190, 0.44);
}

/* CCUHubs polish pass: API key guide, table colors, and recharge page sizing. */
.ccu-api-key-help-shell {
  width: calc(100% - 48px);
  max-width: 1680px;
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
}

.ccu-api-key-help-grid {
  grid-template-columns: minmax(520px, 1.22fr) minmax(360px, .78fr);
  gap: 18px;
}

.ccu-tutorial-card {
  min-height: 318px;
}

.ccu-tutorial-heading span {
  font-size: 30px;
  letter-spacing: 0;
}

.ccu-tutorial-list {
  counter-reset: ccu-step;
  list-style: none;
  padding-left: 0;
  gap: 9px;
}

.ccu-tutorial-list li {
  counter-increment: ccu-step;
  position: relative;
  min-height: 58px;
  padding: 10px 14px 10px 54px;
  background: rgba(5, 27, 19, .58);
  border-color: rgba(91, 255, 190, .22);
}

.ccu-tutorial-list li::before {
  content: counter(ccu-step);
  position: absolute;
  left: 14px;
  top: 12px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--ccu-brand), var(--ccu-brand-2));
  color: #031a13;
  font-size: 15px;
  font-weight: 950;
}

.ccu-tutorial-list b {
  display: block;
  margin-bottom: 4px;
  color: #ffffff;
  font-size: 17px;
  line-height: 1.2;
}

.ccu-tutorial-list li > span {
  display: block;
  color: var(--ccu-muted);
  font-size: 14px;
  line-height: 1.45;
}

.ccu-download-stack {
  align-self: stretch;
}

.ccu-download-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  min-height: 152px;
}

.ccu-download-card .ccu-actions {
  justify-content: flex-start;
  margin-top: 12px;
}

body.ccu-api-keys-page [data-ccu-api-table-shell="true"] {
  min-height: 0 !important;
  height: auto !important;
  background: rgba(6, 24, 17, .78) !important;
  border-color: rgba(91, 255, 190, .24) !important;
}

body.ccu-api-keys-page table[data-ccu-api-table],
body.ccu-api-keys-page table[data-ccu-api-table] thead,
body.ccu-api-keys-page table[data-ccu-api-table] tbody,
body.ccu-api-keys-page table[data-ccu-api-table] tr,
body.ccu-api-keys-page table[data-ccu-api-table] th,
body.ccu-api-keys-page table[data-ccu-api-table] td {
  background-color: rgba(7, 25, 18, .82) !important;
  border-color: rgba(91, 255, 190, .18) !important;
}

body.ccu-api-keys-page table[data-ccu-api-table] thead th,
body.ccu-api-keys-page table[data-ccu-api-table] [class*="bg-slate"],
body.ccu-api-keys-page table[data-ccu-api-table] [class*="bg-gray"],
body.ccu-api-keys-page table[data-ccu-api-table] [class*="bg-zinc"],
body.ccu-api-keys-page table[data-ccu-api-table] [class*="bg-[#"] {
  background-color: rgba(16, 55, 40, .94) !important;
  color: #bdfcdf !important;
}

body.ccu-api-keys-page table[data-ccu-api-table] tbody tr:hover td {
  background-color: rgba(62, 227, 159, .075) !important;
}

body.ccu-api-keys-page table[data-ccu-api-table] button,
body.ccu-api-keys-page table[data-ccu-api-table] a {
  border-color: rgba(91, 255, 190, .24) !important;
  color: #bdfcdf !important;
}

body.ccu-api-keys-page [class*="min-h-"][data-ccu-api-table-shell="true"] {
  min-height: 0 !important;
}

body.ccu-redeem-page .ccu-redeem-merge-root {
  width: calc(100% - 48px);
  max-width: 1680px;
  grid-template-columns: minmax(460px, 1fr) minmax(460px, 1fr);
  gap: 22px !important;
  padding-top: 20px;
}

.ccu-redeem-buy-panel,
body.ccu-redeem-page .ccu-redeem-merge-root > :not(#ccu-redeem-buy-panel) {
  min-height: 380px;
}

.ccu-redeem-buy-panel {
  padding: 28px;
}

.ccu-redeem-buy-panel h2,
body.ccu-redeem-page .ccu-redeem-merge-root > :not(#ccu-redeem-buy-panel) h2,
body.ccu-redeem-page .ccu-redeem-merge-root > :not(#ccu-redeem-buy-panel) h3 {
  font-size: 28px !important;
}

.ccu-redeem-plans {
  gap: 14px;
}

.ccu-redeem-plans .ccu-plan {
  min-height: 132px;
  padding: 20px;
}

.ccu-redeem-plans .ccu-plan strong {
  font-size: 32px;
}

a[href="/redeem"],
a[href*="/redeem"] {
  align-items: center !important;
  gap: 0 !important;
}

a[href="/redeem"] > :not(svg),
a[href*="/redeem"] > :not(svg) {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

a[href="/redeem"] svg,
a[href*="/redeem"] svg,
a[href="/redeem"] [class*="icon"],
a[href*="/redeem"] [class*="icon"] {
  margin-right: 14px !important;
}

a[href="/redeem"]::after,
a[href*="/redeem"]::after {
  margin-left: 0 !important;
}

@media (max-width: 1180px) {
  .ccu-api-key-help-grid,
  body.ccu-redeem-page .ccu-redeem-merge-root {
    grid-template-columns: 1fr;
  }
  .ccu-api-key-help-shell,
  body.ccu-redeem-page .ccu-redeem-merge-root {
    width: calc(100% - 32px);
  }
  .ccu-download-stack {
    order: 2;
  }
  .ccu-tutorial-card {
    order: 1;
  }
}

/* Final API-key page corrections: active nav, table details, and dialog overlay. */
[data-ccu-active-nav="true"] {
  position: relative !important;
  background:
    linear-gradient(90deg, rgba(55, 227, 159, .18), rgba(55, 227, 159, .07)) !important;
  border: 1px solid rgba(91, 255, 190, .22) !important;
  color: #ffffff !important;
  box-shadow: inset 3px 0 0 var(--ccu-brand), 0 10px 28px rgba(0, 0, 0, .12) !important;
}

[data-ccu-active-nav="true"] svg,
[data-ccu-active-nav="true"] [class*="icon"] {
  color: var(--ccu-brand) !important;
}

body.ccu-api-keys-page button,
body.ccu-api-keys-page a[role="button"],
body.ccu-api-keys-page [role="button"] {
  background-color: rgba(13, 38, 28, .96) !important;
  border-color: rgba(91, 255, 190, .28) !important;
  color: #eafff6 !important;
}

body.ccu-api-keys-page button:hover,
body.ccu-api-keys-page a[role="button"]:hover,
body.ccu-api-keys-page [role="button"]:hover {
  background-color: rgba(20, 68, 49, .98) !important;
  border-color: rgba(91, 255, 190, .46) !important;
}

body.ccu-api-keys-page button[type="submit"],
body.ccu-api-keys-page button[class*="primary"],
body.ccu-api-keys-page button[class*="bg-emerald"],
body.ccu-api-keys-page button[class*="bg-teal"] {
  background: linear-gradient(135deg, var(--ccu-accent), var(--ccu-accent-2)) !important;
  border-color: transparent !important;
  color: #031a13 !important;
}

[data-ccu-key-cell] {
  min-width: 230px !important;
}

[data-ccu-key-chip] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 132px !important;
  max-width: 180px !important;
  min-height: 30px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  background: rgba(9, 38, 28, .96) !important;
  border: 1px solid rgba(91, 255, 190, .26) !important;
  color: #63ffd0 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .01em !important;
}

[data-ccu-group-cell] {
  min-width: 260px !important;
}

[data-ccu-group-picker] {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  min-width: 190px !important;
  max-width: 260px !important;
  min-height: 34px !important;
  padding: 0 10px !important;
  border-radius: 9px !important;
  background: rgba(8, 42, 30, .92) !important;
  border: 1px solid rgba(91, 255, 190, .24) !important;
  color: #bdfcdf !important;
}

[data-ccu-group-picker] > * {
  background: transparent !important;
}

body.ccu-api-keys-page [data-ccu-pagination-shell="true"] {
  background:
    linear-gradient(180deg, rgba(9, 34, 24, .96), rgba(6, 24, 17, .96)) !important;
  border: 1px solid rgba(91, 255, 190, .20) !important;
  border-top-color: rgba(91, 255, 190, .24) !important;
  color: var(--ccu-text-muted) !important;
}

body.ccu-api-keys-page [data-ccu-pagination-shell="true"] button,
body.ccu-api-keys-page [data-ccu-pagination-shell="true"] [role="button"] {
  background: rgba(10, 45, 32, .92) !important;
  border-color: rgba(91, 255, 190, .25) !important;
  color: #caffea !important;
}

body.ccu-api-keys-page [data-ccu-api-table-shell="true"] {
  min-height: 0 !important;
  height: auto !important;
  background:
    linear-gradient(180deg, rgba(7, 28, 20, .92), rgba(4, 20, 14, .96)) !important;
  border-color: rgba(91, 255, 190, .23) !important;
}

body.ccu-api-keys-page [data-ccu-api-table-shell="true"] [class*="bg-slate"],
body.ccu-api-keys-page [data-ccu-api-table-shell="true"] [class*="bg-gray"],
body.ccu-api-keys-page [data-ccu-api-table-shell="true"] [class*="bg-zinc"],
body.ccu-api-keys-page [data-ccu-api-table-shell="true"] [class*="bg-[#"],
body.ccu-api-keys-page [data-ccu-api-table-shell="true"] [class*="bg-card"],
body.ccu-api-keys-page [data-ccu-api-table-shell="true"] [class*="bg-secondary"] {
  background-color: rgba(8, 34, 24, .96) !important;
  border-color: rgba(91, 255, 190, .18) !important;
}

body.ccu-api-keys-page table[data-ccu-api-table] thead,
body.ccu-api-keys-page table[data-ccu-api-table] thead tr,
body.ccu-api-keys-page table[data-ccu-api-table] thead th {
  background-color: rgba(17, 65, 47, .98) !important;
  color: #d9ffef !important;
}

body.ccu-api-keys-page table[data-ccu-api-table] tbody td {
  background-color: rgba(5, 25, 17, .92) !important;
}

body.ccu-api-keys-page table[data-ccu-api-table] tbody tr:hover td {
  background-color: rgba(11, 48, 34, .98) !important;
}

body:has([role="dialog"]) [class*="fixed"][class*="inset-0"],
body:has([role="dialog"]) [data-radix-dialog-overlay],
body:has([role="dialog"]) [class*="DialogOverlay"],
body:has([role="dialog"]) [class*="overlay"],
body:has([role="dialog"]) [class*="Overlay"] {
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
}

body:has([role="dialog"]) [role="dialog"],
[role="dialog"] {
  background:
    radial-gradient(circle at 100% 0%, rgba(55, 227, 159, 0.10), transparent 30%),
    linear-gradient(180deg, #102f23, #0a2118) !important;
  border: 1px solid rgba(91, 255, 190, .36) !important;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48) !important;
}

a[href="/redeem"],
a[href*="/redeem"] {
  font-size: inherit !important;
  gap: 12px !important;
}

a[href="/redeem"]::after,
a[href*="/redeem"]::after {
  content: none !important;
}

a[href="/redeem"] svg,
a[href*="/redeem"] svg,
a[href="/redeem"] [class*="icon"],
a[href*="/redeem"] [class*="icon"] {
  margin-right: 0 !important;
}

/* Restore SubAPI dark-blue palette while keeping CCUHubs layout and UX additions. */
:root {
  --ccu-bg: #020617;
  --ccu-panel: #0f172a;
  --ccu-panel-2: #172033;
  --ccu-line: rgba(148, 163, 184, 0.22);
  --ccu-line-strong: rgba(96, 165, 250, 0.45);
  --ccu-text: #f8fafc;
  --ccu-muted: #cbd5e1;
  --ccu-brand: #3b82f6;
  --ccu-brand-2: #06b6d4;
  --ccu-page-bg: #020617;
  --ccu-shell-bg: #07111f;
  --ccu-sidebar-bg: #0f172a;
  --ccu-topbar-bg: #111827;
  --ccu-card-bg: #111827;
  --ccu-card-bg-2: #172033;
  --ccu-card-hover: #1e293b;
  --ccu-input-bg: #111827;
  --ccu-border-soft: rgba(148, 163, 184, 0.18);
  --ccu-border: rgba(148, 163, 184, 0.28);
  --ccu-border-strong: rgba(96, 165, 250, 0.48);
  --ccu-text-main: #f8fafc;
  --ccu-text-muted: #cbd5e1;
  --ccu-text-dim: #94a3b8;
  --ccu-accent: #3b82f6;
  --ccu-accent-2: #06b6d4;
  --ccu-accent-dark: #1e3a8a;
  --ccu-danger: #fb7185;
}

html,
body,
#app,
main,
[role="main"],
[class*="min-h-screen"],
[class*="bg-background"],
[class*="bg-slate-950"],
[class*="bg-gray-950"],
[class*="bg-zinc-950"],
[class*="dark:bg-slate-950"],
[class*="dark:bg-gray-950"],
[class*="dark:bg-zinc-950"] {
  background:
    radial-gradient(circle at 18% -10%, rgba(59, 130, 246, .13), transparent 34%),
    radial-gradient(circle at 95% 0%, rgba(14, 165, 233, .09), transparent 32%),
    linear-gradient(180deg, #07111f 0%, #020617 100%) !important;
  color: var(--ccu-text-main) !important;
}

body,
.ccu-buy-layout {
  background:
    radial-gradient(circle at 18% 0%, rgba(59, 130, 246, .12), transparent 34%),
    linear-gradient(180deg, #07111f 0%, #020617 100%) !important;
}

aside,
nav,
header,
[class*="sidebar"],
[class*="Sidebar"],
[class*="bg-sidebar"],
[class*="bg-slate-900"],
[class*="bg-gray-900"],
[class*="bg-zinc-900"],
[class*="dark:bg-slate-900"],
[class*="dark:bg-gray-900"],
[class*="dark:bg-zinc-900"] {
  background-color: #0f172a !important;
  border-color: rgba(148, 163, 184, .18) !important;
}

header,
[class*="sticky"][class*="top-0"],
[class*="border-b"] {
  background: rgba(15, 23, 42, .94) !important;
  border-color: rgba(148, 163, 184, .18) !important;
}

.ccu-card,
.ccu-buy-card,
.ccu-redeem-card,
.ccu-tutorial-card,
.ccu-download-card {
  background:
    radial-gradient(circle at 96% 0%, rgba(59, 130, 246, .10), transparent 32%),
    linear-gradient(180deg, rgba(17, 24, 39, .96), rgba(15, 23, 42, .98)) !important;
  border-color: rgba(148, 163, 184, .24) !important;
  color: #f8fafc !important;
}

.ccu-tutorial-heading span,
.ccu-status.ok {
  color: #38bdf8 !important;
}

.ccu-tutorial-list li,
.ccu-plan {
  background: rgba(15, 23, 42, .72) !important;
  border-color: rgba(148, 163, 184, .22) !important;
}

.ccu-tutorial-list li:hover,
.ccu-plan:hover {
  background: rgba(30, 41, 59, .82) !important;
  border-color: rgba(96, 165, 250, .42) !important;
}

.ccu-tutorial-list li::before,
.ccu-btn.primary,
#ccu-recharge-float,
body.ccu-api-keys-page button[type="submit"],
body.ccu-api-keys-page button[class*="primary"],
body.ccu-api-keys-page button[class*="bg-emerald"],
body.ccu-api-keys-page button[class*="bg-teal"] {
  background: linear-gradient(135deg, #3b82f6, #06b6d4) !important;
  color: #f8fafc !important;
  border-color: transparent !important;
}

.ccu-btn,
body.ccu-api-keys-page button,
body.ccu-api-keys-page a[role="button"],
body.ccu-api-keys-page [role="button"] {
  background-color: rgba(17, 24, 39, .95) !important;
  border-color: rgba(148, 163, 184, .28) !important;
  color: #e5eefb !important;
}

.ccu-btn:hover,
body.ccu-api-keys-page button:hover,
body.ccu-api-keys-page a[role="button"]:hover,
body.ccu-api-keys-page [role="button"]:hover {
  background-color: rgba(30, 41, 59, .98) !important;
  border-color: rgba(96, 165, 250, .45) !important;
}

input,
textarea,
select,
button[role="combobox"],
[class*="input"],
[class*="Input"],
[class*="select"],
[class*="Select"],
[class*="bg-input"] {
  background-color: #111827 !important;
  border-color: rgba(148, 163, 184, .28) !important;
  color: #f8fafc !important;
}

input:focus,
textarea:focus,
select:focus,
button:focus-visible,
[class*="focus:ring"]:focus,
[class*="focus-visible:ring"]:focus-visible {
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, .18) !important;
}

[class*="text-blue-"],
[class*="text-indigo-"],
[class*="text-cyan-"],
[class*="text-teal-"],
[class*="text-emerald-"] {
  color: #60a5fa !important;
}

[class*="bg-blue-"],
[class*="bg-indigo-"],
[class*="bg-cyan-"],
[class*="bg-teal-"],
[class*="bg-emerald-"],
button[type="submit"],
a[class*="bg-"] {
  background: linear-gradient(135deg, #3b82f6, #06b6d4) !important;
  color: #f8fafc !important;
}

[data-ccu-active-nav="true"] {
  background:
    linear-gradient(90deg, rgba(59, 130, 246, .22), rgba(59, 130, 246, .08)) !important;
  border-color: rgba(96, 165, 250, .35) !important;
  box-shadow: inset 3px 0 0 #60a5fa, 0 10px 28px rgba(0, 0, 0, .16) !important;
}

[data-ccu-active-nav="true"] svg,
[data-ccu-active-nav="true"] [class*="icon"] {
  color: #60a5fa !important;
}

[data-ccu-key-chip],
[data-ccu-group-picker] {
  background: rgba(15, 23, 42, .96) !important;
  border-color: rgba(96, 165, 250, .30) !important;
  color: #93c5fd !important;
}

.ccu-copy-key-btn {
  background: rgba(30, 64, 175, .22) !important;
  border-color: rgba(96, 165, 250, .38) !important;
  color: #bfdbfe !important;
}

table,
[class*="table"],
[class*="Table"],
body.ccu-api-keys-page [data-ccu-api-table-shell="true"],
body.ccu-api-keys-page table[data-ccu-api-table],
body.ccu-api-keys-page table[data-ccu-api-table] thead,
body.ccu-api-keys-page table[data-ccu-api-table] tbody,
body.ccu-api-keys-page table[data-ccu-api-table] tr,
body.ccu-api-keys-page table[data-ccu-api-table] th,
body.ccu-api-keys-page table[data-ccu-api-table] td {
  background-color: rgba(15, 23, 42, .88) !important;
  border-color: rgba(148, 163, 184, .18) !important;
  color: #e5eefb !important;
}

thead,
[class*="bg-muted"],
[class*="bg-accent"],
body.ccu-api-keys-page table[data-ccu-api-table] thead,
body.ccu-api-keys-page table[data-ccu-api-table] thead tr,
body.ccu-api-keys-page table[data-ccu-api-table] thead th,
body.ccu-api-keys-page table[data-ccu-api-table] [class*="bg-slate"],
body.ccu-api-keys-page table[data-ccu-api-table] [class*="bg-gray"],
body.ccu-api-keys-page table[data-ccu-api-table] [class*="bg-zinc"],
body.ccu-api-keys-page table[data-ccu-api-table] [class*="bg-[#"] {
  background-color: rgba(30, 41, 59, .96) !important;
  color: #dbeafe !important;
}

body.ccu-api-keys-page table[data-ccu-api-table] tbody td {
  background-color: rgba(15, 23, 42, .92) !important;
}

tr:hover,
[role="row"]:hover,
body.ccu-api-keys-page table[data-ccu-api-table] tbody tr:hover td {
  background-color: rgba(30, 41, 59, .86) !important;
}

body.ccu-api-keys-page [data-ccu-pagination-shell="true"] {
  background:
    linear-gradient(180deg, rgba(30, 41, 59, .96), rgba(15, 23, 42, .96)) !important;
  border-color: rgba(148, 163, 184, .22) !important;
  color: #cbd5e1 !important;
}

body.ccu-api-keys-page [data-ccu-pagination-shell="true"] button,
body.ccu-api-keys-page [data-ccu-pagination-shell="true"] [role="button"] {
  background: rgba(15, 23, 42, .94) !important;
  border-color: rgba(96, 165, 250, .30) !important;
  color: #bfdbfe !important;
}

[role="dialog"],
body:has([role="dialog"]) [role="dialog"] {
  background:
    radial-gradient(circle at 100% 0%, rgba(59, 130, 246, .10), transparent 30%),
    linear-gradient(180deg, #172033, #0f172a) !important;
  border-color: rgba(96, 165, 250, .32) !important;
  color: #f8fafc !important;
}

body:has([role="dialog"]) [class*="fixed"][class*="inset-0"],
body:has([role="dialog"]) [data-radix-dialog-overlay],
body:has([role="dialog"]) [class*="DialogOverlay"],
body:has([role="dialog"]) [class*="overlay"],
body:has([role="dialog"]) [class*="Overlay"] {
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
}

::-webkit-scrollbar-track {
  background: #020617;
}

::-webkit-scrollbar-thumb {
  background: rgba(96, 165, 250, 0.28);
  border-color: #020617;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(96, 165, 250, 0.44);
}

/* Recharge page and API-key table polish. Keep the restored blue palette, improve spacing and contrast. */
.ccu-buy-grid,
body.ccu-redeem-page .ccu-redeem-merge-root {
  grid-template-columns: minmax(390px, .82fr) minmax(560px, 1.18fr) !important;
  gap: 24px !important;
  align-items: stretch !important;
}

body.ccu-redeem-page .ccu-redeem-merge-root > :not(#ccu-redeem-buy-panel) {
  min-width: 0 !important;
  border-radius: 16px !important;
  border: 1px solid rgba(148, 163, 184, .24) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(59, 130, 246, .10), transparent 34%),
    linear-gradient(180deg, rgba(17, 24, 39, .96), rgba(15, 23, 42, .98)) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .18) !important;
}

.ccu-redeem-buy-panel h2,
.ccu-buy-card h2 {
  font-size: clamp(28px, 2vw, 36px) !important;
  line-height: 1.15 !important;
  color: #eff6ff !important;
}

.ccu-redeem-buy-panel p,
.ccu-buy-card p {
  color: #dbeafe !important;
  font-size: 16px !important;
  line-height: 1.8 !important;
}

.ccu-redeem-plans,
.ccu-plans {
  gap: 14px !important;
}

.ccu-redeem-plans .ccu-plan,
.ccu-plans .ccu-plan {
  background:
    linear-gradient(135deg, rgba(37, 99, 235, .94), rgba(14, 116, 144, .90)) !important;
  border: 1px solid rgba(191, 219, 254, .58) !important;
  color: #fff !important;
  box-shadow:
    0 16px 34px rgba(2, 6, 23, .28),
    inset 0 1px 0 rgba(255, 255, 255, .13) !important;
  transform: translateY(0);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
}

.ccu-redeem-plans .ccu-plan:nth-child(2n),
.ccu-plans .ccu-plan:nth-child(2n) {
  background:
    linear-gradient(135deg, rgba(29, 78, 216, .95), rgba(7, 89, 133, .92)) !important;
}

.ccu-redeem-plans .ccu-plan strong,
.ccu-plans .ccu-plan strong {
  color: #ffffff !important;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .28) !important;
}

.ccu-redeem-plans .ccu-plan span,
.ccu-plans .ccu-plan span {
  color: #dbeafe !important;
}

.ccu-redeem-plans .ccu-plan:hover,
.ccu-plans .ccu-plan:hover {
  background:
    linear-gradient(135deg, rgba(59, 130, 246, .98), rgba(6, 182, 212, .82)) !important;
  border-color: rgba(224, 242, 254, .90) !important;
  box-shadow:
    0 22px 44px rgba(14, 165, 233, .18),
    inset 0 1px 0 rgba(255, 255, 255, .18) !important;
  transform: translateY(-2px);
}

body.ccu-api-keys-page [data-ccu-api-toolbar="true"] {
  margin: 18px 24px 16px !important;
  padding: 12px !important;
  border: 1px solid rgba(148, 163, 184, .22) !important;
  border-radius: 16px !important;
  background: rgba(15, 23, 42, .58) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .12) !important;
}

body.ccu-api-keys-page [data-ccu-create-key-btn="true"] {
  min-height: 46px !important;
  padding: 0 22px !important;
  border-radius: 12px !important;
  margin: 0 !important;
}

body.ccu-api-keys-page [data-ccu-api-table-shell="true"] {
  border-radius: 16px !important;
  overflow: hidden !important;
  margin-top: 18px !important;
  border: 1px solid rgba(148, 163, 184, .24) !important;
  background: rgba(15, 23, 42, .90) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .18) !important;
}

body.ccu-api-keys-page [data-ccu-api-table-shell="true"] + [data-ccu-pagination-shell="true"],
body.ccu-api-keys-page [data-ccu-pagination-shell="true"] {
  border-radius: 16px !important;
  margin-top: 14px !important;
  padding: 14px 18px !important;
  border: 1px solid rgba(148, 163, 184, .24) !important;
  background:
    linear-gradient(180deg, rgba(17, 24, 39, .96), rgba(15, 23, 42, .98)) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .16) !important;
}

body.ccu-api-keys-page [data-ccu-key-chip] {
  display: inline-flex !important;
  align-items: center !important;
  min-width: 126px !important;
  justify-content: center !important;
  padding: 7px 12px !important;
  border-radius: 8px !important;
}

body.ccu-api-keys-page [data-ccu-group-picker] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 216px !important;
  justify-content: flex-start !important;
  border-radius: 10px !important;
  padding: 7px 10px !important;
}

[data-radix-popper-content-wrapper] > *,
[role="listbox"],
[cmdk-list],
[class*="select-content"],
[class*="SelectContent"],
[class*="dropdown"],
[class*="Dropdown"],
[class*="popover"],
[class*="Popover"] {
  background: #0f172a !important;
  border-color: rgba(96, 165, 250, .34) !important;
  color: #f8fafc !important;
  box-shadow: 0 24px 58px rgba(0, 0, 0, .42) !important;
}

[role="option"],
[cmdk-item],
[class*="select-item"],
[class*="SelectItem"] {
  background: transparent !important;
  color: #e5eefb !important;
}

[role="option"]:hover,
[role="option"][aria-selected="true"],
[cmdk-item][aria-selected="true"],
[class*="select-item"]:hover,
[class*="SelectItem"]:hover {
  background: rgba(59, 130, 246, .22) !important;
  color: #ffffff !important;
}

@media (max-width: 1180px) {
  .ccu-buy-grid,
  body.ccu-redeem-page .ccu-redeem-merge-root {
    grid-template-columns: 1fr !important;
  }
}

body.ccu-redeem-page .ccu-redeem-merge-root > :not(#ccu-redeem-buy-panel) {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  justify-self: stretch !important;
}

/* 2026-07-05 UI refinement: header balance, dashboard icon colors, recharge layout, API keys toolbar. */
[data-ccu-top-balance="true"] {
  min-height: 44px !important;
  min-width: 132px !important;
  padding: 0 16px !important;
  gap: 10px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(96, 165, 250, .36) !important;
  background:
    linear-gradient(180deg, rgba(30, 41, 59, .96), rgba(15, 23, 42, .98)) !important;
  box-shadow: 0 12px 30px rgba(2, 6, 23, .20) !important;
}

[data-ccu-top-balance="true"] svg {
  width: 20px !important;
  height: 20px !important;
  color: #93c5fd !important;
}

[data-ccu-top-balance="true"] span,
[data-ccu-top-balance="true"] * {
  font-size: 18px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
}

body.ccu-dashboard-page .card [class*="bg-emerald-"],
body.ccu-dashboard-page button [class*="bg-emerald-"] {
  background: rgba(6, 95, 70, .26) !important;
  background-image: none !important;
}

body.ccu-dashboard-page .card [class*="bg-emerald-"] svg,
body.ccu-dashboard-page button [class*="bg-emerald-"] svg {
  color: #34d399 !important;
}

body.ccu-dashboard-page .card [class*="bg-blue-"],
body.ccu-dashboard-page button [class*="bg-blue-"],
body.ccu-dashboard-page .card [class*="bg-primary-"],
body.ccu-dashboard-page button [class*="bg-primary-"] {
  background: rgba(30, 64, 175, .26) !important;
  background-image: none !important;
}

body.ccu-dashboard-page .card [class*="bg-blue-"] svg,
body.ccu-dashboard-page button [class*="bg-blue-"] svg,
body.ccu-dashboard-page .card [class*="bg-primary-"] svg,
body.ccu-dashboard-page button [class*="bg-primary-"] svg {
  color: #60a5fa !important;
}

body.ccu-dashboard-page .card [class*="bg-indigo-"],
body.ccu-dashboard-page button [class*="bg-indigo-"] {
  background: rgba(49, 46, 129, .32) !important;
  background-image: none !important;
}

body.ccu-dashboard-page .card [class*="bg-indigo-"] svg,
body.ccu-dashboard-page button [class*="bg-indigo-"] svg {
  color: #818cf8 !important;
}

body.ccu-redeem-page .ccu-redeem-merge-root,
.ccu-buy-grid {
  grid-template-columns: minmax(0, 2.05fr) minmax(300px, .76fr) !important;
  gap: 24px !important;
  align-items: start !important;
}

body.ccu-redeem-page #ccu-redeem-buy-panel,
.ccu-buy-grid .ccu-buy-card {
  border-radius: 16px !important;
  padding: 24px 26px !important;
}

body.ccu-redeem-page #ccu-redeem-buy-panel h2,
.ccu-buy-grid .ccu-buy-card h2 {
  margin-bottom: 6px !important;
}

body.ccu-redeem-page #ccu-redeem-buy-panel p,
.ccu-buy-grid .ccu-buy-card p {
  max-width: 980px !important;
  margin-bottom: 20px !important;
}

.ccu-redeem-plans,
.ccu-plans {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.ccu-recharge-plan {
  min-height: 174px !important;
  padding: 16px !important;
  border-radius: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(96, 165, 250, .16), transparent 34%),
    linear-gradient(180deg, rgba(17, 24, 39, .98), rgba(15, 23, 42, .98)) !important;
  border: 1px solid rgba(148, 163, 184, .26) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 12px 30px rgba(2,6,23,.18) !important;
}

.ccu-recharge-plan:hover {
  border-color: rgba(96, 165, 250, .58) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(96, 165, 250, .24), transparent 34%),
    linear-gradient(180deg, rgba(30, 41, 59, .98), rgba(15, 23, 42, .98)) !important;
}

.ccu-plan-badge {
  display: block !important;
  height: 26px !important;
  padding: 5px 10px !important;
  margin-bottom: 16px !important;
  border-radius: 8px !important;
  background: rgba(30, 64, 175, .36) !important;
  color: #93c5fd !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.ccu-recharge-plan strong {
  display: block !important;
  color: #f8fafc !important;
  font-size: 24px !important;
  line-height: 1.15 !important;
  margin-bottom: 14px !important;
  text-shadow: none !important;
}

.ccu-recharge-plan em {
  display: block !important;
  color: #bfdbfe !important;
  font-size: 15px !important;
  font-style: normal !important;
  line-height: 1.65 !important;
  flex: 1 1 auto !important;
}

.ccu-recharge-plan b {
  display: block !important;
  margin-top: 16px !important;
  padding: 11px 14px !important;
  border-radius: 9px !important;
  text-align: center !important;
  color: #f8fafc !important;
  background: linear-gradient(135deg, #2563eb, #0891b2) !important;
  box-shadow: 0 10px 22px rgba(37, 99, 235, .22) !important;
}

body.ccu-redeem-page .ccu-redeem-merge-root > :not(#ccu-redeem-buy-panel) {
  max-width: 100% !important;
  align-self: start !important;
}

body.ccu-api-keys-page [data-ccu-empty-toolbar-shell="true"] {
  display: none !important;
}

body.ccu-api-keys-page [data-ccu-filter-shell="true"] {
  margin: 22px 24px 18px !important;
  padding: 12px 16px !important;
  border: 1px solid rgba(148, 163, 184, .22) !important;
  border-radius: 16px !important;
  background: rgba(15, 23, 42, .56) !important;
  box-shadow: 0 12px 30px rgba(2, 6, 23, .16) !important;
}

body.ccu-api-keys-page [data-ccu-filter-row="true"] {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  padding-left: 18px !important;
  width: 100% !important;
}

body.ccu-api-keys-page [data-ccu-filter-row="true"] input {
  width: 280px !important;
  flex: 0 0 280px !important;
}

body.ccu-api-keys-page [data-ccu-api-toolbar-row="true"] {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  width: auto !important;
}

body.ccu-api-keys-page [data-ccu-api-toolbar-row="true"] > * {
  flex: 0 0 auto !important;
}

body.ccu-api-keys-page [data-ccu-api-toolbar="true"] {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.ccu-api-keys-page [data-ccu-api-table-shell="true"] {
  margin: 0 24px !important;
  border-radius: 16px !important;
}

body.ccu-api-keys-page [data-ccu-pagination-shell="true"] {
  margin: 14px 24px 0 !important;
  min-height: 56px !important;
  height: auto !important;
  padding: 12px 16px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(148, 163, 184, .22) !important;
  background: rgba(15, 23, 42, .74) !important;
  background-image: none !important;
  box-shadow: 0 12px 26px rgba(2, 6, 23, .16) !important;
}

body.ccu-api-keys-page [data-ccu-pagination-shell="true"] * {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.ccu-api-keys-page [data-ccu-pagination-shell="true"] button,
body.ccu-api-keys-page [data-ccu-pagination-shell="true"] [role="button"] {
  border: 1px solid rgba(96, 165, 250, .28) !important;
  border-radius: 10px !important;
  background: rgba(17, 24, 39, .86) !important;
}

@media (max-width: 1160px) {
  body.ccu-redeem-page .ccu-redeem-merge-root,
  .ccu-buy-grid {
    grid-template-columns: 1fr !important;
  }

  .ccu-redeem-plans,
  .ccu-plans {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.ccu-api-keys-page [data-ccu-filter-row="true"] {
    flex-wrap: wrap !important;
  }

  body.ccu-api-keys-page [data-ccu-api-toolbar-row="true"] {
    margin-left: 0 !important;
  }
}

@media (max-width: 720px) {
  .ccu-redeem-plans,
  .ccu-plans {
    grid-template-columns: 1fr !important;
  }
}

/* 2026-07-05 final pass: tighter recharge grid, header balance, API key controls. */
[data-ccu-top-balance="true"] {
  min-width: 146px !important;
  min-height: 46px !important;
  padding: 0 18px !important;
  border: 1px solid rgba(96, 165, 250, .32) !important;
  border-radius: 15px !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(56, 189, 248, .18), transparent 42%),
    linear-gradient(180deg, rgba(15, 23, 42, .96), rgba(2, 6, 23, .94)) !important;
  box-shadow: 0 16px 34px rgba(2, 6, 23, .26) !important;
}

[data-ccu-top-balance="true"] svg {
  width: 21px !important;
  height: 21px !important;
}

[data-ccu-top-balance="true"],
[data-ccu-top-balance="true"] * {
  font-size: 19px !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
}

body.ccu-dashboard-page .card [class*="bg-sky-"],
body.ccu-dashboard-page .card [class*="bg-cyan-"],
body.ccu-dashboard-page .card [class*="bg-blue-"],
body.ccu-dashboard-page .card [class*="bg-primary-"],
body.ccu-dashboard-page button [class*="bg-sky-"],
body.ccu-dashboard-page button [class*="bg-cyan-"],
body.ccu-dashboard-page button [class*="bg-blue-"],
body.ccu-dashboard-page button [class*="bg-primary-"],
body.ccu-dashboard-page a [class*="bg-sky-"],
body.ccu-dashboard-page a [class*="bg-cyan-"],
body.ccu-dashboard-page a [class*="bg-blue-"],
body.ccu-dashboard-page a [class*="bg-primary-"] {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.ccu-redeem-page .ccu-redeem-merge-root,
.ccu-buy-grid {
  width: calc(100% - 48px) !important;
  max-width: none !important;
  grid-template-columns: minmax(680px, 1fr) minmax(250px, 260px) !important;
  gap: 24px !important;
  align-items: start !important;
}

body.ccu-redeem-page #ccu-redeem-buy-panel,
.ccu-buy-grid .ccu-buy-card {
  width: 100% !important;
}

body.ccu-redeem-page .ccu-redeem-merge-root > :not(#ccu-redeem-buy-panel) {
  width: 100% !important;
  max-width: 260px !important;
  justify-self: stretch !important;
}

.ccu-redeem-plans,
.ccu-plans {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.ccu-recharge-plan {
  min-height: 158px !important;
  padding: 15px !important;
}

.ccu-recharge-plan em {
  font-size: 14px !important;
  line-height: 1.55 !important;
}

.ccu-recharge-plan b {
  margin-top: auto !important;
}

body.ccu-api-keys-page [data-ccu-filter-shell="true"] {
  margin: 20px 24px 16px !important;
  padding: 12px 16px !important;
}

body.ccu-api-keys-page [data-ccu-filter-row="true"] {
  min-height: 64px !important;
  padding-left: 24px !important;
  padding-right: 16px !important;
  gap: 12px !important;
}

body.ccu-api-keys-page [data-ccu-api-toolbar-row="true"] {
  margin-left: auto !important;
  padding-left: 12px !important;
}

body.ccu-api-keys-page [data-ccu-api-toolbar-row="true"] button,
body.ccu-api-keys-page [data-ccu-api-toolbar-row="true"] a {
  min-height: 44px !important;
  border-radius: 12px !important;
}

body.ccu-api-keys-page [data-ccu-pagination-shell="true"] {
  margin: 14px 24px 0 !important;
  padding: 12px 16px !important;
  border-radius: 16px !important;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, .97), rgba(2, 6, 23, .96)) !important;
  border: 1px solid rgba(148, 163, 184, .22) !important;
  box-shadow: 0 18px 44px rgba(2, 6, 23, .20) !important;
}

body.ccu-api-keys-page [data-ccu-pagination-shell="true"] > *,
body.ccu-api-keys-page [data-ccu-pagination-shell="true"] nav,
body.ccu-api-keys-page [data-ccu-pagination-shell="true"] div {
  background: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

@media (max-width: 1220px) {
  body.ccu-redeem-page .ccu-redeem-merge-root,
  .ccu-buy-grid {
    grid-template-columns: 1fr !important;
  }

  body.ccu-redeem-page .ccu-redeem-merge-root > :not(#ccu-redeem-buy-panel) {
    max-width: none !important;
  }
}

/* 2026-07-05 layout cleanup: API key table and recharge page composition. */
body.ccu-api-keys-page [data-ccu-hide-filter-control="true"] {
  display: none !important;
}

body.ccu-api-keys-page [data-ccu-api-workspace="true"] {
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 10px 0 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.ccu-api-keys-page [data-ccu-filter-shell="true"] {
  margin: 10px 24px 14px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.ccu-api-keys-page [data-ccu-filter-row="true"] {
  min-height: 52px !important;
  width: 100% !important;
  padding: 0 0 0 24px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: transparent !important;
  background-image: none !important;
}

body.ccu-api-keys-page [data-ccu-filter-row="true"] input {
  width: 300px !important;
  flex: 0 0 300px !important;
}

body.ccu-api-keys-page [data-ccu-api-toolbar-row="true"] {
  margin-left: auto !important;
  padding-left: 18px !important;
  justify-content: flex-end !important;
}

body.ccu-api-keys-page [data-ccu-api-table-shell="true"] {
  height: auto !important;
  min-height: 0 !important;
  margin: 0 24px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 16px !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.ccu-api-keys-page table[data-ccu-api-table] {
  overflow: hidden !important;
  border: 1px solid rgba(148, 163, 184, .24) !important;
  border-radius: 16px !important;
}

body.ccu-api-keys-page [data-ccu-pagination-shell="true"] {
  min-height: 44px !important;
  margin: 10px 24px 0 !important;
  padding: 0 8px !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.ccu-api-keys-page [data-ccu-pagination-shell="true"] > *,
body.ccu-api-keys-page [data-ccu-pagination-shell="true"] nav,
body.ccu-api-keys-page [data-ccu-pagination-shell="true"] div {
  border-color: transparent !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.ccu-redeem-page .ccu-redeem-merge-root {
  width: calc(100% - 48px) !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr) !important;
  grid-template-areas:
    "buy recent"
    "exchange recent" !important;
  gap: 22px !important;
  align-items: start !important;
}

body.ccu-redeem-page #ccu-redeem-buy-panel {
  grid-area: buy !important;
  position: static !important;
  width: 100% !important;
  min-height: 0 !important;
}

.ccu-recharge-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin-bottom: 18px !important;
}

.ccu-recharge-head h2 {
  margin: 0 0 8px !important;
}

.ccu-recharge-head p {
  margin: 0 !important;
}

.ccu-inline-balance {
  flex: 0 0 auto !important;
  min-width: 142px !important;
  padding: 13px 16px !important;
  border: 1px solid rgba(96, 165, 250, .34) !important;
  border-radius: 14px !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(56, 189, 248, .18), transparent 38%),
    linear-gradient(180deg, rgba(15, 23, 42, .94), rgba(2, 6, 23, .92)) !important;
  box-shadow: 0 16px 38px rgba(2, 6, 23, .22) !important;
}

.ccu-inline-balance span {
  display: block !important;
  color: #93a4bb !important;
  font-size: 13px !important;
  margin-bottom: 5px !important;
}

.ccu-inline-balance strong {
  display: block !important;
  color: #f8fafc !important;
  font-size: 28px !important;
  line-height: 1 !important;
}

body.ccu-redeem-page [data-ccu-hide-balance-card="true"],
body.ccu-redeem-page [data-ccu-hide-native-stack="true"] {
  display: none !important;
}

body.ccu-redeem-page #ccu-redeem-recent-panel {
  grid-area: recent !important;
  width: 100% !important;
  max-width: none !important;
  justify-self: stretch !important;
  align-self: start !important;
}

body.ccu-redeem-page #ccu-redeem-exchange-panel {
  grid-area: exchange !important;
  width: 100% !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  align-items: stretch !important;
}

body.ccu-redeem-page #ccu-redeem-exchange-panel > * {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

body.ccu-redeem-page #ccu-redeem-exchange-panel .card,
body.ccu-redeem-page #ccu-redeem-recent-panel.card {
  border-radius: 16px !important;
  border-color: rgba(148, 163, 184, .26) !important;
  background:
    radial-gradient(circle at 96% 0%, rgba(59, 130, 246, .10), transparent 30%),
    linear-gradient(180deg, rgba(17, 24, 39, .96), rgba(15, 23, 42, .98)) !important;
}

body.ccu-redeem-page #ccu-redeem-buy-panel h2 {
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  color: #f8fafc !important;
  text-shadow: 0 10px 28px rgba(59, 130, 246, .22) !important;
}

body.ccu-redeem-page [data-ccu-redeem-card="true"] {
  width: 100% !important;
  max-width: none !important;
  padding: 26px !important;
  overflow: hidden !important;
}

body.ccu-redeem-page [data-ccu-redeem-title="true"],
body.ccu-redeem-page [data-ccu-redeem-card="true"] h1,
body.ccu-redeem-page [data-ccu-redeem-card="true"] h2,
body.ccu-redeem-page [data-ccu-redeem-card="true"] h3 {
  display: block !important;
  color: #f8fafc !important;
  font-size: clamp(28px, 2.3vw, 38px) !important;
  line-height: 1.1 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  margin-bottom: 18px !important;
}

body.ccu-redeem-page [data-ccu-redeem-card="true"] form,
body.ccu-redeem-page [data-ccu-redeem-card="true"] [class*="space-y"] {
  max-width: none !important;
}

body.ccu-redeem-page [data-ccu-redeem-card="true"] textarea,
body.ccu-redeem-page [data-ccu-redeem-card="true"] input {
  min-height: 92px !important;
}

body.ccu-redeem-page [data-ccu-redeem-card="true"] button[type="submit"],
body.ccu-redeem-page [data-ccu-redeem-card="true"] form button {
  min-height: 48px !important;
  border-radius: 12px !important;
}

body.ccu-redeem-page [data-ccu-about-inline="true"] {
  margin: 18px 0 0 !important;
  padding: 18px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid rgba(148, 163, 184, .18) !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.ccu-redeem-page [data-ccu-about-inline="true"] > * {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.ccu-redeem-page [data-ccu-about-inline="true"] h1,
body.ccu-redeem-page [data-ccu-about-inline="true"] h2,
body.ccu-redeem-page [data-ccu-about-inline="true"] h3,
body.ccu-redeem-page [data-ccu-about-inline="true"] h4 {
  font-size: 16px !important;
  color: #bfdbfe !important;
  margin-bottom: 10px !important;
}

body.ccu-redeem-page .ccu-redeem-merge-root > :not(#ccu-redeem-buy-panel):not(#ccu-redeem-exchange-panel):not(#ccu-redeem-recent-panel) {
  max-width: none !important;
}

@media (max-width: 1180px) {
  body.ccu-redeem-page .ccu-redeem-merge-root {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "buy"
      "exchange"
      "recent" !important;
  }

  body.ccu-redeem-page #ccu-redeem-exchange-panel {
    grid-template-columns: 1fr !important;
  }
}

/* Recharge page compact height tuning. */
body.ccu-redeem-page .ccu-redeem-merge-root {
  grid-auto-rows: max-content !important;
}

body.ccu-redeem-page #ccu-redeem-exchange-panel,
body.ccu-redeem-page #ccu-redeem-recent-panel {
  align-self: start !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

body.ccu-redeem-page #ccu-redeem-exchange-panel {
  align-items: start !important;
}

body.ccu-redeem-page #ccu-redeem-exchange-panel > *,
body.ccu-redeem-page #ccu-redeem-recent-panel,
body.ccu-redeem-page #ccu-redeem-recent-panel > * {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

body.ccu-redeem-page [data-ccu-redeem-card="true"] {
  min-height: 0 !important;
  height: auto !important;
  padding: 22px !important;
}

body.ccu-redeem-page [data-ccu-redeem-card="true"] textarea,
body.ccu-redeem-page [data-ccu-redeem-card="true"] input {
  min-height: 74px !important;
}

body.ccu-redeem-page [data-ccu-about-inline="true"] {
  margin-top: 14px !important;
  padding-top: 13px !important;
}

body.ccu-redeem-page [data-ccu-about-inline="true"] p,
body.ccu-redeem-page [data-ccu-about-inline="true"] li,
body.ccu-redeem-page #ccu-redeem-recent-panel p,
body.ccu-redeem-page #ccu-redeem-recent-panel li {
  line-height: 1.5 !important;
}

/* 2026-07-05 API key table polish: width, group picker, copy/action buttons. */
body.ccu-api-keys-page [data-ccu-api-workspace="true"],
body.ccu-api-keys-page [data-ccu-filter-shell="true"],
body.ccu-api-keys-page [data-ccu-api-table-shell="true"],
body.ccu-api-keys-page [data-ccu-pagination-shell="true"] {
  width: calc(100% - 48px) !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

body.ccu-api-keys-page [data-ccu-filter-shell="true"],
body.ccu-api-keys-page [data-ccu-api-table-shell="true"],
body.ccu-api-keys-page [data-ccu-pagination-shell="true"] {
  margin-left: 24px !important;
  margin-right: 24px !important;
}

body.ccu-api-keys-page [data-ccu-api-table-shell="true"] {
  overflow: hidden !important;
  border: 1px solid rgba(96, 165, 250, .22) !important;
  border-radius: 16px !important;
  background: rgba(15, 23, 42, .52) !important;
}

body.ccu-api-keys-page [data-ccu-api-table-shell="true"] > *,
body.ccu-api-keys-page table[data-ccu-api-table] {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

body.ccu-api-keys-page table[data-ccu-api-table] {
  border: 0 !important;
  border-radius: 0 !important;
  table-layout: auto !important;
}

body.ccu-api-keys-page [data-ccu-group-cell] {
  min-width: 210px !important;
  width: auto !important;
  max-width: 320px !important;
}

body.ccu-api-keys-page [data-ccu-group-picker] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 34px !important;
  padding: 0 9px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  border-radius: 9px !important;
  border: 1px solid rgba(96, 165, 250, .30) !important;
  background: rgba(15, 23, 42, .72) !important;
  box-shadow: none !important;
}

body.ccu-api-keys-page [data-ccu-group-picker] > *,
body.ccu-api-keys-page [data-ccu-group-picker] button,
body.ccu-api-keys-page [data-ccu-group-picker] [role="button"],
body.ccu-api-keys-page [data-ccu-group-picker] [class*="trigger"],
body.ccu-api-keys-page [data-ccu-group-picker] [class*="Trigger"] {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.ccu-api-keys-page .ccu-copy-key-btn {
  min-height: 30px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(125, 211, 252, .70) !important;
  background: linear-gradient(135deg, #60a5fa, #38bdf8) !important;
  color: #061427 !important;
  font-weight: 900 !important;
  box-shadow: 0 10px 22px rgba(14, 165, 233, .18) !important;
}

body.ccu-api-keys-page [data-ccu-row-action="true"] {
  min-width: 34px !important;
  min-height: 32px !important;
  padding: 0 8px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(96, 165, 250, .34) !important;
  background: rgba(15, 23, 42, .42) !important;
  color: #bfdbfe !important;
  box-shadow: none !important;
}

body.ccu-api-keys-page [data-ccu-row-action="true"]:hover {
  border-color: rgba(125, 211, 252, .62) !important;
  background: rgba(30, 41, 59, .72) !important;
  color: #e0f2fe !important;
}

body.ccu-api-keys-page [data-ccu-edit-action="true"] {
  background: transparent !important;
  border-color: rgba(96, 165, 250, .42) !important;
  color: #bfdbfe !important;
}

/* 2026-07-05 dialog polish: rounded modals and delete-confirm button order. */
body [data-ccu-dialog="true"],
body [role="dialog"],
body [data-radix-dialog-content],
body [class*="DialogContent"],
body [class*="dialog-content"] {
  border-radius: 20px !important;
  overflow: hidden !important;
  border: 1px solid rgba(96, 165, 250, .34) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(59, 130, 246, .12), transparent 30%),
    linear-gradient(180deg, #172033, #0f172a) !important;
  box-shadow: 0 28px 80px rgba(2, 6, 23, .46) !important;
}

body [data-ccu-dialog="true"] > *,
body [role="dialog"] > * {
  border-radius: inherit !important;
}

body [data-ccu-dialog-cancel="true"] {
  background: rgba(15, 23, 42, .54) !important;
  border: 1px solid rgba(96, 165, 250, .38) !important;
  color: #bfdbfe !important;
  box-shadow: none !important;
}

body [data-ccu-dialog-cancel="true"]:hover {
  background: rgba(30, 41, 59, .80) !important;
  border-color: rgba(125, 211, 252, .62) !important;
  color: #e0f2fe !important;
}

body [data-ccu-dialog-delete="true"] {
  background: linear-gradient(135deg, #60a5fa, #38bdf8) !important;
  border: 1px solid rgba(125, 211, 252, .74) !important;
  color: #061427 !important;
  font-weight: 900 !important;
  box-shadow: 0 12px 28px rgba(14, 165, 233, .20) !important;
}

body [data-ccu-dialog-delete="true"]:hover {
  background: linear-gradient(135deg, #93c5fd, #67e8f9) !important;
  border-color: rgba(186, 230, 253, .90) !important;
  color: #061427 !important;
}