/* AXIOM AI visual layer for native allxd9router 0.5.75. No auth or billing logic changes. */
@font-face { font-family: AxiomAntonio; src: url('/fonts/antonio.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: AxiomJakarta; src: url('/fonts/jakarta.woff2') format('woff2'); font-weight: 400 800; font-display: swap; }
:root, html.dark {
  color-scheme: light;
  --ax-ink: #131413; --ax-blue: #dceeff; --ax-yellow: #ffdf39; --ax-purple: #e5c8fa; --ax-green: #75dfb3; --ax-orange: #ff642b;
  --color-bg: #f7fafb; --color-bg-alt: #eaf4ff; --color-bg-base: #fff; --color-bg-subtle: #edf4fc; --color-bg-hover: #e5effa;
  --color-surface: #fff; --color-surface-2: #f3f7fc; --color-surface-3: #e8eff7; --color-sidebar: #fff;
  --color-border: #131413; --color-border-subtle: #d5dce1;
  --color-text: #131413; --color-text-main: #131413; --color-text-primary: #131413; --color-text-secondary: #394754; --color-text-muted: #536270; --color-text-subtle: #536270;
  --color-primary: #131413; --color-primary-hover: #294564;
  --color-brand-50: #fffcef; --color-brand-100: #fff4b4; --color-brand-200: #ffec87; --color-brand-300: #746019; --color-brand-400: #ffdf39; --color-brand-500: #ffdf39; --color-brand-600: #efd02c; --color-brand-700: #92700d; --color-brand-800: #564608; --color-brand-900: #342d0c;
  --font-sans: AxiomJakarta, Arial, sans-serif;
  --shadow-soft: 3px 4px 0 #131413; --shadow-elevated: 6px 7px 0 #131413; --shadow-elev: 6px 7px 0 #131413; --shadow-warm: 3px 4px 0 #131413; --shadow-focus: 0 0 0 3px #295ee738;
}
body { font-family: AxiomJakarta, Arial, sans-serif !important; color: var(--ax-ink) !important; }
body::selection { background: var(--ax-yellow); color: var(--ax-ink); }
button, input, select, textarea { font-family: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid #295ee7 !important; outline-offset: 3px !important; }
button:disabled, input:disabled, select:disabled { cursor: not-allowed; }
.text-text-primary, .text-text-secondary, .text-text-main { color: var(--ax-ink) !important; }
.text-text-muted { color: #536270 !important; }
.bg-brand-500, .bg-primary { background: var(--ax-yellow) !important; color: var(--ax-ink) !important; }
.bg-brand-500:hover, .bg-primary:hover { background: #ffe967 !important; }
.landing-grid { background-image: radial-gradient(#29527e18 1px, transparent 1px) !important; background-size: 22px 22px !important; opacity: .6 !important; }

/* Native dashboard chrome remains intact; only presentation is shared across pages. */
aside:has(nav a[href='/dashboard/billing']) { background: #fff !important; border-right: 2px solid var(--ax-ink) !important; backdrop-filter: none !important; }
aside:has(nav a[href='/dashboard/billing']) > a, aside:has(nav a[href='/dashboard/billing']) > div { border-color: #d5dce1; }
aside h1, aside h2 { font-family: AxiomJakarta, Arial, sans-serif !important; font-weight: 800 !important; color: var(--ax-ink) !important; }
aside nav { padding: 16px 14px !important; }
aside nav a, aside nav button { border: 1px solid transparent; border-radius: 13px !important; color: #445462 !important; font-size: 12px !important; min-height: 42px; margin-bottom: 5px; }
aside nav a:hover, aside nav button:hover { background: var(--ax-blue) !important; color: var(--ax-ink) !important; border-color: #131413 !important; }
aside nav a.text-primary, aside nav a[class*='bg-primary'], aside nav a[class*='bg-brand'] { background: var(--ax-yellow) !important; border: 1.5px solid var(--ax-ink) !important; color: var(--ax-ink) !important; box-shadow: 2px 3px 0 #131413 !important; font-weight: 800 !important; }
aside nav .material-symbols-outlined { color: inherit !important; }
main > header { background: #fff !important; border-bottom: 2px solid var(--ax-ink) !important; backdrop-filter: none !important; min-height: 84px; padding-block: 16px !important; }
main > header h1 { font-family: AxiomJakarta, Arial, sans-serif !important; font-weight: 800 !important; color: var(--ax-ink) !important; font-size: clamp(16px, 1.7vw, 24px) !important; }
main > header button { border-radius: 999px !important; }
main > header button[aria-label='Donate'] { color: #843c7c !important; background: #f8edf8 !important; border: 1px solid #caabd0 !important; }
main > div.overflow-y-auto { background: #f7fafb; padding: clamp(20px, 3vw, 44px) !important; }
main > div.overflow-y-auto > .max-w-7xl { width: 100%; min-width: 0; }
main input:not([type='checkbox']):not([type='radio']):not([type='range']), main select, main textarea { background: #fff !important; color: var(--ax-ink) !important; border: 1.5px solid #131413 !important; border-radius: 12px !important; }
main input::placeholder, main textarea::placeholder { color: #64727e !important; }
main button { transition: background-color .15s, box-shadow .15s, color .15s; }
main button[class*='bg-brand-500'] { border: 1.5px solid #131413 !important; border-radius: 999px !important; box-shadow: 2px 3px 0 #131413 !important; }
main [role='dialog'], body > div[role='dialog'] { color: var(--ax-ink); }

/* Login uses the original form and native password/SSO/reset workflows. */
body > .min-h-screen:has(input[type='password']), body > div > .min-h-screen:has(input[type='password']) {
  min-height: 100svh !important;
  padding: 48px 28px !important;
  background: var(--ax-blue) !important;
  background-image: radial-gradient(ellipse at 10% 105%, #98c5fa 0 22%, transparent 22.3%), radial-gradient(ellipse at 88% -5%, #c8e3ff 0 24%, transparent 24.3%) !important;
  overflow-x: clip;
}
.min-h-screen:has(> .max-w-md input[type='password']) > .max-w-md {
  display: grid; grid-template-columns: 1.12fr 1fr; align-items: center; gap: clamp(42px, 6vw, 94px);
  max-width: 1090px !important; width: 100%; padding-block: 55px;
}
.min-h-screen:has(> .max-w-md input[type='password']) > .max-w-md > .text-center {
  text-align: left !important; margin: 0 !important; position: relative;
}
.min-h-screen:has(> .max-w-md input[type='password']) > .max-w-md > .text-center::before {
  content: 'AXIOM AI / ADMIN ACCESS'; display: inline-block; background: #fff; color: #131413;
  border: 2px solid #131413; border-radius: 999px; padding: 10px 16px; box-shadow: 3px 4px 0 #131413;
  font: 700 10px/1.6 AxiomJakarta, Arial, sans-serif; letter-spacing: 1.2px; margin-bottom: 27px;
}
.min-h-screen:has(> .max-w-md input[type='password']) > .max-w-md > .text-center::after {
  content: 'ONE GATEWAY. YOUR CONTROL.'; display: block; font: 700 11px/1.8 AxiomJakarta, Arial, sans-serif; letter-spacing: 1.7px; margin-top: 32px;
}
.min-h-screen:has(> .max-w-md input[type='password']) h1 {
  font-family: AxiomAntonio, Impact, sans-serif !important; font-size: clamp(68px, 8vw, 108px) !important; line-height: 1.05 !important;
  font-weight: 700 !important; text-transform: uppercase; letter-spacing: -3px !important; color: #131413 !important; margin-bottom: 24px !important;
}
.min-h-screen:has(> .max-w-md input[type='password']) > .max-w-md > .text-center p { color: #344759 !important; font-size: 16px !important; line-height: 1.9 !important; max-width: 330px; }
.min-h-screen:has(> .max-w-md input[type='password']) > .max-w-md > .bg-surface {
  background: #fff !important; border: 2px solid #131413 !important; border-radius: 30px !important; box-shadow: 8px 10px 0 #131413 !important; padding: 35px !important; position: relative;
}
.min-h-screen:has(> .max-w-md input[type='password']) > .max-w-md > .bg-surface::before {
  content: 'WELCOME BACK'; display: block; font: 700 34px/1.2 AxiomAntonio, Impact, sans-serif; margin-bottom: 28px; letter-spacing: -.5px; color: #131413;
}
.min-h-screen:has(> .max-w-md input[type='password']) form { gap: 24px !important; }
.min-h-screen:has(> .max-w-md input[type='password']) label { font-size: 12px !important; font-weight: 800 !important; letter-spacing: .4px; color: #131413 !important; }
.min-h-screen:has(> .max-w-md input[type='password']) input {
  min-height: 54px !important; border: 2px solid #131413 !important; background: #f7fafb !important; border-radius: 14px !important;
  padding: 15px 16px !important; color: #131413 !important; font: 15px/1.5 AxiomJakarta, Arial, sans-serif !important;
}
.min-h-screen:has(> .max-w-md input[type='password']) input::placeholder { color: #657480 !important; }
.min-h-screen:has(> .max-w-md input[type='password']) form button[type='submit'] {
  min-height: 54px !important; background: #ffdf39 !important; color: #131413 !important; border: 2px solid #131413 !important;
  border-radius: 999px !important; box-shadow: 4px 5px 0 #131413 !important; font: 800 13px/1.5 AxiomJakarta, Arial, sans-serif !important;
  text-transform: uppercase; letter-spacing: .8px;
}
.min-h-screen:has(> .max-w-md input[type='password']) form button[type='submit']:hover { background: #ffe971 !important; }
.min-h-screen:has(> .max-w-md input[type='password']) form p { line-height: 1.7; }
.min-h-screen:has(> .max-w-md input[type='password']) form p.text-red-500 { color: #b32135 !important; background: #fff0f1; border: 1px solid #efb8c0; border-radius: 10px; padding: 10px 12px; }
.min-h-screen:has(> .max-w-md input[type='password']) form code { background: #f1f4f7 !important; color: #384652 !important; padding: 3px 6px; border: 1px solid #ccd4dc; }

@media (max-width: 900px) {
  .min-h-screen:has(> .max-w-md input[type='password']) > .max-w-md { max-width: 500px !important; grid-template-columns: minmax(0,1fr); gap: 32px; padding-block: 12px; }
  .min-h-screen:has(> .max-w-md input[type='password']) > .max-w-md > .text-center { text-align: center !important; }
  .min-h-screen:has(> .max-w-md input[type='password']) > .max-w-md > .text-center p { margin-inline: auto; }
  .min-h-screen:has(> .max-w-md input[type='password']) h1 { font-size: 70px !important; margin-bottom: 17px !important; }
  .min-h-screen:has(> .max-w-md input[type='password']) > .max-w-md > .text-center::after { margin-top: 18px; font-size: 9px; }
}
@media (max-width: 600px) {
  body > .min-h-screen:has(input[type='password']), body > div > .min-h-screen:has(input[type='password']) { padding: 30px 21px 42px !important; align-items: start !important; }
  .min-h-screen:has(> .max-w-md input[type='password']) > .max-w-md > .bg-surface { padding: 26px 22px !important; border-radius: 23px !important; box-shadow: 5px 6px 0 #131413 !important; }
  .min-h-screen:has(> .max-w-md input[type='password']) > .max-w-md > .text-center::before { font-size: 8px; padding: 8px 12px; margin-bottom: 20px; }
  .min-h-screen:has(> .max-w-md input[type='password']) > .max-w-md > .text-center p { font-size: 13px !important; }
  main > header { min-height: 72px; padding-inline: 16px !important; }
  main > div.overflow-y-auto { padding: 22px 16px !important; }
  main > header button[aria-label='Donate'] { padding-inline: 8px !important; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition: none !important; scroll-behavior: auto !important; } }

/* Native BillingClient root; all seven tabs and inline Modal descendants. */
main > div.overflow-y-auto > div > div.flex.flex-col.gap-6.max-w-7xl {
  width: 100%;
  min-width: 0;
  gap: 28px !important;
  color: var(--ax-ink, #131413);
  font-family: AxiomJakarta, sans-serif;

  & :where(div, form, section) { min-width: 0; }
  & :where(h1, h2, h3, h4, p, li, label) { overflow-wrap: anywhere; }
  & :where(p, li) { line-height: 1.7; }
  & :where(h1, h2, h3, h4) { color: var(--ax-ink, #131413) !important; }
  & :where(h2, h3) { font-weight: 800 !important; }
  & h2 { font-size: clamp(20px, 2.2vw, 28px) !important; line-height: 1.2; }
  & h3 { font-size: 18px !important; }
  & :is(.text-text-muted, .text-text-secondary) { color: #505b60 !important; }
  & :is(.text-text-main, .text-text-primary) { color: var(--ax-ink, #131413) !important; }

  /* Stable direct-child header; toast insertion cannot change its selection. */
  & > div.border-b:has(h1) {
    position: relative;
    align-items: flex-start !important;
    padding: 30px !important;
    border: 2px solid var(--ax-ink, #131413) !important;
    border-radius: 28px;
    background: var(--ax-blue, #dceeff);
    box-shadow: 5px 6px 0 var(--ax-ink, #131413);
  }
  & > div.border-b:has(h1) > div:first-child::before {
    content: "AXIOM / BILLING";
    display: block;
    margin-bottom: 15px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .18em;
  }
  & > div.border-b:has(h1) > div:first-child > .flex { flex-wrap: wrap; }
  & > div.border-b:has(h1) h1 {
    font-family: AxiomAntonio, sans-serif !important;
    font-size: clamp(38px, 4.6vw, 66px) !important;
    line-height: 1.04 !important;
    font-weight: 700 !important;
    letter-spacing: -.045em !important;
    text-transform: uppercase;
  }
  & > div.border-b:has(h1) p { max-width: 680px; margin-top: 16px !important; }
  & > div.border-b:has(h1) > .flex { flex-wrap: wrap; flex-shrink: 0; }

  /* Native tab selection is represented by bg-brand-500, not aria-selected. */
  & > div.flex.flex-wrap.border-b {
    gap: 8px !important;
    padding: 12px !important;
    border: 2px solid var(--ax-ink, #131413) !important;
    border-radius: 24px;
    background: #fffdf5;
  }
  & > div.flex.flex-wrap.border-b > button {
    min-height: 42px;
    max-width: 100%;
    padding: 10px 15px !important;
    border: 2px solid transparent;
    border-radius: 999px !important;
    color: var(--ax-ink, #131413) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-align: left;
    white-space: normal;
  }
  & > div.flex.flex-wrap.border-b > button.bg-brand-500 {
    border-color: var(--ax-ink, #131413) !important;
    background: var(--ax-yellow, #ffdf39) !important;
    box-shadow: 2px 3px 0 var(--ax-ink, #131413) !important;
  }
  & > div.flex.flex-wrap.border-b > button:not(.bg-brand-500):hover { background: var(--ax-blue, #dceeff) !important; }

  /* Card's shared component emits bg-surface + border + rounded-[14px]. */
  & div.bg-surface.border {
    border: 2px solid var(--ax-ink, #131413) !important;
    border-radius: 24px !important;
    background: #fffdf5 !important;
    box-shadow: 5px 6px 0 var(--ax-ink, #131413) !important;
  }
  & .grid > div.bg-surface.border:nth-child(4n + 1) { background: var(--ax-green, #75dfb3) !important; }
  & .grid > div.bg-surface.border:nth-child(4n + 2) { background: var(--ax-purple, #e5c8fa) !important; }
  & .grid > div.bg-surface.border:nth-child(4n + 3) { background: var(--ax-yellow, #ffdf39) !important; }
  & .grid > div.bg-surface.border:nth-child(4n + 4) { background: var(--ax-blue, #dceeff) !important; }
  & .grid > div.bg-surface.border.p-4 { padding: 22px !important; }
  & .grid > div.bg-surface.border.p-4 > .text-2xl {
    margin: 14px 0 8px;
    font-family: AxiomAntonio, sans-serif;
    font-size: clamp(32px, 3vw, 44px) !important;
    line-height: 1.15;
    overflow-wrap: anywhere;
  }
  & .grid > div.bg-surface.border.p-4 .text-xs.uppercase { font-size: 10px !important; letter-spacing: .09em; }
  & div.bg-surface.border[class~="border-brand-500/20"] { background: var(--ax-blue, #dceeff) !important; }
  & div.bg-surface.border[class~="border-emerald-500/20"] { background: var(--ax-green, #75dfb3) !important; }
  & div.bg-surface.border.border-dashed { border-style: dashed !important; background: #edf0ed !important; }
  & div.bg-surface.border.ring-2 { outline: 3px solid var(--ax-orange, #ff642b); outline-offset: 3px; }
  & div.bg-surface.border > .flex.items-center.justify-between.mb-4 { padding-bottom: 16px; border-bottom: 2px solid var(--ax-ink, #131413); }
  & div.bg-surface.border .list-decimal { padding-left: 0; }
  & div.bg-surface.border .list-decimal li + li { margin-top: 12px; }
  & div.bg-surface.border .my-4.border-y { border-color: var(--ax-ink, #131413) !important; }
  & div.bg-surface.border .my-4.border-y > .text-2xl { color: var(--ax-ink, #131413) !important; font-size: 32px !important; }

  /* Full-size native buttons only: switches, traffic-light close and icon actions retain dimensions. */
  & :is(button.inline-flex.font-semibold, a.inline-flex.border) {
    min-height: 38px;
    height: auto !important;
    max-width: 100%;
    padding: 9px 15px !important;
    border: 2px solid var(--ax-ink, #131413) !important;
    border-radius: 999px !important;
    background: #fffdf5 !important;
    color: var(--ax-ink, #131413) !important;
    box-shadow: 2px 3px 0 var(--ax-ink, #131413) !important;
    font-size: 12px !important;
    line-height: 1.4;
    white-space: normal;
    text-align: center;
  }
  & button.inline-flex.font-semibold.bg-brand-500 { background: var(--ax-yellow, #ffdf39) !important; }
  & button.inline-flex.font-semibold.bg-red-500 { background: #ffe1d9 !important; color: #9b211a !important; }
  & button.inline-flex.font-semibold.bg-green-600 { background: var(--ax-green, #75dfb3) !important; color: #123d2b !important; }
  & :is(button.inline-flex.font-semibold, a.inline-flex.border):hover:not(:disabled) { background: var(--ax-blue, #dceeff) !important; }
  & :is(button.inline-flex.font-semibold, a.inline-flex.border):active:not(:disabled) { box-shadow: 0 0 0 var(--ax-ink, #131413) !important; transform: translate(2px, 2px); }
  & button:disabled { cursor: not-allowed !important; }
  & button[role="switch"] { outline: 1px solid var(--ax-ink, #131413); outline-offset: 1px; }
  & button[role="switch"][aria-checked="true"] { background: #276d4d !important; }
  & button[role="switch"][aria-checked="false"] { background: #737d80 !important; }
  & :is(button, a, input, select, textarea):focus-visible { outline: 3px solid #234fc7 !important; outline-offset: 4px !important; }
  & :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    max-width: 100%;
    min-width: 0;
    min-height: 44px;
    border: 2px solid var(--ax-ink, #131413) !important;
    border-radius: 13px !important;
    background: #fffef9 !important;
    color: var(--ax-ink, #131413) !important;
    box-shadow: none !important;
    font-size: 14px !important;
  }
  & input[readonly] { background: #edf5fa !important; }
  & :is(input, textarea)::placeholder { color: #657175 !important; opacity: 1; }
  & input[type="checkbox"] { accent-color: #276d4d; }
  & :is(input, select, textarea)[class*="border-red-"] { border-color: #b72b22 !important; }
  & label { font-weight: 700 !important; }
  & form.max-w-3xl { max-width: 960px !important; width: 100%; }
  & :is(code, .font-mono) { overflow-wrap: anywhere; }

  /* Preserve real status semantics against the light pastel surfaces. */
  & :is(.text-emerald-400, .text-emerald-500, .text-emerald-600, .text-green-600, [class~="dark:text-green-400"], [class~="dark:text-emerald-400"]) { color: #15563a !important; }
  & :is(.text-amber-400, .text-amber-500, .text-amber-600, .text-yellow-600, [class~="dark:text-yellow-400"], [class~="dark:text-amber-400"]) { color: #784707 !important; }
  & :is(.text-red-400, .text-red-500, .text-red-600, [class~="dark:text-red-400"]) { color: #a5261e !important; }
  & :is(.text-brand-500, .text-brand-600, [class~="dark:text-brand-400"], [class~="dark:text-brand-300"], .text-purple-500, [class~="dark:text-purple-400"]) { color: #5b327a !important; }
  & :is(.text-blue-500, .text-blue-600, [class~="dark:text-blue-400"], .text-cyan-500) { color: #215373 !important; }
  & span.inline-flex.rounded-full.font-semibold { border: 1px solid currentColor; padding: 4px 9px !important; line-height: 1.35; }
  & span[class~="bg-green-500/10"] { background: #d3f4df !important; }
  & span[class~="bg-yellow-500/10"] { background: #fff0b1 !important; }
  & span[class~="bg-red-500/10"] { background: #ffe0db !important; }
  & span[class~="bg-blue-500/10"] { background: #dceeff !important; }
  & span[class~="bg-brand-500/10"] { background: #e5c8fa !important; }

  /* Tables keep all native columns, with scrolling contained to their wrapper. */
  & .overflow-x-auto { width: 100%; max-width: 100%; overflow-x: auto !important; overscroll-behavior-x: contain; }
  & table { min-width: 660px; width: 100%; background: #fffef9; color: var(--ax-ink, #131413); font-size: 12px !important; }
  & thead tr { background: var(--ax-blue, #dceeff) !important; color: var(--ax-ink, #131413) !important; }
  & th { padding: 16px !important; border-bottom: 2px solid var(--ax-ink, #131413) !important; font-size: 10px; font-weight: 800 !important; letter-spacing: .055em; text-transform: uppercase; }
  & td { padding: 15px 16px !important; border-bottom: 1px solid #ccd4d5; vertical-align: middle; }
  & tbody tr:last-child td { border-bottom: 0; }
  & tbody tr:hover { background: #f0f7fc !important; }
  & td[colspan] { padding: 45px 20px !important; font-size: 14px; }
  & .rounded-xl.border.overflow-hidden:has(table) { border: 2px solid var(--ax-ink, #131413) !important; border-radius: 20px !important; background: #fffef9; }
  & .rounded-xl.border.overflow-hidden:has(table) > .bg-surface-2 { background: var(--ax-purple, #e5c8fa) !important; padding: 16px !important; flex-wrap: wrap; gap: 8px; }
  & .flex.flex-wrap.bg-surface-2.border { border: 2px solid var(--ax-ink, #131413) !important; border-radius: 20px !important; background: #fffdf5 !important; }
  & .flex.flex-wrap.bg-surface-2.border > .flex { flex-wrap: wrap; }
  & .flex.flex-wrap.bg-surface-2.border button { border-radius: 999px !important; padding: 8px 12px !important; }
  & .flex.flex-wrap.bg-surface-2.border button.bg-brand-500 { background: var(--ax-yellow, #ffdf39) !important; color: var(--ax-ink, #131413) !important; outline: 1px solid var(--ax-ink, #131413); }

  /* Native Modal is inline, not a portal: these never target other pages. */
  & > div.fixed.inset-0.z-50 { padding: 20px !important; }
  & > div.fixed.inset-0.z-50 > div.relative.bg-surface {
    max-height: calc(100dvh - 40px);
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  & > div.fixed.inset-0.z-50 > div.relative.bg-surface > div.border-b {
    padding: 18px !important;
    flex-shrink: 0;
    border-color: var(--ax-ink, #131413) !important;
    background: var(--ax-yellow, #ffdf39);
    border-radius: 22px 22px 0 0;
  }
  & > div.fixed.inset-0.z-50 > div.relative.bg-surface > div.overflow-y-auto { min-height: 0; padding: 24px !important; overscroll-behavior: contain; }
  & > div.fixed.inset-0.z-50 h2 { font-family: AxiomAntonio, sans-serif; font-size: 27px !important; }
  & > div.fixed.bottom-6 { max-width: calc(100vw - 40px); border: 2px solid var(--ax-ink, #131413); box-shadow: 3px 4px 0 var(--ax-ink, #131413); overflow-wrap: anywhere; }
}

@media (max-width: 1100px) {
  main > div.overflow-y-auto > div > div.flex.flex-col.gap-6.max-w-7xl > div.border-b:has(h1) { flex-direction: column !important; }
}

@media (max-width: 639px) {
  main > div.overflow-y-auto > div > div.flex.flex-col.gap-6.max-w-7xl {
    gap: 22px !important;
    padding-right: 5px;
    & > div.border-b:has(h1) { padding: 22px 18px !important; border-radius: 24px; }
    & > div.border-b:has(h1) h1 { font-size: clamp(34px, 10vw, 48px) !important; }
    & > div.border-b:has(h1) > .flex { width: 100%; }
    & > div.border-b:has(h1) > .flex a { max-width: 100%; }
    & > div.flex.flex-wrap.border-b { padding: 8px !important; border-radius: 22px; }
    & > div.flex.flex-wrap.border-b > button { flex: 1 1 100%; min-height: 42px; }
    & div.bg-surface.border:is(.p-6, .p-8) { padding: 20px 16px !important; }
    & .grid { grid-template-columns: minmax(0, 1fr) !important; }
    & > div.flex.flex-col > div.flex.items-center.justify-between { align-items: flex-start !important; flex-wrap: wrap; gap: 14px; }
    & div.bg-surface.border .flex.items-center.gap-6 { flex-wrap: wrap; gap: 16px !important; }
    & div.bg-surface.border .flex.items-center.gap-2:has(h3) { flex-wrap: wrap; }
    & .flex.justify-end.gap-2 { flex-wrap: wrap; }
    & form .flex.items-center.gap-2.pt-2 { flex-wrap: wrap; }
    & :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { font-size: 16px !important; }
    & > div.fixed.inset-0.z-50 { padding: 10px !important; }
    & > div.fixed.inset-0.z-50 > div.relative.bg-surface { max-height: calc(100dvh - 20px); }
    & > div.fixed.inset-0.z-50 > div.relative.bg-surface > div.overflow-y-auto { padding: 18px 14px !important; }
    & > div.fixed.inset-0.z-50 > div.relative.bg-surface > div.border-b { gap: 10px; padding: 16px !important; }
    & > div.fixed.inset-0.z-50 h2 { font-size: 25px !important; }
  }
}

/* Shared native ModelShowcaseManager root: dedicated page and billing tab. */
.space-y-8.pb-16.animate-fade-in.text-gray-200 {
  color: var(--ax-ink, #131413) !important;
  font-family: AxiomJakarta, sans-serif;
  min-width: 0;
  padding-bottom: 3rem !important;
  overflow-wrap: anywhere;

  & :is(.text-white, .text-gray-200, .text-gray-300, .text-gray-950) {
    color: var(--ax-ink, #131413) !important;
  }

  & :is(.text-gray-400, .text-gray-500, .text-gray-600) {
    color: #47535d !important;
  }

  & :is(.text-emerald-300, .text-emerald-400) { color: #12603d !important; }
  & :is(.text-amber-300, .text-amber-400) { color: #754900 !important; }
  & .text-blue-400 { color: #174d7d !important; }
  & .text-purple-400 { color: #68328b !important; }
  & .text-red-400 { color: #a52025 !important; }

  & :is(div, label, button, input, textarea, select)[class*="bg-gray-9"] {
    background: #f7fbff !important;
  }

  & :is(div, span, button)[class*="bg-gray-8"] {
    background: #e7edf3 !important;
  }

  & :is(div, label, span, button, input, textarea, select)[class*="border-gray-8"],
  & :is(div, label, span, button, input, textarea, select)[class*="border-gray-7"] {
    border-color: var(--ax-ink, #131413) !important;
  }

  & > .border-b {
    padding: clamp(1.25rem, 3vw, 2.5rem) !important;
    border: 2px solid var(--ax-ink, #131413) !important;
    border-radius: 28px !important;
    background: var(--ax-purple, #e5c8fa) !important;
    box-shadow: 5px 6px 0 var(--ax-ink, #131413) !important;
    gap: 1.5rem !important;
    align-items: flex-start !important;
  }

  & > .border-b > div { min-width: 0; }
  & > .border-b > div:first-child { flex: 1; }
  & > .border-b .flex.items-center.gap-3 { align-items: flex-start !important; }
  & > .border-b .p-2.rounded-xl {
    background: var(--ax-yellow, #ffdf39) !important;
    color: var(--ax-ink, #131413) !important;
    border: 2px solid currentColor !important;
    border-radius: 50% !important;
    flex-shrink: 0;
  }

  & h1 {
    font-family: AxiomAntonio, sans-serif !important;
    font-size: clamp(2rem, 3.7vw, 3.4rem) !important;
    font-weight: 700 !important;
    line-height: 1.08 !important;
    letter-spacing: -.025em !important;
  }

  & > .border-b p { font-size: .8rem !important; line-height: 1.8 !important; margin-top: .85rem !important; }
  & > .grid.grid-cols-2 { gap: 1rem !important; }
  & > .grid > .p-4.rounded-2xl.bg-gray-900 {
    background: var(--ax-yellow, #ffdf39) !important;
    border: 2px solid var(--ax-ink, #131413) !important;
    border-radius: 22px !important;
    box-shadow: 4px 5px 0 var(--ax-ink, #131413) !important;
    padding: 1.2rem !important;
    min-width: 0;
  }

  & > .grid > .p-4.rounded-2xl.bg-gray-900:nth-child(2) { background: var(--ax-green, #75dfb3) !important; }
  & > .grid > .p-4.rounded-2xl.bg-gray-900:nth-child(3) { background: var(--ax-purple, #e5c8fa) !important; }
  & > .grid > .p-4.rounded-2xl.bg-gray-900:nth-child(4) { background: #ffc6a8 !important; }
  & > .grid > .p-4 > span { color: var(--ax-ink, #131413) !important; font-size: .75rem !important; }
  & > .grid > .p-4 > .text-2xl {
    font-family: AxiomAntonio, sans-serif !important;
    font-size: 2.8rem !important;
    color: var(--ax-ink, #131413) !important;
    line-height: 1.15 !important;
    margin-top: .7rem !important;
  }

  & > .flex.p-4.rounded-2xl {
    background: #f7fbff !important;
    border: 2px solid var(--ax-ink, #131413) !important;
    border-radius: 24px !important;
    padding: 1.1rem !important;
    gap: 1rem !important;
    flex-wrap: wrap;
  }

  & > .flex.p-4.rounded-2xl > div { min-width: 0; max-width: 100% !important; }
  & :is(input:not([type="checkbox"]), select, textarea) {
    min-height: 44px !important;
    min-width: 0;
    max-width: 100%;
    border: 2px solid var(--ax-ink, #131413) !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: var(--ax-ink, #131413) !important;
    font-size: .8rem !important;
    line-height: 1.5 !important;
    box-shadow: none !important;
  }

  & input::placeholder, & textarea::placeholder { color: #596570 !important; opacity: 1; }
  & input[type="checkbox"] { accent-color: #12603d; flex-shrink: 0; }
  & textarea { min-height: 96px !important; resize: vertical; }
  & label { font-size: .75rem !important; line-height: 1.6 !important; }
  & button {
    font-family: inherit;
    min-height: 34px;
    font-size: .75rem;
    line-height: 1.5;
    border-radius: 999px !important;
    transition: background-color 140ms, box-shadow 140ms, color 140ms !important;
  }

  & button[class*="bg-gray-"], & button[class*="bg-emerald-500"], & button[class*="bg-red-"] {
    border: 1.5px solid var(--ax-ink, #131413) !important;
  }

  & button.bg-emerald-500 {
    background: var(--ax-yellow, #ffdf39) !important;
    color: var(--ax-ink, #131413) !important;
    box-shadow: 3px 3px 0 var(--ax-ink, #131413) !important;
    min-height: 42px;
  }

  & button[class*="bg-emerald-500/"], & span[class*="bg-emerald-500/"], & div[class*="bg-emerald-500/"] { background: #d1f5e5 !important; }
  & :is(span, div, button)[class*="bg-amber-500/"] { background: #fff0ac !important; }
  & :is(span, div)[class*="bg-blue-500/"] { background: var(--ax-blue, #dceeff) !important; }
  & :is(span, div)[class*="bg-purple-500/"] { background: var(--ax-purple, #e5c8fa) !important; }
  & :is(span, div, button)[class*="bg-red-500/"] { background: #ffe2dc !important; }
  & button.bg-red-600 { background: #b52228 !important; color: #fff !important; box-shadow: 3px 3px 0 var(--ax-ink, #131413) !important; }
  & button:not(:disabled):hover { filter: brightness(.96); }
  & button:disabled { opacity: .45 !important; cursor: not-allowed; box-shadow: none !important; }
  & :is(button, input, select, textarea, a):focus-visible {
    outline: 3px solid #3259bc !important;
    outline-offset: 3px !important;
  }

  & > .grid.grid-cols-1 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr)) !important;
    gap: 1.5rem !important;
  }

  & .p-5.rounded-3xl.bg-gray-900.group {
    padding: 1.35rem !important;
    border: 2px solid var(--ax-ink, #131413) !important;
    background: #f7fbff !important;
    border-radius: 26px !important;
    box-shadow: 5px 6px 0 var(--ax-ink, #131413) !important;
    min-width: 0;
    opacity: 1 !important;
  }

  & .p-5.rounded-3xl.bg-gray-900.group.border-gray-850 { border-style: dashed !important; background: #e9edf1 !important; }
  & .group h3 { font-size: 1.25rem !important; line-height: 1.35 !important; letter-spacing: -.035em; }
  & .group code { font-size: .75rem !important; line-height: 1.6 !important; }
  & .group p { font-size: .75rem !important; line-height: 1.8 !important; }
  & .group .line-clamp-2 { -webkit-line-clamp: unset !important; display: block !important; overflow: visible !important; }
  & .group span[class*="bg-"]:not(.rounded-full):not(.w-2) { border-radius: 8px !important; }
  & .group span.border { border-color: currentColor !important; }
  & .group > div > .mt-4 {
    background: var(--ax-blue, #dceeff) !important;
    border: 1.5px solid var(--ax-ink, #131413) !important;
    padding: .8rem !important;
    flex-wrap: wrap;
    gap: .5rem;
    border-radius: 16px !important;
  }

  & .group > .mt-5 { flex-wrap: wrap; gap: .7rem; padding-top: 1rem !important; border-top-width: 2px !important; }
  & .group > .mt-5 > .flex { flex-wrap: wrap; }
  & .group .w-7.h-7 { width: 34px !important; height: 34px !important; }
  & button.relative.inline-flex.h-5.w-9 {
    width: 36px !important;
    height: 20px !important;
    min-height: 20px !important;
    flex-shrink: 0;
    border: 1px solid var(--ax-ink, #131413) !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  & button.relative.inline-flex.bg-emerald-500 { background: #12603d !important; }
  & button.relative.inline-flex.bg-amber-500 { background: #926100 !important; }
  & button.relative.inline-flex.bg-gray-700 { background: #68747c !important; }
  & .fixed.inset-0 {
    background: rgb(19 20 19 / 58%) !important;
    padding: 1.25rem !important;
    overscroll-behavior: contain;
    z-index: 100 !important;
  }

  & .fixed.inset-0 > .relative {
    background: var(--ax-blue, #dceeff) !important;
    border: 2px solid var(--ax-ink, #131413) !important;
    border-radius: 28px !important;
    box-shadow: 6px 7px 0 var(--ax-ink, #131413) !important;
    max-height: calc(100dvh - 3rem) !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin-block: 0 !important;
  }

  & .fixed h2 { font-family: AxiomAntonio, sans-serif !important; font-size: 2.25rem !important; line-height: 1.2 !important; padding-right: 1.5rem; }
  & .fixed h3 { font-family: AxiomAntonio, sans-serif !important; font-size: 2rem !important; line-height: 1.2 !important; }
  & .fixed .absolute.top-5 { border: 1.5px solid var(--ax-ink, #131413) !important; }
  & .fixed .flex.border-b {
    border: 2px solid var(--ax-ink, #131413) !important;
    border-radius: 20px !important;
    background: #f7fbff !important;
    padding: .5rem;
    gap: .4rem !important;
    flex-wrap: wrap;
  }

  & .fixed .flex.border-b > button { border: 1.5px solid transparent; padding: .65rem .85rem !important; }
  & .fixed .flex.border-b > button.border-emerald-500 { background: var(--ax-yellow, #ffdf39) !important; color: var(--ax-ink, #131413) !important; border-color: var(--ax-ink, #131413) !important; }
  & .fixed .grid > div, & .fixed form .flex > div { min-width: 0; }
  & .fixed .max-h-48 { border-width: 2px !important; }
  & .fixed .max-h-48 > button { border-radius: 0 !important; min-height: 46px; }
  & .fixed .max-h-48 > button > .shrink-0 { flex-wrap: wrap; justify-content: flex-end; }
  & .fixed label.cursor-pointer { border-width: 2px !important; }
  & .fixed form > .border-t { flex-wrap: wrap; border-top-width: 2px !important; }
  & .fixed.bottom-6 { max-width: calc(100vw - 2rem); right: 1rem !important; border: 2px solid var(--ax-ink, #131413) !important; color: var(--ax-ink, #131413) !important; box-shadow: 4px 5px 0 var(--ax-ink, #131413) !important; z-index: 110 !important; }

  @media (max-width: 639px) {
    & > .border-b { padding: 1.2rem !important; border-radius: 22px !important; }
    & > .border-b .flex.items-center.gap-3 { flex-wrap: wrap; }
    & > .grid > .p-4.rounded-2xl.bg-gray-900 { padding: .9rem !important; }
    & > .flex.p-4.rounded-2xl > div { width: 100%; }
    & > .flex.p-4.rounded-2xl select { width: 100%; }
    & .p-5.rounded-3xl.bg-gray-900.group { padding: 1rem !important; }
    & .group > .mt-5 > .flex:last-child { width: 100%; }
    & .fixed.inset-0 { padding: .75rem !important; }
    & .fixed.inset-0 > .relative { padding: 1rem !important; border-radius: 22px !important; max-height: calc(100dvh - 2rem) !important; }
    & .fixed .flex.justify-between { flex-wrap: wrap; gap: .65rem; }
    & .fixed .grid.grid-cols-2 { grid-template-columns: minmax(0, 1fr) !important; }
    & .fixed .max-h-48 > button { flex-wrap: wrap; }
    & .fixed .max-h-48 .truncate { white-space: normal !important; overflow-wrap: anywhere; }
  }

  @media (prefers-reduced-motion: reduce) {
    animation: none !important;
    & .animate-pulse { animation: none !important; }
    & button { transition: none !important; }
  }
}