src/styles.css

Rama main · réplica de lectura del repositorio original.

@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";
@import "@fontsource-variable/inter";

@custom-variant dark (&:is(.dark *));

:root {
  --brand-primary: #007b83;
  --brand-primary-active: #005f66;
  --brand-background: #ffffff;
  --brand-primary-soft: #e7f6f6;
  --brand-signal: #4fd1d0;
  --ink: #142022;
  --muted: #5b696b;
  --line: #dde5e5;
  --line-strong: #cbd6d6;
  --surface: #ffffff;
  --soft: #f6f9f9;
  --panel: #ffffff;
  --console-canvas: #ffffff;
  --navigation: #f8fbfb;
  --background: #ffffff;
  --foreground: #142022;
  --card: #ffffff;
  --card-foreground: #142022;
  --primary: #007b83;
  --primary-foreground: #ffffff;
  --secondary: #f6f9f9;
  --secondary-foreground: #142022;
  --muted-color: #f6f9f9;
  --muted-foreground: #5b696b;
  --destructive: #b83232;
  --destructive-foreground: #ffffff;
  --success: #147a55;
  --success-soft: #ecfdf3;
  --warning: #8a6300;
  --warning-soft: #fffaeb;
  --border: #dde5e5;
  --input: #cbd6d6;
  color: var(--ink);
  background: var(--background);
  color-scheme: light;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --popover: #ffffff;
  --popover-foreground: #142022;
  --accent: #e7f6f6;
  --accent-foreground: #005f66;
  --ring: #007b83;
  --chart-1: #007b83;
  --chart-2: #4fd1d0;
  --chart-3: #147a55;
  --chart-4: #8a6300;
  --chart-5: #5b696b;
  --radius: 0.625rem;
  --sidebar: #f8fbfb;
  --sidebar-foreground: #142022;
  --sidebar-primary: #007b83;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #e7f6f6;
  --sidebar-accent-foreground: #005f66;
  --sidebar-border: #dde5e5;
  --sidebar-ring: #007b83;
}

.dark {
  --brand-primary: #4fd1d0;
  --brand-primary-active: #79dfde;
  --brand-background: #10191a;
  --brand-primary-soft: #173638;
  --ink: #effafa;
  --muted: #a6b6b7;
  --line: #314143;
  --line-strong: #45585a;
  --surface: #10191a;
  --soft: #172224;
  --panel: #1b292b;
  --console-canvas: #10191a;
  --navigation: #131e20;
  --background: #10191a;
  --foreground: #effafa;
  --card: #1b292b;
  --card-foreground: #effafa;
  --primary: #4fd1d0;
  --primary-foreground: #0b2021;
  --secondary: #243436;
  --secondary-foreground: #effafa;
  --muted-color: #172224;
  --muted-foreground: #a6b6b7;
  --destructive: #f07b7b;
  --destructive-foreground: #1d0a0a;
  --success: #73d6aa;
  --success-soft: #16372c;
  --warning: #efc66a;
  --warning-soft: #3b3015;
  --border: #314143;
  --input: #45585a;
  --popover: #1b292b;
  --popover-foreground: #effafa;
  --accent: #173638;
  --accent-foreground: #79dfde;
  --ring: #4fd1d0;
  --sidebar: #131e20;
  --sidebar-foreground: #effafa;
  --sidebar-primary: #4fd1d0;
  --sidebar-primary-foreground: #0b2021;
  --sidebar-accent: #173638;
  --sidebar-accent-foreground: #79dfde;
  --sidebar-border: #314143;
  --sidebar-ring: #4fd1d0;
  color-scheme: dark;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted-color);
  --color-muted-foreground: var(--muted-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --font-heading: var(--font-sans);
  --font-sans: 'Inter Variable', Inter, sans-serif;
  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar: var(--sidebar);
  --color-chart-5: var(--chart-5);
  --color-chart-4: var(--chart-4);
  --color-chart-3: var(--chart-3);
  --color-chart-2: var(--chart-2);
  --color-chart-1: var(--chart-1);
  --color-ring: var(--ring);
  --color-accent-foreground: var(--accent-foreground);
  --color-accent: var(--accent);
  --color-popover-foreground: var(--popover-foreground);
  --color-popover: var(--popover);
  --radius-sm: calc(var(--radius) * 0.6);
  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) * 1.4);
  --radius-2xl: calc(var(--radius) * 1.8);
  --radius-3xl: calc(var(--radius) * 2.2);
  --radius-4xl: calc(var(--radius) * 2.6);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
}

button,
input,
select,
textarea {
  font: inherit;
}

button:not(:disabled),
[role='button']:not(:disabled) {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

.realmrootMark {
  position: relative;
  display: block;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 9px;
  background: var(--brand-primary);
}

.realmrootMark i {
  position: absolute;
  bottom: 5px;
  width: 3px;
  border-radius: 3px;
  background: white;
}

.realmrootMark i:nth-child(1) {
  left: 7px;
  height: 10px;
  transform: rotate(-26deg);
  transform-origin: bottom;
}

.realmrootMark i:nth-child(2) {
  left: 12px;
  height: 16px;
}

.realmrootMark i:nth-child(3) {
  right: 7px;
  height: 10px;
  transform: rotate(26deg);
  transform-origin: bottom;
}

:where(a, button, input, select, textarea, [role='button'], [tabindex]):not([data-slot]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand-primary) 72%, var(--background));
  outline-offset: 2px;
}

.skipLink {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--brand-primary);
  color: var(--primary-foreground);
  font-size: 14px;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-150%);
}

.skipLink:focus-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

button,
a,
input,
select,
textarea {
  touch-action: manipulation;
}

.preferencesControls {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.preferencesControl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--foreground);
  font-size: 12px;
  font-weight: 650;
}

.preferencesIconControl {
  width: 36px;
  padding: 0;
}

.preferencesControl [data-slot='select-trigger'] {
  width: auto;
  min-width: 72px;
}

.consolePreferences {
  display: inline-flex;
}

.accountTopbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.accountTopbarActions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.accountAvatarMenuTrigger {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--foreground);
  box-shadow: none;
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
}

.accountAvatarMenuTrigger:hover,
.accountAvatarMenuTrigger[aria-expanded="true"] {
  border-color: var(--border);
  background: var(--muted-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 9%, transparent);
}

.accountAvatarMenuTrigger:active {
  transform: translateY(1px);
}

.accountMenuAvatar {
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--muted-color);
  color: var(--muted-foreground);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  object-fit: cover;
}

.accountMenuAvatarTrigger {
  width: 34px;
  height: 34px;
  border-color: transparent;
}

.accountMenuHeaderAvatar {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
}

.accountUserMenu {
  --account-menu-bg: color-mix(in srgb, var(--brand-primary) 2%, var(--popover));
  display: grid;
  gap: 4px;
  width: 288px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--account-menu-bg);
  color: var(--foreground);
  box-shadow:
    0 18px 48px rgb(24 24 27 / 14%),
    0 3px 10px rgb(24 24 27 / 6%);
}

.accountUserMenuHeader {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 6px 6px 12px;
  border-bottom: 1px solid var(--border);
}

.accountUserMenuHeader div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.accountUserMenuHeader strong {
  min-width: 0;
  color: var(--foreground);
  font-size: 14px;
  line-height: 1.3;
}

.accountUserMenuHeader span {
  min-width: 0;
  color: var(--muted-foreground);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.accountMenuItem {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 10px;
  color: var(--foreground);
  font-size: 13px;
  font-weight: 580;
}

.accountMenuItem {
  width: 100%;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition:
    background-color 150ms ease,
    color 150ms ease;
}

.accountMenuItem:hover,
.accountMenuItem:focus,
.accountSubmenuTrigger[data-state='open'] {
  background: var(--muted-color);
}

.accountMenuItem > svg,
.accountSubmenuTriggerLabel > svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  color: var(--muted-foreground);
}

.accountMenuSeparator {
  margin: 2px 0;
}

.accountSubmenuTrigger {
  justify-content: space-between;
  gap: 16px;
}

.accountSubmenuTriggerLabel {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
}

.accountSubmenuTriggerLabel span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.accountSubmenuTrigger > svg:last-child {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  margin-left: 0;
  color: var(--muted-foreground);
}

.accountSubmenuValue {
  max-width: 88px;
  overflow: hidden;
  margin-left: auto;
  color: var(--muted-foreground);
  font-size: 11px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.accountSubmenuContent {
  min-width: 152px;
  padding: 6px;
  border: 1px solid var(--border);
  background: var(--popover);
  color: var(--foreground);
}

.accountSubmenuItem {
  gap: 8px;
}

.accountSubmenuCheck,
.accountSubmenuCheckHidden {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

.accountSubmenuCheckHidden {
  visibility: hidden;
}

.accountMenuItemDanger {
  color: var(--destructive);
}

.accountMenuItemDanger:hover {
  background: color-mix(in srgb, var(--destructive) 10%, transparent);
}

.dark .authPanel,
.dark .hostedAuthPanel,
.dark .accountHero,
.dark .accountPanelGroup,
.dark .settingsAction,
.dark .panelTitleIcon,
.dark .itemRowIcon,
.dark .consoleActivityCard,
.dark .objectHeader,
.dark .applicationTypeCard,
.dark .setupPanel,
.dark .itemRow,
.dark .socialButton,
.dark .statusPill {
  background: var(--panel);
  color: var(--ink);
}

.dark .accountPanelHeader,
.dark .subsectionTitle,
.dark .hostedPreviewHeader,
.dark .statusPill,
.dark .setupPanel,
.dark .segmented {
  background: var(--soft);
}

.dark .authShell {
  background: color-mix(in srgb, var(--brand-background) 92%, #000000);
}

.dark .authBackLink,
.dark .authBrandPanel p:not(.eyebrow),
.dark .authBackAction,
.dark .authSignupPrompt,
.dark .intro,
.dark .statusPill span {
  color: var(--muted);
}

.dark .applicationTypeCard:hover,
.dark .applicationTypeCard.selected {
  background: color-mix(in srgb, var(--brand-primary) 12%, var(--panel));
}

.consoleShell {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-rows: 64px minmax(0, 1fr);
  height: 100dvh;
  overflow: hidden;
  background: var(--background);
  font-size: 14px;
}

.dark .consoleShell {
  background: var(--background);
}

.consoleTopbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  width: 100%;
  min-width: 0;
  height: 64px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--background) 96%, transparent);
  backdrop-filter: blur(12px);
}

