:root {
  --kairos-primary: #0f766e;
  --kairos-primary-hover: #115e59;
  --kairos-primary-soft: #f0fdfa;
  --kairos-accent: #ea580c;
  --kairos-ink: #172033;
  --kairos-ui-blue: #1677ff;
  --kairos-ui-blue-hover: #096dd9;
  --kairos-ui-blue-soft: #eff6ff;
}

/* Internal UI: neutral text keeps the native layout and interactions intact. */
body:not(:has(.card-glass)) [class*="text-primary-"] {
  color: #1f2937 !important;
}

/* Internal UI: keep actions blue while body text stays neutral. */
body:not(:has(.card-glass)) [class*="bg-primary-500"],
body:not(:has(.card-glass)) [class*="bg-primary-600"] {
  background-color: var(--kairos-ui-blue) !important;
}
body:not(:has(.card-glass)) [class*="hover:bg-primary-600"]:hover,
body:not(:has(.card-glass)) [class*="hover:bg-primary-700"]:hover {
  background-color: var(--kairos-ui-blue-hover) !important;
}
body:not(:has(.card-glass)) [class*="bg-primary-50"],
body:not(:has(.card-glass)) [class*="bg-primary-100"] {
  background-color: var(--kairos-ui-blue-soft) !important;
}
body:not(:has(.card-glass)) [class*="border-primary-"] { border-color: #bfdbfe !important; }
body:not(:has(.card-glass)) [class*="ring-primary-"] { --tw-ring-color: #93c5fd !important; }
body:not(:has(.card-glass)) input:focus,
body:not(:has(.card-glass)) select:focus,
body:not(:has(.card-glass)) textarea:focus {
  border-color: var(--kairos-ui-blue) !important;
  --tw-ring-color: #60a5fa !important;
}

/* Usage page: retain the native metrics, filters, table, export, and pagination,
   while removing the four secondary breakdown/chart panels from the visual flow. */
body:not(:has(.card-glass)) .space-y-6 > .space-y-4:has(> .card.p-4 > .flex.flex-wrap.items-center.gap-4) > .grid {
  display: none !important;
}
body:not(:has(.card-glass)) .space-y-6 > .space-y-4:has(> .card.p-4 > .flex.flex-wrap.items-center.gap-4) > .card.p-4 {
  margin-bottom: 0 !important;
}
body:not(:has(.card-glass)) .space-y-6 > .space-y-4:has(> .card.p-4 > .flex.flex-wrap.items-center.gap-4) + .card.p-6 {
  margin-top: 0 !important;
}

/* Shared page surface: preserve component geometry, but match the clean reference
   palette and reduce the oversized shadows on account, key, redeem, and status views. */
body:not(:has(.card-glass)) .card {
  border-radius: 8px !important;
  border-color: #e4e8ee !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .055) !important;
}
body:not(:has(.card-glass)) [data-testid="profile-shell"] {
  max-width: 1200px !important;
}
body:not(:has(.card-glass)) [data-testid="profile-overview-hero"] {
  border-color: #dbeafe !important;
  background: #fff !important;
}

/* Restyle only Sub2's native authentication shell; its form and handlers stay untouched. */
#kairos-login-brand { display: none; }

body:has(.card-glass) #kairos-login-brand {
  position: fixed;
  inset: 0 50% 0 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 62px 64px 54px;
  color: var(--kairos-ink);
  background-color: #eef4f4;
  background-image: linear-gradient(#dbe6e5 1px, transparent 1px), linear-gradient(90deg, #dbe6e5 1px, transparent 1px);
  background-size: 56px 56px;
  border-right: 1px solid #d7e2e1;
}

#kairos-login-brand .kairos-wordmark { display: flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 700; }
#kairos-login-brand .kairos-wordmark img { width: 40px; height: 40px; border-radius: 10px; }
#kairos-login-brand .kairos-copy { margin: auto 0; max-width: 590px; }
#kairos-login-brand .kairos-kicker { margin: 0 0 15px; color: var(--kairos-primary); font-size: 12px; font-weight: 700; letter-spacing: 1.4px; }
#kairos-login-brand h1 { margin: 0; font-size: 66px; line-height: 1.05; letter-spacing: 0; font-weight: 760; }
#kairos-login-brand .kairos-subtitle { margin: 20px 0 34px; color: #657083; font-size: 19px; }
#kairos-login-brand ul { display: grid; gap: 15px; margin: 0; padding: 0; color: #4e5d6f; list-style: none; }
#kairos-login-brand li { display: flex; align-items: center; gap: 12px; }
#kairos-login-brand li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--kairos-accent); box-shadow: 0 0 0 4px #ffedd5; }
#kairos-login-brand .kairos-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; color: #8a96a5; font-size: 12px; }
#kairos-login-brand code { padding: 9px 13px; border: 1px solid #d2dcdf; border-radius: 7px; background: #f9fbfb; color: #596575; }

#app > div:has(.card-glass) {
  width: 50% !important;
  min-height: 100vh !important;
  margin-left: 50% !important;
  padding: 0 !important;
  background: #f8fafb !important;
}

#app > div:has(.card-glass) > .absolute { display: none !important; }

#app > div:has(.card-glass) > .relative.z-10 {
  align-self: center;
  justify-self: center;
  width: min(420px, calc(100% - 48px)) !important;
  max-width: 420px !important;
}

#app > div:has(.card-glass) > .relative.z-10 > .mb-8 { display: none !important; }

#app > div:has(.card-glass) .card-glass {
  border: 1px solid #dce2e7 !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: 0 20px 48px rgba(23, 32, 51, .10) !important;
}

@media (max-width: 900px) {
  body:has(.card-glass) #kairos-login-brand { display: none !important; }
  #app > div:has(.card-glass) { width: 100% !important; margin-left: 0 !important; }
  #app > div:has(.card-glass) > .relative.z-10 > .mb-8 { display: block !important; }
}