.consoleTopbarBrand {
  display: flex;
  min-width: 0;
  align-items: center;
  padding: 0 20px;
  border-right: 1px solid var(--border);
  background: var(--navigation);
}

.consoleTopbarActions {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 22px;
}

.consoleSearchTrigger {
  width: min(280px, 32vw);
  justify-content: space-between;
  border-color: color-mix(in srgb, var(--border) 82%, transparent);
  background: color-mix(in srgb, var(--background) 70%, var(--navigation));
  color: var(--muted-foreground);
  font-weight: 520;
}

.consoleSearchTrigger:hover {
  background: var(--accent);
  color: var(--foreground);
}

.consoleSearchTrigger svg {
  width: 15px;
  height: 15px;
}

.consoleSearchTrigger kbd {
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--background);
  color: var(--muted-foreground);
  font-family: inherit;
  font-size: 10px;
  line-height: 1.2;
}

.consoleBody {
  min-width: 0;
  min-height: 0;
}

.consoleRail {
  width: 250px;
  height: 100%;
  min-height: 0;
  flex-shrink: 0;
  flex-direction: column;
  border-right: 1px solid var(--border);
  background: var(--navigation);
}

.consoleOrganizationSwitcher {
  flex: 0 0 auto;
  padding: 12px;
  border-bottom: 1px solid var(--border);
}

.consoleOrganizationTrigger {
  width: 100%;
  height: 52px;
  justify-content: flex-start;
  gap: 10px;
  padding: 6px 8px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: color-mix(in srgb, var(--background) 62%, var(--navigation));
  box-shadow: 0 1px 2px color-mix(in srgb, var(--foreground) 4%, transparent);
}

.consoleOrganizationTrigger:hover,
.consoleOrganizationTrigger[data-state='open'] {
  border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
  background: color-mix(in srgb, var(--primary) 5%, var(--background));
}

.consoleOrganizationIcon {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 11%, transparent);
  color: var(--primary);
}

.consoleOrganizationIcon svg {
  width: 16px;
  height: 16px;
}

.consoleOrganizationLabel,
.consoleOrganizationName {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.consoleOrganizationLabel {
  margin-bottom: 1px;
  color: var(--muted-foreground);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.consoleOrganizationName {
  color: var(--foreground);
  font-size: 13px;
  font-weight: 680;
  line-height: 1.35;
}

.consoleOrganizationChevron {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  color: var(--muted-foreground);
}

.consoleOrganizationOption {
  min-height: 46px;
  gap: 9px;
  padding: 6px 26px 6px 8px;
}

.consoleOrganizationOption > span:not([data-slot]) {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.consoleOrganizationOption strong,
.consoleOrganizationOption small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.consoleOrganizationOption strong {
  font-size: 13px;
  font-weight: 650;
}

.consoleOrganizationOption small {
  color: var(--muted-foreground);
  font-size: 10px;
}

.consoleNavScroll {
  scrollbar-gutter: stable;
  scrollbar-color: transparent transparent;
  scrollbar-width: thin;
}

.consoleNavScroll:hover {
  scrollbar-color: color-mix(in srgb, var(--muted) 38%, transparent) transparent;
}

.consoleNavScroll::-webkit-scrollbar {
  width: 10px;
}

.consoleNavScroll::-webkit-scrollbar-track {
  background: transparent;
}

.consoleNavScroll::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: content-box;
  background-color: transparent;
}

.consoleNavScroll > .grid {
  gap: 9px;
}

.consoleNavScroll > .grid > .grid {
  gap: 2px;
}

.consoleNavScroll:hover::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, var(--muted) 38%, transparent);
}

.consoleNavScroll:hover::-webkit-scrollbar-thumb:hover {
  background-color: color-mix(in srgb, var(--muted) 56%, transparent);
}

.consoleMain {
  height: 100%;
  min-width: 0;
  flex: 1;
  overflow-y: auto;
  background: var(--background);
}

.consoleContent {
  display: flex;
  width: 100%;
  min-width: 560px;
  max-width: 1160px;
  flex-direction: column;
  gap: 0;
  margin: 0;
  margin-left: max(0px, calc((100vw - 1410px) / 2));
  padding: 38px clamp(24px, 4vw, 58px) 60px;
}

.consoleContent:has(.consolePageHeader) {
  padding-top: 28px;
}

.consoleBreadcrumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
  color: var(--muted-foreground);
  font-size: 10px;
}

.consoleContent:has(.consolePageHeader) .consoleBreadcrumbs {
  margin-bottom: 12px;
}

.consoleBreadcrumbs [aria-current='page'],
.consoleBreadcrumbs a {
  color: var(--primary);
  font-weight: 700;
}

.consolePage {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 12px;
}

.consolePageHeader {
  margin-bottom: 4px;
}

.consolePageHeader p {
  font-size: 12px;
}

.consoleNavGroupLabel {
  margin: 0;
  padding: 4px 10px;
  color: var(--muted-foreground);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.consoleNavItem {
  display: flex;
  min-height: 34px;
  align-items: center;
  gap: 9px;
  padding: 0 10px;
  border-radius: 8px;
  color: var(--muted-foreground);
  font-size: 13px;
  font-weight: 620;
  transition: background-color 150ms ease, color 150ms ease;
}

.consoleNavItem svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.consoleNavItem span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.consoleNavItem:hover {
  background: var(--brand-primary-soft);
  color: var(--brand-primary-active);
}

.consoleNavItem.is-active {
  background: var(--primary);
  color: var(--primary-foreground);
  font-weight: 680;
}

.consoleNavFooter {
  display: grid;
  gap: 2px;
  margin: 0 12px;
  padding: 12px 0 16px;
  border-top: 1px solid var(--border);
}

.consoleAccountMenuSummary {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 10px;
}

.consoleAccountMenuItem {
  display: flex;
  min-height: 36px;
  width: 100%;
  align-items: center;
  gap: 10px;
  border-radius: 6px;
  padding: 0 10px;
  color: var(--foreground);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
}

.consoleAccountMenuItem:hover {
  background: var(--muted-color);
}

.consoleAccountMenuItemDanger {
  color: var(--destructive);
}

.consoleAccountMenuItemDanger:hover {
  background: color-mix(in srgb, var(--destructive) 10%, transparent);
}

.consoleSubmenuTrigger {
  justify-content: space-between;
  gap: 16px;
}

.dropdownSubContent {
  display: none;
}

.dropdownSub:hover > .dropdownSubContent,
.dropdownSub:focus-within > .dropdownSubContent {
  display: block;
}

.consoleSubmenuContent {
  min-width: 132px;
}

.consoleSubmenuItem {
  gap: 8px;
}

.shell {
  min-height: 100vh;
  padding: 24px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1120px;
  margin: 0 auto;
}

.brand,
.actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand {
  font-weight: 700;
}

.brandLink {
  width: max-content;
}

.brandMark,
.brandLogo {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 8px;
  color: #ffffff;
  background: var(--brand-primary);
  object-fit: cover;
}

.actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.actions a,
.primaryAction {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
}

.primaryAction {
  color: #ffffff;
  background: #18212f;
}

.hero {
  max-width: 1120px;
  margin: 104px auto 48px;
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--brand-primary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.shell :is(h1, h2, h3, p) {
  overflow-wrap: anywhere;
}

.shell h1 {
  max-width: 760px;
  margin: 0;
  font-size: 56px;
  line-height: 1.04;
  letter-spacing: 0;
  text-wrap: balance;
}

.intro {
  max-width: 640px;
  margin: 24px 0 0;
  color: #475569;
  font-size: 20px;
  line-height: 1.6;
}

.featureGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 1120px;
  margin: 0 auto;
}

.feature,
.settingsPanel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.feature {
  min-height: 184px;
  padding: 24px;
}

.feature svg {
  color: var(--brand-primary);
}

.feature h2 {
  margin: 18px 0 10px;
  font-size: 18px;
}

.feature p,
.muted {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.platformStatus {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 1120px;
  margin: 20px auto 0;
  color: var(--muted);
  font-size: 14px;
}

.statusDot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--warning);
}

.statusDot.online {
  background: var(--success);
}

.authShell {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 100dvh;
  padding: 64px 16px 28px;
  background: color-mix(in srgb, var(--brand-background) 24%, var(--soft));
}

.authBackLink {
  position: absolute;
  top: 24px;
  left: 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  color: var(--muted-foreground);
  font-size: 14px;
  font-weight: 700;
}

.authBackLink:hover {
  background: color-mix(in srgb, var(--brand-primary) 8%, transparent);
  color: var(--ink);
}

.authPanel {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 18px 54px rgb(20 32 34 / 8%);
}

.authFrame {
  display: grid;
  width: 100%;
  margin-block: auto;
  justify-items: center;
}

.authShell-split .authFrame {
  max-width: 880px;
}

.authShell-focused .authFrame {
  max-width: 400px;
}

.authShell-decision .authFrame {
  max-width: 460px;
}

.authPanel-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr);
}

.authPanel-focused,
.authPanel-decision {
  padding: 28px;
}

.oauthContextForm {
  display: grid;
  gap: 18px;
}

.oauthContextChoices {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.oauthContextChoices legend {
  margin-bottom: 8px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

.oauthContextChoice {
  display: grid;
  grid-template-columns: auto 40px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  cursor: pointer;
}

.oauthContextChoice:has(input:checked) {
  border-color: var(--brand-primary);
  background: color-mix(in srgb, var(--brand-primary) 7%, var(--panel));
}

.oauthContextChoice:focus-within {
  outline: 3px solid color-mix(in srgb, var(--brand-primary) 28%, transparent);
  outline-offset: 2px;
}

.oauthContextChoice input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--brand-primary);
}

.oauthContextChoiceIcon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--soft);
  color: var(--brand-primary);
}

.oauthContextChoiceIcon svg {
  width: 20px;
  height: 20px;
}

.oauthContextChoiceText {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.oauthContextChoiceText strong,
.oauthContextChoiceText small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.oauthContextChoiceText strong {
  color: var(--ink);
  font-size: 14px;
}

.oauthContextChoiceText small {
  color: var(--muted);
  font-size: 12px;
}

.oauthContextActions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.oauthContextSwitchAccount {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--brand-primary);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.oauthContextSwitchAccount:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand-primary) 28%, transparent);
  outline-offset: 2px;
}

.oauthContextSwitchAccount:disabled,
.oauthContextChoice:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.62;
}

.authContent {
  display: grid;
  width: 100%;
  margin-top: 18px;
}

.authPanel-split .authContent {
  align-content: center;
  margin: 0;
  padding: 38px 40px;
}

.authBrandPanel {
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
}

.authPanel-split .authBrandPanel {
  min-height: 520px;
  align-content: center;
  justify-items: start;
  padding: 48px;
  border-right: 1px solid var(--line);
  background:
    radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--brand-primary) 9%, transparent), transparent 38%),
    color-mix(in srgb, var(--brand-background) 28%, var(--soft));
  text-align: left;
}

.authBrandPanel .brand {
  justify-content: center;
  margin-bottom: 10px;
  font-size: 14px;
}

.authPanel-split .authBrandPanel .brand {
  justify-content: flex-start;
}

.authBrandPanel .brandMark,
.authBrandPanel .brandLogo {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.authBrandPanel h1 {
  max-width: 340px;
  margin: 0;
  font-size: 24px;
  font-weight: 670;
  letter-spacing: -0.035em;
  line-height: 1.2;
}

.authPanel-split .authBrandPanel h1 {
  font-size: 30px;
}

.authBrandPanel p:not(.eyebrow) {
  max-width: 320px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.authMessageIcon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  margin-bottom: 4px;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 18%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-primary) 8%, var(--panel));
  color: var(--brand-primary);
}

.authShell-message .authContent {
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
}

.authContent [data-slot='button'][data-size='default'],
.authContent [data-slot='button'][data-size='lg'] {
  width: 100%;
}

.decisionStack {
  display: grid;
  gap: 18px;
}

.decisionFacts {
  display: grid;
  margin: 0;
  border-block: 1px solid var(--line);
}

.decisionFacts > div {
  display: grid;
  grid-template-columns: minmax(110px, 0.7fr) minmax(0, 1.3fr);
  gap: 18px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}

.decisionFacts > div:first-child {
  border-top: 0;
}

.decisionFacts dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.decisionFacts dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.55;
}

.decisionFacts dd span,
.decisionFacts dd code {
  display: block;
}

.decisionFacts dd span {
  font-size: 13px;
  font-weight: 650;
}

.decisionFacts dd code {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

.decisionPermissions,
.decisionSection {
  display: grid;
  gap: 12px;
}

.decisionSection {
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.decisionPrerequisite {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 20%, var(--line));
  border-radius: calc(var(--auth-panel-radius, 8px) - 2px);
  background: color-mix(in srgb, var(--brand-primary) 4%, var(--panel));
}

.decisionPrerequisiteCopy {
  display: grid;
  gap: 6px;
}

.decisionPrerequisiteCopy h2,
.decisionPrerequisiteCopy p {
  margin: 0;
}

.decisionPrerequisiteCopy h2 {
  font-size: 16px;
  line-height: 1.35;
}

.decisionPrerequisiteCopy p:not(.decisionPrerequisiteEyebrow),
.decisionPrerequisiteHint {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.decisionPrerequisiteEyebrow {
  color: var(--brand-primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.decisionAccountSummary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
}

.decisionAccountSummary span {
  color: var(--muted);
  font-size: 11px;
}

.decisionAccountSummary strong {
  overflow-wrap: anywhere;
  font-size: 12px;
  text-align: right;
}

.decisionPrerequisiteHint {
  margin: -4px 0 0;
  text-align: center;
}

.decisionPermissions h2,
.decisionSection h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 650;
}

.decisionPermissions p,
.decisionSection p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.decisionPermissions ul {
  display: grid;
  max-height: 168px;
  gap: 0;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  border-block: 1px solid var(--line);
  list-style: none;
}

.decisionPermissions li {
  padding: 9px 0;
  border-top: 1px solid var(--line);
  font-size: 12px;
}

.decisionPermissions li:first-child {
  border-top: 0;
}

.decisionRadio {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}

.decisionRadio:first-child {
  border-top: 0;
}

.decisionRadio > span {
  display: grid;
  gap: 2px;
}

.decisionRadio strong {
  font-size: 12px;
}

.decisionRadio small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.decisionActions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.decisionActions-single {
  grid-template-columns: minmax(0, 1fr);
}

.brandingPreview {
  display: grid;
  gap: 24px;
  min-height: 360px;
  padding: 28px;
  border-radius: var(--auth-panel-radius, 8px);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--brand-background) 82%, white), #ffffff 68%),
    var(--brand-background);
}

.brandingPreview h2 {
  margin: 0 0 8px;
  color: var(--auth-text-color, var(--ink));
  font-size: 28px;
  line-height: 1.2;
}

.brandingPreview p:not(.eyebrow) {
  max-width: 30rem;
  color: color-mix(in srgb, var(--auth-text-color, var(--ink)) 62%, transparent);
  line-height: 1.6;
}

.consoleResourcePageWithAside {
  display: grid;
  gap: 16px;
}

.consoleResourcePageMain {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 12px;
}

.signInExperienceSettings {
  min-width: 0;
}

.signInExperienceSettings > .grid > section {
  grid-template-columns: minmax(0, 1fr);
}

.signInExperiencePreviewPanel {
  min-width: 0;
}

.hostedPreviewShell {
  display: grid;
  align-content: start;
}

.hostedAuthPreview {
  min-height: auto;
  padding: 18px;
}

.hostedAuthPanel {
  display: grid;
  width: min(100%, 372px);
  gap: 14px;
  margin-inline: auto;
  padding: 22px;
  border: 1px solid var(--auth-border-color, color-mix(in srgb, var(--brand-primary) 10%, var(--line)));
  border-radius: var(--auth-panel-radius, 8px);
  background: var(--auth-surface-color, #ffffff);
  color: var(--auth-text-color, var(--ink));
  box-shadow: 0 10px 26px rgb(24 24 27 / 7%);
}

.hostedAuthPanel .authBrandPanel h2 {
  max-width: 340px;
  margin: 0;
  color: var(--ink);
  font-size: 19px;
  line-height: 1.25;
}

.hostedPreviewPrompt {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.authCardHeader h2,
.settingsPanel h2 {
  margin: 0 0 6px;
  font-size: 15px;
  line-height: 1.3;
}

.authCardHeader {
  width: 100%;
  text-align: left;
}

.authCardHeader p {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.formStack {
  display: grid;
  gap: 9px;
}

.authStepTitle {
  margin: 0 0 4px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 750;
  line-height: 1.3;
}

.compactForm {
  margin-top: 20px;
}

.field {
  display: grid;
  gap: 6px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

.field small {
  color: var(--muted);
  font-weight: 400;
  line-height: 1.4;
}

.textInput {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--input);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  font-size: 14px;
}

.textInput[type="color"] {
  min-height: 40px;
  padding: 5px;
}

.textInput[type="file"] {
  min-height: auto;
  padding: 8px;
  color: transparent;
  font-size: 13px;
}

.textInput[type="file"]::file-selector-button {
  min-height: 32px;
  margin-right: 10px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-weight: 650;
}

.textArea {
  min-height: 96px;
  resize: vertical;
}

.textInput:focus-visible {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 18%, transparent);
}

.passwordField {
  position: relative;
}

.passwordField .textInput {
  padding-right: 42px;
}

.passwordField button {
  position: absolute;
  top: 50%;
  right: 6px;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  transform: translateY(-50%);
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
}

.passwordField button:hover {
  background: var(--muted-color);
  color: var(--ink);
}

.assetUploadRow {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.avatarUploadControl {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.assetUploadField {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.assetUploadLabel {
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

.assetUploadButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  min-height: 40px;
  gap: 6px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    color 150ms ease;
}

.assetUploadButton:hover,
.assetUploadRow:focus-within .assetUploadButton {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 14%, transparent);
  color: var(--brand-primary);
}

.assetUploadInput {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.assetPreview {
  display: grid;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  object-fit: cover;
}

.avatarUploadMeta {
  display: grid;
  gap: 5px;
  justify-items: start;
}

.avatarUploadLabel {
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}

.avatarUploadHelp {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.avatarUploadButton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.avatarUploadButton:hover {
  border-color: color-mix(in srgb, var(--brand-primary) 24%, var(--line));
  background: var(--muted-color);
}

.avatarUploadButton:focus-within,
.avatarUploadButton:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand-primary) 18%, transparent);
  outline-offset: 2px;
}

.visuallyHidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.uiButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    color 150ms ease,
    box-shadow 150ms ease;
}

.uiButton-sm,
.uiButton-icon {
  min-height: 36px;
}

.uiButton-sm {
  padding: 0 12px;
}

.uiButton-icon {
  width: 36px;
  padding: 0;
}

.uiButton:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

[data-icon] {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.authPanel .uiButton {
  width: 100%;
  min-height: 38px;
  padding: 0 12px;
  font-size: 13px;
}

.authPanel .textInput,
.accountContent .textInput {
  min-height: 38px;
}

.accountContent .uiButton {
  min-height: 40px;
  padding: 0 12px;
  font-size: 14px;
}

.uiButton-primary {
  color: var(--primary-foreground);
  background: var(--brand-primary);
}

.uiButton-primary:hover {
  background: var(--brand-primary-active);
}

.uiButton-secondary {
  border-color: var(--line);
  background: var(--panel);
  color: var(--ink);
}

.uiButton-secondary:hover {
  border-color: color-mix(in srgb, var(--brand-primary) 18%, var(--line));
  background: var(--muted-color);
}

.uiButton-ghost {
  border-color: transparent;
  background: transparent;
  color: var(--brand-primary);
}

.uiButton-ghost:hover {
  background: color-mix(in srgb, var(--brand-primary) 8%, transparent);
}

.uiButton-danger {
  border-color: color-mix(in srgb, var(--destructive) 32%, var(--line));
  background: color-mix(in srgb, var(--destructive) 10%, var(--panel));
  color: var(--destructive);
}

.uiButton-danger:hover {
  background: color-mix(in srgb, var(--destructive) 16%, var(--panel));
}

.segmented {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 12px;
  padding: 4px;
  border-radius: 8px;
  background: var(--muted-color);
}

.segmented button {
  min-height: 40px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted-foreground);
  font-size: 13px;
  font-weight: 700;
  transition:
    background-color 150ms ease,
    color 150ms ease,
    box-shadow 150ms ease;
}

.segmented button.active {
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 1px 8px rgb(24 24 27 / 8%);
}

.status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--foreground);
  background: var(--muted-color);
  font-size: 13px;
  line-height: 1.5;
}

.status-success {
  background: var(--success-soft);
  color: var(--success);
}

.status-error {
  background: color-mix(in srgb, var(--destructive) 12%, var(--panel));
  color: var(--destructive);
}

.status-warning {
  background: var(--warning-soft);
  color: var(--warning);
}

.identitySummary {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
}

.identitySummary span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.identitySummary strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.identitySummary button {
  min-height: 36px;
  margin-left: auto;
  border: 0;
  background: transparent;
  color: var(--brand-primary);
  font-weight: 700;
}

.authInlineAction {
  min-height: 36px;
  border: 0;
  background: transparent;
  color: var(--brand-primary);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.authInlineAction:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.authMethodDivider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: var(--muted-foreground);
  font-size: 14px;
  font-weight: 750;
  text-transform: lowercase;
}

.authMethodDivider::before,
.authMethodDivider::after {
  content: "";
  height: 1px;
  background: var(--line);
}

.authMethodDivider + .socialGrid {
  margin-top: 0;
}

.socialGrid,
.authLinks {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.socialGrid {
  padding: 0;
  border: 0;
}

.socialGrid legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.socialButton {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 40px;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

.socialButton:hover {
  border-color: color-mix(in srgb, var(--brand-primary) 18%, var(--line));
  background: var(--muted-color);
}

.socialButton:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.providerIcon {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: color-mix(in srgb, var(--brand-background) 26%, var(--panel));
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.providerIcon img {
  display: block;
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.dark .providerIcon img {
  filter: invert(1);
}

.providerIconLarge {
  width: 34px;
  height: 34px;
}

.providerIconLarge img {
  width: 18px;
  height: 18px;
}

.socialButtonText {
  min-width: 0;
  text-align: center;
  overflow: hidden;
  overflow-wrap: anywhere;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.authLinks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 18px;
  row-gap: 10px;
}

.authLinks a,
.authLinks button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: var(--brand-primary);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.authFieldLink {
  justify-self: start;
  margin-top: -4px;
  color: var(--brand-primary);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.authBackAction {
  min-height: 32px;
  border: 0;
  background: transparent;
  color: var(--muted-foreground);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.authBackAction:hover {
  color: var(--brand-primary);
}

.authSignupPrompt {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
}

.authSignupPrompt a,
.authSignupLink {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--brand-primary);
  font: inherit;
  font-weight: 750;
  text-decoration: none;
}

.authLegalLinks {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px 14px;
}

.authLegalLinks a {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.authLegalLinks a:hover {
  color: var(--brand-primary);
}

.authPoweredBy {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}

.authPageFooter {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 4px 0;
}

.accountShell {
  min-height: 100dvh;
  background: color-mix(in srgb, var(--brand-primary) 1.5%, var(--background));
}

.accountProductTopbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 22px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--background) 96%, transparent);
  backdrop-filter: blur(12px);
}

.accountMobileMenu {
  display: none;
}

.accountDeploymentContext {
  min-height: 38px;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--background);
  color: var(--muted-foreground);
  font-size: 12px;
  font-weight: 650;
}

.accountDeploymentContext svg {
  width: 15px;
  height: 15px;
  color: var(--primary);
}

.accountContent {
  min-width: 0;
  width: min(100%, 1080px);
  padding: 38px clamp(28px, 4vw, 52px) 64px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.accountContent.is-settings {
  width: min(100%, 960px);
}

.accountContent.is-workspace {
  width: min(100%, 1240px);
}

.accountStandaloneState {
  width: min(100% - 32px, 900px);
  margin: 48px auto;
}

.accountHeader,
.panelHeader,
.buttonRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.accountHeader {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.accountHeader h1 {
  margin: 2px 0 0;
  font-size: 18px;
  line-height: 1.25;
}

.accountHeader .eyebrow {
  margin: 0;
}

.accountGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.accountSectionStack {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.accountShellLayout {
  display: grid;
  min-height: calc(100dvh - 64px);
  grid-template-columns: 236px minmax(0, 1fr);
}

.accountSidebar {
  position: sticky;
  top: 64px;
  display: grid;
  height: calc(100dvh - 64px);
  min-width: 0;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
  padding: 28px 18px 22px;
  border-right: 1px solid var(--border);
  background: var(--background);
}

.accountSidebarIdentity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 0 10px 26px;
  border-bottom: 1px solid var(--border);
}

.accountSidebarIdentity > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.accountSidebarIdentity strong,
.accountSidebarIdentity span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.accountSidebarIdentity strong {
  font-size: 13px;
  font-weight: 680;
}

.accountSidebarIdentity span {
  color: var(--muted-foreground);
  font-size: 11px;
}

.accountHero {
  display: grid;
  gap: 18px;
  align-content: start;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--panel);
  box-shadow: 0 10px 24px rgb(24 24 27 / 4%);
}

.accountHeroIdentity {
  display: grid;
  gap: 14px;
  justify-items: start;
}

.accountHeaderAvatar {
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 16%, var(--line));
  border-radius: 8px;
  background: var(--panel);
  color: var(--brand-primary);
  object-fit: cover;
}

.accountHeaderMeta {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.accountHeaderMeta h1 {
  margin: 0;
  color: var(--ink);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
}

.accountHeaderMeta p {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
}

.accountSummaryStrip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.accountProfilePage {
  display: grid;
  min-width: 0;
}

.accountSectionStackFlat {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.accountSectionStackFlat > .accountObjectSection + .accountObjectSection {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.accountProfileSummary {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
  align-items: center;
}

.accountProfileSummary .accountHeroIdentity {
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
}

.accountProfileDetails {
  overflow: hidden;
}

.accountProfileDetails .settingsAction {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 18px 20px;
}

.accountProfileDetails .settingsActionMain {
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.accountProfileRowAvatar {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  object-fit: cover;
}

.accountProfileDetails .settingsActionIcon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 999px;
  background: var(--muted-color);
  color: var(--muted-foreground);
  overflow: hidden;
}

.accountNav {
  display: grid;
  align-content: start;
  gap: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  margin-top: 24px;
}

.accountNavGroup {
  display: grid;
  align-content: start;
  gap: 5px;
}

.accountNavGroup > p {
  margin: 0 0 5px;
  padding: 0 11px;
  color: var(--muted-foreground);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.accountNavItem {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 11px;
  padding: 0 12px;
  border-radius: 9px;
  color: var(--muted-foreground);
  font-size: 13px;
  font-weight: 630;
}

.accountNavItem:hover {
  background: var(--soft);
  color: var(--ink);
}

.accountNavItem.is-active {
  background: var(--brand-primary-soft);
  color: var(--brand-primary-active);
}

.organizationWorkspaceSidebar {
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 18px 14px 14px;
}

.organizationWorkspacePicker {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.organizationWorkspacePickerTrigger {
  display: grid;
  width: 100%;
  min-height: 54px;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 9px;
  color: var(--foreground);
}

.organizationWorkspacePickerTrigger:hover,
.organizationWorkspacePickerTrigger[data-state='open'] {
  background: var(--soft);
}

.organizationWorkspacePickerTrigger:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.organizationWorkspacePickerTrigger:disabled {
  cursor: wait;
  opacity: 0.65;
}

.organizationWorkspacePickerTrigger strong,
.organizationWorkspacePickerTrigger small,
.organizationWorkspaceMenuItem strong,
.organizationWorkspaceMenuItem small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.organizationWorkspacePickerTrigger strong,
.organizationWorkspaceMenuItem strong {
  font-size: 13px;
  font-weight: 680;
}

.organizationWorkspacePickerTrigger small,
.organizationWorkspaceMenuItem small {
  margin-top: 2px;
  color: var(--muted-foreground);
  font-size: 11px;
}

.organizationWorkspacePickerTrigger > svg {
  width: 16px;
  color: var(--muted-foreground);
}

.organizationWorkspaceMark,
.organizationWorkspaceMenuMark {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 22%, var(--border));
  border-radius: 8px;
  background: var(--brand-primary-soft);
  color: var(--brand-primary-active);
  font-weight: 750;
}

.organizationWorkspaceMark {
  width: 34px;
  height: 34px;
  font-size: 13px;
}

.organizationWorkspaceMenu {
  min-width: 240px;
}

.organizationWorkspaceMenuItem {
  min-height: 48px;
  gap: 9px;
  padding: 6px 8px;
}

.organizationWorkspaceMenuMark {
  width: 30px;
  height: 30px;
  font-size: 11px;
}

.organizationWorkspaceNav {
  min-height: 0;
  margin-top: 16px;
  gap: 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.organizationWorkspaceNav .accountNavItem {
  min-height: 38px;
}

.organizationWorkspaceFooter {
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.organizationWorkspaceFooter .accountNavItem {
  min-height: 40px;
}

.accountNavItem svg {
  width: 17px;
  height: 17px;
}

.accountPageHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
}

.accountPageHeader h1 {
  margin: 0 0 6px;
  color: var(--ink);
  font-size: 28px;
  font-weight: 680;
  letter-spacing: -0.04em;
  line-height: 1.15;
}

.accountPageHeader p {
  max-width: 640px;
  margin: 0;
  color: var(--muted-foreground);
  font-size: 14px;
  line-height: 1.5;
}

.accountRows {
  min-width: 0;
}

.accountEmptyState {
  display: grid;
  width: 100%;
  min-height: 74px;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin: 0;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--panel);
  box-shadow: 0 4px 14px rgb(24 24 27 / 3%);
}

.accountEmptyStateIcon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 999px;
  background: var(--muted-color);
  color: var(--muted-foreground);
}

.accountEmptyStateIcon svg {
  width: 17px;
  height: 17px;
}

.accountEmptyState > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.accountEmptyState strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.4;
}

.accountEmptyState span:not(.accountEmptyStateIcon) {
  color: var(--muted-foreground);
  font-size: 12px;
  line-height: 1.5;
}

.accountRows > .accountEmptyState {
  padding: 18px 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.accountTabPanel > .accountEmptyState {
  width: auto;
  margin-inline: 18px;
  padding: 18px 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.accountRow {
  display: grid;
  min-height: 72px;
  grid-template-columns: minmax(150px, 1fr) minmax(130px, 0.75fr) minmax(88px, auto);
  gap: 20px;
  align-items: center;
  padding: 17px 0;
  border-top: 1px solid var(--border);
}

.accountRow:first-child {
  border-top: 0;
}

.accountRow.is-value-empty {
  grid-template-columns: minmax(150px, 1fr) minmax(88px, auto);
}

.accountRow.is-action-empty {
  grid-template-columns: minmax(150px, 1fr) minmax(130px, 0.75fr);
}

.accountRow.is-value-empty.is-action-empty {
  grid-template-columns: minmax(0, 1fr);
}

.accountRowLabel {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.accountRowLabel strong {
  font-size: 13px;
  line-height: 1.4;
}

.accountRowLabel span {
  color: var(--muted-foreground);
  font-size: 12px;
  line-height: 1.5;
}

.accountRowValue {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--muted-foreground);
  font-size: 12px;
  line-height: 1.55;
}

.accountRowValue code {
  font-size: 12px;
  white-space: normal;
}

.accountRowAction {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
}

.providerLabel {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.providerLabelText {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.providerLabelName,
.providerLabelDetail {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.providerLabelDetail {
  color: var(--muted-foreground);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
}

.accountObjectSection {
  min-width: 0;
}

.accountObjectSection + .accountObjectSection {
  margin-top: 38px;
  padding-top: 32px;
  border-top: 1px solid var(--line-strong);
}

.accountObjectSection > header {
  margin-bottom: 10px;
}

.accountObjectSection > header h2 {
  margin: 0 0 5px;
  font-size: 18px;
  font-weight: 650;
  line-height: 1.3;
}

.accountObjectSection > header h2:last-child {
  margin-bottom: 0;
}

.accountObjectSection > header p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 12px;
  line-height: 1.55;
}

.accountObjectSection.is-surface {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--panel);
  box-shadow: 0 4px 14px rgb(24 24 27 / 3%);
}

.accountObjectSection.is-surface > header,
.accountTabPanel > .accountObjectSection > header {
  margin: 0;
  padding: 15px 18px 13px;
  border-bottom: 1px solid var(--line);
}

.accountObjectSection.is-surface > header h2,
.accountTabPanel > .accountObjectSection > header h2 {
  font-size: 14px;
}

.accountObjectSection.is-surface > .accountRows,
.accountTabPanel > .accountObjectSection > .accountRows {
  padding: 0 18px 10px;
}

.accountObjectSection.is-surface > .text-sm,
.accountTabPanel > .accountObjectSection > .text-sm {
  margin: 0;
  padding: 18px;
}

.accountMetricGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.accountMetric {
  min-height: 112px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--background);
  box-shadow: 0 1px 3px rgb(20 32 34 / 4%);
}

.accountMetric span,
.accountMetric small {
  color: var(--muted-foreground);
  font-size: 12px;
}

.accountMetric strong {
  display: block;
  margin: 10px 0 8px;
  font-size: 24px;
  letter-spacing: -0.04em;
}

.accountOverviewFlow {
  display: grid;
  gap: 12px;
}

.accountEntityList {
  display: grid;
  gap: 12px;
}

.accountObjectSection + .accountEntityList {
  margin-top: 12px;
}

.accountOverviewFlow .accountObjectSection + .accountObjectSection,
.accountEntityList .accountObjectSection + .accountObjectSection {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.accountBackLink {
  display: inline-flex;
  margin-bottom: 18px;
  color: var(--primary);
  font-size: 13px;
  font-weight: 650;
}

.accountRows.itemList {
  padding: 0 18px 10px;
}

.settingsPanel + .settingsPanel .accountRow:first-child {
  border-top: 1px solid var(--border);
}

.statusPill {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
}

.statusPill span {
  color: var(--muted-foreground);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}

.statusPill strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.25;
}

.accountPanelGroup {
  display: grid;
  align-content: start;
  gap: 0;
  min-width: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--panel);
  box-shadow: 0 8px 20px rgb(24 24 27 / 3%);
  overflow: hidden;
}

.accountDashboardGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
}

.accountPanelHeader {
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--soft);
}

.accountContent .settingsPanel {
  display: grid;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.settingsAction {
  padding: 13px 0;
  background: var(--panel);
}

.settingsAction strong {
  display: block;
  margin-bottom: 3px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.4;
}

.settingsAction .uiButton {
  white-space: nowrap;
}

.settingsActionButtons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  max-width: min(100%, 520px);
}

.accountPanelActions {
  display: flex;
  justify-content: flex-end;
  padding: 0 18px 18px;
}

.accountTabPanel {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--panel);
  box-shadow: 0 4px 14px rgb(24 24 27 / 3%);
}

.accountSignInStack {
  display: grid;
  gap: 12px;
}

.accountTabPanel > .accountRows {
  padding-inline: 18px;
}

.accountTabPanel > .text-sm {
  margin: 0;
  padding: 18px;
}

.accountTabBody {
  display: grid;
  gap: 14px;
  padding: 16px 18px 18px;
}

.accountTabToolbar {
  display: flex;
  justify-content: flex-end;
}

.accountSectionStack {
  display: grid;
}

.accountSectionStack .accountObjectSection {
  padding: 16px 18px 18px;
}

.accountSectionStack .accountObjectSection + .accountObjectSection {
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.accountContent .accountRowAction .uiButton {
  min-height: 34px;
  padding-inline: 10px;
  font-size: 13px;
}

.accountTabPanel > .settingsPanel .settingsAction {
  padding-inline: 18px;
}

.accountTabPanel > .settingsPanel + .settingsPanel {
  border-top: 1px solid var(--line);
}

.accountTabPanel > .settingsPanel .subsectionTitle:first-child {
  border-top: 0;
}

.panelTitle {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  min-width: 0;
}

.panelTitleMain {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-width: 0;
}

.panelTitleIcon {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 18%, var(--line));
  border-radius: 8px;
  background: var(--panel);
  color: var(--brand-primary);
}

.panelTitle h2 {
  margin: 0 0 3px;
  font-size: 18px;
  font-weight: 750;
  line-height: 1.25;
}

.panelTitle p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.panelHeader .panelTitle {
  margin-bottom: 0;
}

.settingsBody {
  display: grid;
  gap: 0;
  padding: 0;
}

.accountContent .itemRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 13px 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.accountContent .itemRow .uiButton {
  min-height: 34px;
  padding: 0 10px;
  font-size: 13px;
}

.accountContent .itemRowEmpty {
  grid-template-columns: 1fr;
  min-height: 116px;
  place-items: center;
  padding-block: 22px;
  text-align: center;
}

.accountContent .itemRowEmpty .accountRowLabel {
  max-width: 440px;
  justify-items: center;
  gap: 6px;
}

.accountContent .itemRowEmpty.is-compact {
  min-height: 0;
  place-items: stretch;
  padding-block: 14px 18px;
  text-align: left;
}

.accountContent .itemRowEmpty.is-compact .accountRowLabel {
  max-width: none;
  grid-template-columns: 36px minmax(0, 1fr);
  justify-items: stretch;
  gap: 2px 12px;
}

.accountContent .itemRowEmpty.is-compact .accountEmptyIcon {
  grid-row: 1 / 3;
  margin: 0;
}

.accountContent .itemRowEmpty.is-compact .accountRowLabel > :not(.accountEmptyIcon) {
  grid-column: 2;
}

.accountContent .itemRowEmpty .accountRowLabel strong {
  color: var(--ink);
  font-weight: 650;
}

.accountEmptyIcon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  margin-bottom: 2px;
  border-radius: 999px;
  background: var(--muted-color);
  color: var(--muted-foreground);
}

.accountEmptyIcon svg {
  width: 17px;
  height: 17px;
}

.itemRowMain {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.itemRowMain.withoutIcon {
  grid-template-columns: minmax(0, 1fr);
}

.itemRowCopy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.itemRowIcon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--brand-primary);
}

.itemRowTitle {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.itemRowTitle span {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 18%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-primary) 7%, var(--panel));
  color: var(--brand-primary);
  font-size: 11px;
  font-weight: 750;
  line-height: 1;
}

.itemList {
  display: grid;
  gap: 0;
  padding: 0 20px 12px;
}

.subsectionTitle {
  display: grid;
  gap: 4px;
  padding: 16px 20px 9px;
  border-top: 1px solid var(--line);
  background: transparent;
}

.subsectionTitle h3 {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 680;
  line-height: 1.3;
}

.subsectionTitle p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.subsectionTitle + .itemList {
  padding-top: 4px;
}

.dialogFormBody {
  padding: 16px 0;
}

.consoleToolbar {
  gap: 8px;
}

.consoleToolbar.rounded-lg {
  border-radius: var(--radius-xl);
}

.consoleToolbar .textInput {
  width: min(100%, 320px);
  min-height: 40px;
  padding-block: 8px;
}

.consoleListToolbar {
  padding: 0;
}

.consoleDataTableToolbar {
  display: block;
  padding: 12px 14px;
  background: var(--card);
}

.consoleDataTableToolbar .consoleListToolbar {
  width: 100%;
}

.consoleDataTableToolbar [data-slot='input'] {
  width: 280px;
}

.consoleDataTablePanel [data-slot='table-header'] {
  background: var(--muted-color);
}

.consoleResourceFrame,
.consoleMetricCard,
.consoleChartPanel,
.consoleActivityCard {
  border-radius: var(--radius-xl);
}

.consoleResourceFrame th {
  height: 43px;
  padding-inline: 14px;
}

.consoleResourceFrame td {
  height: 62px;
  padding: 9px 14px;
}

.consoleMetricCard {
  min-height: 128px;
}

.consoleDashboardGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(290px, 0.8fr);
  gap: 12px;
}

.consoleAreaChart {
  position: relative;
  height: 250px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 61px, var(--line) 62px);
}

.consoleAreaChart svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.consoleAreaChart .area {
  fill: color-mix(in srgb, var(--brand-primary) 10%, transparent);
}

.consoleAreaChart .line {
  fill: none;
  stroke: var(--brand-primary);
  stroke-width: 2.4;
  vector-effect: non-scaling-stroke;
}

.consoleAttentionRow {
  display: grid;
  min-height: 66px;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
}

.consoleAttentionRow:first-child {
  border-top: 0;
}

.consoleAttentionRow > div {
  display: grid;
  gap: 3px;
}

.consoleAttentionRow strong {
  font-size: 12px;
}

.consoleAttentionRow span {
  color: var(--muted);
  font-size: 11px;
}

.consoleAttentionIcon {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 8px;
  background: var(--brand-primary-soft);
  color: var(--brand-primary);
}

.consoleDashboardStatusRow {
  display: flex;
  min-height: 66px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
}

.consoleDashboardStatusRow:first-child {
  border-top: 0;
}

.consoleDashboardStatusRow > div,
.consoleDashboardClearState > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.consoleDashboardStatusRow strong,
.consoleDashboardClearState strong {
  font-size: 12px;
}

.consoleDashboardStatusRow span,
.consoleDashboardClearState span {
  color: var(--muted);
  font-size: 11px;
}

.consoleDashboardClearState {
  display: grid;
  min-height: 112px;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 18px 16px;
}

.consoleDashboardClearState > svg {
  width: 20px;
  color: var(--brand-primary);
}

.consoleAttentionIcon svg {
  width: 15px;
  height: 15px;
}

.consoleChartPanel {
  min-height: 420px;
}

.consoleChartCanvas {
  position: relative;
  min-height: 208px;
  padding: 22px 0 24px;
}

@media (min-width: 1120px) {
  .consoleContent:has(.consoleResourcePageWithAside) {
    display: grid;
    max-width: none;
    grid-template-columns: minmax(0, 1fr) clamp(340px, 30vw, 420px);
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: 16px;
    height: 100%;
    margin: 0;
    padding: 28px 0 24px
      calc(max(0px, (100vw - 1410px) / 2) + clamp(24px, 4vw, 58px));
  }

  .consoleContent:has(.consoleResourcePageWithAside) .consoleBreadcrumbs {
    grid-column: 1;
    grid-row: 1;
  }

  .consoleContent:has(.consoleResourcePageWithAside) .consolePage {
    display: contents;
  }

  .consoleResourcePageWithAside {
    display: contents;
  }

  .consoleResourcePageMain {
    grid-column: 1;
    grid-row: 2;
    min-height: 0;
    overflow: hidden;
  }

  .consoleResourcePageMain > [data-slot='tabs'] {
    min-height: 0;
    flex: 1;
    overflow: hidden;
  }

  .signInExperienceSettings {
    min-height: 0;
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 12px;
    scrollbar-gutter: stable;
  }

  .signInExperienceSettings .settingsFormField {
    grid-template-columns: minmax(150px, 0.8fr) minmax(220px, 1.2fr);
    gap: 16px;
  }

  .signInRegistrationForm .settingsFormField {
    min-height: 60px;
    grid-template-columns: minmax(0, 0.95fr) minmax(220px, 1.05fr);
    padding-block: 10px;
  }

  .signInRegistrationForm > section + section {
    margin-top: 20px;
  }

  .signInRegistrationForm > section > header {
    margin-bottom: 10px;
  }

  .signInRegistrationForm > footer {
    margin-top: 16px;
    padding-top: 12px;
  }

  .signInExperiencePreviewPanel {
    grid-column: 2;
    grid-row: 1 / -1;
    height: 100%;
    min-height: 0;
    align-self: start;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }
}

.consoleChartAxis {
  height: 1px;
  margin-bottom: 31px;
  background: var(--line);
}

.consoleChartLine {
  position: absolute;
  right: 0;
  bottom: 40px;
  left: 40px;
  height: 2px;
  background: var(--brand-primary);
}

.consoleChartLabels {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 40px;
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
}

.consoleActivityCard {
  min-height: 130px;
  padding: 24px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.consoleDetailStack {
  gap: 16px;
}

.applicationSettingsStack {
  display: grid;
  gap: 12px;
}

.applicationSettingsPanel {
  border-radius: var(--radius-xl);
  box-shadow: none;
}

.applicationSettingsPanel > div:first-child {
  padding-block: 14px;
}

.applicationSettingsPanel > div:last-child {
  padding-block: 14px;
}

.applicationCreateForm {
  gap: 12px;
}

.applicationTypeGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.applicationTypeGrid legend {
  margin-bottom: 6px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

.applicationTypeCard {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 9px;
  min-height: 92px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  color: var(--ink);
  text-align: left;
}

.applicationTypeCard:hover,
.applicationTypeCard.selected {
  border-color: color-mix(in srgb, var(--brand-primary) 42%, var(--line));
  background: color-mix(in srgb, var(--brand-primary) 7%, var(--panel));
}

.applicationTypeIcon {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 8px;
  background: var(--muted-color);
  color: var(--brand-primary);
}

.applicationTypeCard strong,
.applicationTypeCard small {
  display: block;
}

.applicationTypeCard strong {
  margin-bottom: 4px;
  font-size: 13px;
  line-height: 1.3;
}

.applicationTypeCard small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
}

.consoleBackLink {
  display: none;
  align-items: center;
  gap: 8px;
  width: max-content;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.consoleBackLink:hover {
  color: var(--ink);
}

.consoleDetailHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 4px;
}

.consoleDetailHeader h1 {
  margin: 0;
  font-size: 30px;
  font-weight: 670;
  letter-spacing: -0.04em;
  line-height: 1.15;
}

.consoleDetailHeader p {
  max-width: 680px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.consoleDetailMeta {
  display: block;
  max-width: 720px;
  margin-top: 6px;
  overflow: hidden;
  color: var(--muted);
  font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detailFlatRows {
  min-width: 0;
}

.detailSections {
  display: grid;
  gap: 28px;
}

.detailSection {
  min-width: 0;
}

.detailSection > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.detailSection > header h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.015em;
}

.detailSection > header p {
  max-width: 680px;
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.themePickerGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.themeChoice {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  width: 100%;
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
}

.themeChoice:hover,
.themeChoice[data-selected='true'] {
  border-color: var(--brand);
}

.themeChoice[data-selected='true'] {
  box-shadow: 0 0 0 2px var(--brand-soft);
}

.themeChoice > span:nth-child(2) {
  display: grid;
  gap: 2px;
}

.themeChoice strong {
  font-size: 13px;
}

.themeChoice small {
  color: var(--muted);
  font-size: 11px;
}

.themeSwatches {
  display: flex;
  gap: 3px;
}

.themeSwatches i {
  width: 12px;
  height: 24px;
  border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
  border-radius: 3px;
}

.detailFlatRow {
  display: grid;
  min-height: 64px;
  grid-template-columns: minmax(180px, 0.9fr) minmax(220px, 1.4fr) 156px;
  gap: 18px;
  align-items: start;
  padding: 15px 0;
  border-top: 1px solid var(--line);
}

.detailFlatRow:first-child {
  border-top: 0;
}

.detailFlatRow > div {
  display: grid;
  gap: 4px;
}

.detailFlatRow strong {
  font-size: 13px;
}

.detailFlatRow > div span,
.detailFlatRow > span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.detailFlatRow > [data-slot='button'] {
  justify-self: end;
}

.objectHeader {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface);
}

.objectAvatar {
  display: grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
  color: var(--ink);
  font-size: 16px;
  font-weight: 800;
}

.stickyActionBar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin: 8px -20px -20px;
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(8px);
}

.setupPanel {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--soft);
}

.setupPanel h3,
.setupPanel p {
  margin: 0;
}

.setupPanel p {
  display: grid;
  gap: 4px;
  color: var(--muted);
  line-height: 1.5;
}

.setupPanel > div {
  display: grid;
  gap: 6px;
  color: var(--muted);
  line-height: 1.5;
}

.setupPanel code {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
}

.backupCodeGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 6px;
}

.backupCodeGrid code {
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
}

.setupQr {
  width: 168px;
  max-width: 100%;
  border-radius: 8px;
}

.itemRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--panel);
}

.itemRow > div {
  min-width: 0;
}

.itemRow h3 {
  margin: 0 0 4px;
  font-size: 15px;
}

.itemRow p,
.emptyState {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.consentPage {
  position: relative;
  min-height: 100dvh;
  padding: 32px 20px 48px;
  background:
    radial-gradient(circle at 50% -10rem, color-mix(in srgb, var(--brand-primary) 11%, transparent), transparent 36rem),
    color-mix(in srgb, var(--brand-background) 24%, var(--soft));
}

.consentPage > .brand {
  justify-content: center;
  gap: 9px;
  width: min(100%, 660px);
  margin: 0 auto 22px;
  color: var(--foreground);
  font-size: 14px;
  letter-spacing: -0.015em;
}

.consentPage > .brand .brandMark,
.consentPage > .brand .brandLogo {
  width: 28px;
  height: 28px;
}

.consentFrame {
  width: min(100%, 660px);
  margin: 0 auto;
}

.consentCard {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--panel);
  box-shadow: 0 30px 80px rgb(24 58 53 / 10%), 0 2px 7px rgb(24 58 53 / 4%);
}

.consentContext {
  padding: 32px 40px 0;
}

.consentApplication {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.consentApplicationMark {
  display: grid;
  width: 60px;
  height: 60px;
  place-items: center;
  margin-bottom: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
  box-shadow: 0 7px 20px rgb(34 54 50 / 9%);
}

.consentApplicationLogo,
.consentApplicationFallback {
  width: 46px;
  height: 46px;
  border-radius: 14px;
}

.consentApplicationLogo {
  object-fit: cover;
}

.consentApplicationFallback {
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--brand-primary) 12%, var(--panel));
  color: var(--brand-primary);
  font-size: 22px;
  font-weight: 800;
}

.consentApplicationIdentity {
  width: min(100%, 430px);
  min-width: 0;
}

.consentApplicationIdentity h1 {
  display: -webkit-box;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 22px;
  font-weight: 760;
  line-height: 1.28;
  letter-spacing: -0.025em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.consentApplicationOrigin {
  display: flex;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 4px;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 550;
}

.consentApplicationOrigin svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.consentApplicationOrigin span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.consentRequestSummary {
  max-width: 430px;
  margin: 13px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.consentAccount {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--soft);
}

.consentAccount img,
.consentAvatarFallback {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.consentAccount img {
  object-fit: cover;
}

.consentAvatarFallback {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  color: var(--muted);
  background: var(--panel);
}

.consentAccount > div {
  display: grid;
  min-width: 0;
  flex: 1;
}

.consentAccount > div > span,
.consentAccount > div > small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.consentAccount strong {
  overflow: hidden;
  margin-top: 1px;
  color: var(--ink);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.consentSwitchButton {
  width: auto !important;
  min-height: 40px;
  margin-left: auto;
  padding-inline: 12px;
  color: var(--brand-primary);
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}

.consentDecisionBody {
  padding: 18px 40px 20px;
}

.consentResourceAuthorizations {
  display: grid;
  gap: 18px;
}

.consentResourceAuthorizationHeader h2 {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  font-weight: 750;
  letter-spacing: -0.015em;
}

.consentResourceAuthorizationHeader small {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.consentPermissions {
  min-width: 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.consentPermissionsHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 9px;
}

.consentPermissionsHeader h3 {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.consentPermissionsHeader > span {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-primary) 8%, var(--panel));
  color: var(--brand-primary);
  font-size: 11px;
  font-weight: 750;
}

.consentPermissionsIntro {
  margin: -2px 0 10px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.consentPermissionTable {
  max-height: 210px;
  margin: 0;
  padding: 0;
  overflow: hidden auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--panel);
  scrollbar-color: transparent transparent;
  scrollbar-width: thin;
  list-style: none;
}

.consentPermissionTable:hover {
  scrollbar-color: color-mix(in srgb, var(--muted) 55%, transparent) transparent;
}

.consentPermissionTable::-webkit-scrollbar {
  width: 8px;
}

.consentPermissionTable::-webkit-scrollbar-track {
  background: transparent;
}

.consentPermissionTable::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: transparent;
  background-clip: padding-box;
}

.consentPermissionTable:hover::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, var(--muted) 55%, transparent);
}

.consentPermissionRow {
  display: grid;
  grid-template-columns: minmax(145px, 178px) minmax(0, 1fr);
  min-width: 0;
  border-top: 1px solid var(--line);
}

.consentPermissionRow:first-child {
  border-top: 0;
}

.consentPermissionRow code,
.consentPermissionRow > span {
  display: flex;
  min-width: 0;
  align-items: center;
  padding: 10px 14px;
  line-height: 1.4;
}

.consentPermissionRow code {
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--brand-primary) 2.5%, var(--soft));
  color: var(--brand-primary);
  overflow-wrap: anywhere;
  font-size: 10px;
  font-weight: 650;
}

.consentPermissionRow > span {
  color: var(--foreground);
  font-size: 11px;
  font-weight: 550;
}

.consentExistingAccess {
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--soft);
}

.consentExistingAccess summary {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  color: var(--muted-foreground);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  list-style: none;
}

.consentExistingAccess summary::-webkit-details-marker {
  display: none;
}

.consentExistingAccess summary svg {
  width: 16px;
  height: 16px;
  transition: transform 160ms ease;
}

.consentExistingAccess[open] summary svg {
  transform: rotate(90deg);
}

.consentExistingAccess summary span {
  flex: 1;
}

.consentExistingAccess summary small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 550;
}

.consentExistingAccess .consentPermissionTable {
  max-height: 170px;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
}

.consentControlNote {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 18px 2px 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.consentControlNote svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  margin-top: 1px;
}

.consentActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 18px 40px;
  border-top: 1px solid var(--line);
  background: var(--soft);
}

.consentActions .uiButton-secondary,
.consentActions [data-slot='button'] {
  width: auto;
  min-height: 44px;
  padding-inline: 21px;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 750;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
}

.consentActions [data-variant='default'] {
  min-width: 178px;
  border-color: var(--brand-primary);
  background: var(--brand-primary);
  color: #ffffff;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--brand-primary) 17%, transparent);
}

.consentActions [data-variant='default']:hover {
  border-color: var(--brand-primary-active);
  background: var(--brand-primary-active);
}

.consentActions [data-variant='ghost'] {
  color: var(--muted-foreground);
}

.consentActions [data-variant='ghost']:hover {
  background: color-mix(in srgb, var(--muted) 12%, var(--panel));
  color: var(--foreground);
}

.consentFooter {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px auto 0;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

.consentFooterLink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.consentFooter a {
  color: var(--muted-foreground);
  font-size: 11px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 720px) {
  .consentPage {
    padding: 24px 16px 32px;
  }

  .consentPage > .brand {
    margin-bottom: 18px;
  }

  .consentContext,
  .consentDecisionBody,
  .consentActions {
    padding-inline: 28px;
  }

  .consentPermissionRow {
    grid-template-columns: minmax(124px, 150px) minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .consentPage {
    min-height: 100dvh;
    padding: 0;
    background: var(--panel);
  }

  .consentPage > .brand {
    justify-content: flex-start;
    margin: 0;
    padding: max(18px, env(safe-area-inset-top)) 20px 0;
  }

  .consentFrame {
    width: 100%;
    margin: 0;
  }

  .consentCard {
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .consentContext {
    padding: 22px 20px 0;
  }

  .consentApplicationMark {
    width: 52px;
    height: 52px;
    margin-bottom: 10px;
    border-radius: 15px;
  }

  .consentApplicationIdentity h1 {
    font-size: 20px;
  }

  .consentDecisionBody {
    padding: 16px 20px 18px;
  }

  .consentAccount {
    padding: 11px 12px;
  }

  .consentAccount small {
    display: block;
  }

  .consentSwitchButton {
    min-width: 64px;
    min-height: 44px;
  }

  .consentPermissions {
    padding-top: 16px;
  }

  .consentPermissionTable {
    max-height: min(210px, 32dvh);
  }

  .consentPermissionRow {
    grid-template-columns: minmax(108px, 36%) minmax(0, 1fr);
  }

  .consentPermissionRow code,
  .consentPermissionRow > span {
    padding: 10px;
  }

  .consentExistingAccess summary {
    padding-inline: 12px;
  }

  .consentExistingAccess summary small {
    white-space: nowrap;
  }

  .consentActions {
    position: sticky;
    bottom: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.4fr);
    padding: 13px 20px max(13px, env(safe-area-inset-bottom));
    box-shadow: 0 -8px 24px rgb(29 58 54 / 7%);
  }

  .consentActions [data-slot='button'],
  .consentActions [data-variant='default'] {
    width: 100%;
    min-width: 0;
    padding-inline: 10px;
  }

  .consentFooter {
    display: none;
  }
}

@media (max-width: 460px) {
  .consentPermissionRow {
    grid-template-columns: minmax(0, 1fr);
  }

  .consentPermissionRow code {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .consentPermissionRow code,
  .consentPermissionRow > span {
    padding: 8px 12px;
  }
}

@media (max-width: 900px) and (max-height: 560px) {
  .consentPage {
    padding-top: 16px;
  }

  .consentPage > .brand {
    margin-bottom: 12px;
  }

  .consentContext {
    padding-top: 20px;
  }

  .consentApplicationMark {
    width: 48px;
    height: 48px;
    margin-bottom: 8px;
  }

  .consentApplicationIdentity h1 {
    font-size: 19px;
  }

  .consentAccount {
    margin-top: 14px;
  }

  .consentDecisionBody {
    padding-top: 14px;
  }
}

.spin {
  animation: spin 900ms linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 860px) {
  .consoleTopbar,
  .consoleBody,
  .consoleMain {
    width: 100%;
  }

  .consoleTopbar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .consoleTopbarBrand {
    padding-inline: 16px;
    border-right: 0;
    background: transparent;
  }

  .consoleTopbarActions {
    padding-inline: 16px;
  }

  .consoleContent {
    min-width: 0;
    gap: 16px;
    padding: 16px;
  }

  .consoleBackLink {
    display: inline-flex;
  }

  .consoleDetailHeader > div {
    min-width: 0;
  }

  .consoleDetailMeta {
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .detailFlatRow {
    grid-template-columns: minmax(112px, 0.8fr) minmax(0, 1.2fr) auto;
    gap: 12px;
  }

  .detailFlatRow > span,
  .detailFlatRow code {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .consoleDashboardGrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .accountShell {
    grid-template-columns: 1fr;
  }

  .authShell {
    padding: 52px 16px 22px;
  }

  .authBackLink {
    top: 14px;
    left: 14px;
  }

  .consolePreferences {
    display: inline-flex;
  }

  .authPanel {
    width: min(100%, 400px);
  }

  .authPanel-split {
    grid-template-columns: minmax(0, 1fr);
  }

  .authPanel-split .authBrandPanel {
    min-height: auto;
    padding: 28px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .authPanel-split .authContent {
    padding: 28px;
  }

  .accountShell {
    padding: 0;
  }

  .accountSectionStack {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .accountShellLayout {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .accountSidebar {
    display: none;
  }

  .accountMobileMenu {
    display: inline-flex;
  }

  .accountMobileNavSheet .accountSidebar {
    position: static;
    display: grid;
    min-height: 100%;
    height: auto;
    padding: 20px 16px;
    border: 0;
  }

  .accountMobileNavSheet .accountNav {
    grid-template-columns: 1fr;
  }

  .accountContent {
    width: 100%;
    padding: 38px 24px 64px;
  }

  .accountProfileSummary {
    grid-template-columns: 1fr;
  }

  .accountGrid,
  .accountDashboardGrid,
  .accountMetricGrid,
  .applicationTypeGrid,
  .featureGrid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .realmrootWordmarkContext {
    display: none;
  }

  [data-slot='table']:has([data-empty-state='true']) {
    width: 100%;
    min-width: 100%;
  }

  [data-slot='table']:has([data-empty-state='true']) [data-slot='table-header'] {
    display: none;
  }

  .consoleListToolbar [data-slot='native-select-wrapper'] {
    width: 100%;
  }

  .consoleTopbarBrand,
  .consoleTopbarActions {
    gap: 8px;
    padding-inline: 8px;
  }

  .consoleTopbarBrand [data-slot='button'],
  .consoleTopbarActions > [data-slot='button'] {
    width: 44px;
    height: 44px;
  }

  .consoleSearchTrigger {
    padding-inline: 0;
  }

  .consoleSearchTrigger > span {
    margin-inline: auto;
  }

  .consoleSearchTrigger > span > span,
  .consoleSearchTrigger kbd {
    display: none;
  }

  .consoleBrand {
    gap: 8px;
  }

  .consoleBrandName,
  .consoleBrandContext,
  .consoleBrand [aria-hidden='true'] {
    display: none;
  }

  .consoleDetailHeader {
    flex-direction: column;
    gap: 14px;
  }

  .consoleDetailHeader > [data-slot='button'] {
    align-self: flex-start;
  }

  .shell {
    padding: 18px;
  }

  .topbar,
  .accountTopbar,
  .accountHeader,
  .panelHeader,
  .buttonRow,
  .identitySummary,
  .itemRow {
    align-items: stretch;
    flex-direction: column;
  }

  .accountTopbarActions {
    width: 100%;
  }

  .accountTopbar .preferencesControls {
    margin-left: auto;
  }

  .hero {
    margin: 64px auto 32px;
  }

  .shell h1 {
    font-size: 40px;
  }

  .intro,
  .authBrandPanel p:not(.eyebrow) {
    font-size: 14px;
  }

  .identitySummary button {
    margin-left: 0;
  }

  .assetUploadRow {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .avatarUploadControl,
  .accountHero {
    grid-template-columns: 1fr;
    gap: 10px 12px;
    padding: 16px;
  }

  .accountHeroIdentity {
    grid-template-columns: 52px minmax(0, 1fr);
    justify-items: stretch;
  }

  .accountProfileSummary .accountHeroIdentity {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .accountProfileDetails .settingsAction {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .accountProfileDetails .settingsActionMain {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .accountProfileDetails .settingsActionIcon,
  .accountProfileRowAvatar {
    width: 40px;
    height: 40px;
  }

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

  .accountHero > .uiButton {
    justify-self: start;
    min-height: 36px;
  }

  .accountHeaderAvatar {
    width: 52px;
    height: 52px;
  }

  .assetPreview {
    width: 52px;
    height: 52px;
  }

  .accountContent .settingsPanel {
    display: grid;
  }

  .accountPanelGroup {
    padding: 0;
  }

  .accountPanelHeader {
    padding: 16px;
  }

  .settingsAction {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 16px;
  }

  .settingsAction .accountRowLabel,
  .settingsAction .accountRowValue,
  .settingsAction .accountRowAction {
    grid-column: 1;
    grid-row: auto;
  }

  .settingsAction .accountRowAction,
  .settingsActionButtons {
    width: 100%;
    justify-content: stretch;
  }

  .settingsAction .accountRowAction > *,
  .settingsActionButtons > *,
  .accountPanelActions > * {
    width: 100%;
    min-height: 44px;
  }

  .settingsActionButtons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }

  .accountPanelActions {
    padding: 0 16px 16px;
  }

  .dialogFormBody {
    padding: 14px;
  }

  .settingsBody {
    padding: 0;
  }

  .accountRows.itemList {
    padding: 0 16px 12px;
  }

  .subsectionTitle {
    padding-inline: 16px;
  }

  .accountContent .itemRow {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .itemRowMain {
    align-items: start;
  }

  .accountContent .itemRow .uiButton {
    justify-self: start;
  }

  .accountContent .panelTitle {
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 8px;
  }

  .accountContent .panelTitle > .uiButton {
    width: 100%;
  }

  .segmented,
  .accountNav {
    grid-template-columns: 1fr;
  }

  .accountPageHeader {
    align-items: stretch;
    flex-direction: column;
    margin-bottom: 24px;
  }

  .accountPageHeader h1 {
    font-size: 26px;
  }

  .accountPageHeader p {
    font-size: 13px;
  }

  .accountRow {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
  }

  .accountRowValue {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .accountRowAction {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-end;
  }

  .accountContent .itemRow:not(.itemRowEmpty) {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .accountContent .itemRow:not(.itemRowEmpty) .accountRowLabel {
    grid-column: 1;
    grid-row: 1 / 3;
  }

  .accountContent .itemRow:not(.itemRowEmpty) .accountRowValue {
    grid-column: 2;
    grid-row: 1;
  }

  .accountContent .itemRow:not(.itemRowEmpty) .accountRowAction {
    grid-column: 2;
    grid-row: 2;
  }

  .accountTabPanel > .accountRows,
  .accountObjectSection.is-surface > .accountRows,
  .accountTabPanel > .accountObjectSection > .accountRows {
    padding-inline: 16px;
  }

  .accountObjectSection.is-surface > header,
  .accountTabPanel > .accountObjectSection > header {
    padding-inline: 16px;
  }

  .accountTabBody,
  .accountSectionStack .accountObjectSection {
    padding-inline: 16px;
  }

  .accountTabToolbar .uiButton {
    width: 100%;
  }

  .accountEmptyState {
    padding: 16px;
  }

  .accountRows > .accountEmptyState {
    padding: 16px 0;
  }

  .accountTabPanel > .accountEmptyState {
    margin-inline: 16px;
    padding: 16px 0;
  }

  .accountContent {
    padding: 28px 18px 48px;
  }

  .accountContent .uiButton {
    min-height: 44px;
  }

  .consentSwitchButton {
    width: 100%;
    margin-left: 0;
  }

  .authPageFooter {
    align-items: flex-start;
    flex-direction: column;
  }

  .authPoweredBy {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
  html {
    @apply font-sans;
  }
}