/* Authenticated product shell — Cursor-like chrome, landing tokens. */

.br-app {
  --app-bg: #121212;
  --app-sidebar: #181818;
  --app-elevated: #202020;
  --app-card: #181818;
  --app-card-hover: #202020;
  --app-border: #252525;
  --app-border-strong: #363636;
  --app-text: #ededed;
  --app-text-body: #d4d4d4;
  --app-text-muted: #b3b3b3;
  --app-text-faint: #a0a0a0;
  --app-nav-hover: rgba(255, 255, 255, 0.045);
  --app-nav-active: #2a2a2a;
  --app-accent: #86b5f4;
  --app-accent-light: #a6caff;
  --app-success: var(--br-success);
  --app-success-light: var(--br-success-bright);
  --app-danger: #fb7185;
  --app-warning: #fbbf24;
  --app-radius: 12px;
  --app-radius-card: 12px;
  --app-radius-control: 6px;
  --app-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --app-transition: 160ms var(--app-spring);
  --app-sidebar-width: 17.5rem;

  --br-background: var(--app-bg);
  --br-surface-1: var(--app-card);
  --br-surface-2: var(--app-elevated);
  --br-surface-3: #1c1c1c;
  --br-border-subtle: var(--app-border);
  --br-border-default: #2a2a2a;
  --br-border-strong: var(--app-border-strong);
  --br-text-primary: var(--app-text);
  --br-text-heading: var(--app-text);
  --br-text-body: var(--app-text-body);
  --br-text-secondary: var(--app-text-muted);
  --br-text-muted: var(--app-text-faint);

  color-scheme: dark;
  min-height: 100vh;
  background: var(--app-bg);
  color: var(--app-text-body);
  font-family: var(--br-font-sans);
}

.br-app h1,
.br-app h2,
.br-app h3,
.br-app h4,
.br-app .br-app-page-header__title,
.br-app .br-app-panel__title,
.br-app .br-app-section__title,
.br-app .br-app-device__name,
.br-app .br-app-topbar__title,
.br-app .br-logo__wordmark {
  font-family: var(--br-font-sans);
}

.br-app ::selection {
  background: color-mix(in srgb, var(--app-accent) 34%, transparent);
  color: var(--app-text);
}

.br-app :focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--app-bg), 0 0 0 4px var(--app-accent);
}

.br-app .br-mono {
  font-family: var(--br-font-mono);
}

/* Shell */

.br-app-shell {
  display: flex;
  min-height: 100vh;
  background: var(--app-bg);
}

.br-app-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-height: 100dvh;
  width: var(--app-sidebar-width);
  flex: 0 0 var(--app-sidebar-width);
  padding: 0.85rem 0.7rem 0.85rem;
  overflow: visible;
  background: var(--app-sidebar);
  border-right: 1px solid var(--app-border);
  transform: translateX(-100%);
  transition: transform var(--app-transition);
}

.br-app-sidebar.is-open {
  transform: translateX(0);
}

.br-app-sidebar__brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 2.5rem;
  padding: 0.15rem 0.55rem 0.85rem;
}

.br-app-sidebar__brand .br-logo__mark {
  width: 1.65rem;
  height: 1.65rem;
  flex-basis: 1.65rem;
}

.br-app-sidebar__brand .br-logo__wordmark {
  color: var(--app-text);
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: -0.025em;
}

.br-app-nav {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.br-app-nav__group + .br-app-nav__group {
  margin-top: 0.85rem;
}

.br-app-nav__label {
  display: block;
  padding: 0.35rem 0.7rem 0.3rem;
  color: var(--app-text-faint);
  font-size: 0.65rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.br-app-nav__item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 2.15rem;
  padding: 0.45rem 0.7rem;
  border-radius: 8px;
  color: var(--app-text-muted);
  font-size: 0.875rem;
  font-weight: 500;
  transition: background-color var(--app-transition), color var(--app-transition);
}

.br-app-nav__item .br-icon {
  color: var(--app-text-faint);
}

.br-app-nav__item:hover {
  color: var(--app-text);
  background: var(--app-nav-hover);
}

.br-app-nav__item:hover .br-icon,
.br-app-nav__item.is-active .br-icon {
  color: var(--app-text);
}

.br-app-nav__item.is-active {
  color: var(--app-text);
  background: var(--app-nav-active);
}

.br-app-sidebar__footer {
  display: grid;
  gap: 0.65rem;
  flex: 0 0 auto;
  min-height: 0;
  margin-top: auto;
  padding-top: 0.85rem;
  padding-bottom: max(0.1rem, env(safe-area-inset-bottom));
  overflow: visible;
}

.br-app-sidebar__upgrade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.15rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--app-border-strong);
  border-radius: 8px;
  color: var(--app-text);
  font-size: 0.8125rem;
  font-weight: 550;
  background: transparent;
  transition: background-color var(--app-transition), border-color var(--app-transition);
}

.br-app-sidebar__upgrade:hover {
  background: var(--app-nav-hover);
  border-color: color-mix(in srgb, #ffffff 22%, transparent);
}

.br-app-sidebar__user {
  position: relative;
}

.br-app-sidebar__user-button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  margin: 0;
  padding: 0.45rem 0.5rem 0.45rem 0.45rem;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--app-transition), border-color var(--app-transition);
}

.br-app-sidebar__user-button:hover,
.br-app-sidebar__user-button[aria-expanded="true"] {
  background: var(--app-nav-hover);
  border-color: var(--app-border);
}

.br-app-sidebar__identity {
  min-width: 0;
}

.br-app-sidebar__name,
.br-app-sidebar__plan,
.br-app-sidebar__email {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.br-app-sidebar__name {
  color: var(--app-text);
  font-size: 0.8125rem;
  font-weight: 550;
}

.br-app-sidebar__plan,
.br-app-sidebar__email {
  color: var(--app-text-faint);
  font-size: 0.75rem;
}

.br-app-sidebar__more {
  display: grid;
  width: 1.6rem;
  height: 1.6rem;
  place-items: center;
  color: var(--app-text-faint);
}

.br-app .br-app-topbar-notifications .br-popover__trigger {
  display: grid;
  width: 1.85rem;
  height: 1.85rem;
  place-items: center;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--app-text-faint);
  cursor: pointer;
}

.br-app .br-app-topbar-notifications .br-popover__trigger:hover,
.br-app .br-app-topbar-notifications .br-popover__trigger[aria-expanded="true"] {
  background: var(--app-nav-hover);
  color: var(--app-text);
}

.br-app .br-locale__summary {
  min-height: 1.85rem;
  padding: 0.3rem 0.5rem;
  border-color: var(--app-border);
  border-radius: 7px;
  background: transparent;
  color: var(--app-text-faint);
  box-shadow: none;
}

.br-app .br-locale__summary:hover,
.br-app .br-locale[open] .br-locale__summary {
  background: var(--app-nav-hover);
  border-color: var(--app-border-strong);
  color: var(--app-text);
}

.br-app .br-locale__menu {
  min-width: 12rem;
  border-color: var(--app-border-strong);
  background: var(--app-elevated);
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.9);
}

.br-app .br-locale__item {
  color: var(--app-text-body);
}

.br-app .br-locale__item:hover,
.br-app .br-locale__item--current {
  background: var(--app-nav-hover);
  color: var(--app-text);
}

.br-app-backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
  border: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.55);
}

.br-app-frame {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  background: var(--app-bg);
}

.br-app-topbar {
  display: flex;
  align-items: center;
  gap: var(--br-space-md);
  min-height: 3.25rem;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--app-border);
  background: color-mix(in srgb, var(--app-bg) 92%, transparent);
}

.br-app-topbar__left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.br-app-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: var(--app-elevated);
  color: var(--app-text);
}

.br-app-topbar__title {
  margin: 0;
  flex: 1 1 auto;
  color: var(--app-text);
  font-size: 0.9rem;
  font-weight: 550;
}

.br-app-topbar__tools,
.br-app-topbar__actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.br-app-topbar__tools {
  margin-left: auto;
}

.br-app-topbar-profile {
  display: none;
  place-items: center;
}

.br-app-content {
  flex: 1 1 auto;
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding: 1.75rem 1.25rem 4rem;
}

.br-app-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.br-app-page-header__title {
  margin: 0;
  color: var(--app-text);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.br-app-page-header__lede {
  margin: 0.35rem 0 0;
  max-width: 40rem;
  color: var(--app-text-muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

.br-app-page-header__actions,
.br-app-page-actions,
.br-app-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.br-app-actions {
  margin-top: 1rem;
}

/* Buttons inside the product shell */

.br-app .br-button {
  min-height: 2.15rem;
  border-radius: var(--app-radius-control);
  font-family: var(--br-font-sans);
  font-weight: 550;
  letter-spacing: 0;
  transition:
    background-color var(--app-transition),
    border-color var(--app-transition),
    color var(--app-transition),
    opacity var(--app-transition),
    transform var(--app-transition),
    box-shadow var(--app-transition);
}

.br-app .br-button .br-icon {
  transition: transform var(--app-transition);
}

.br-app .br-button:hover .br-icon {
  transform: translateX(2px);
}

.br-app .br-button:focus-visible,
.br-app-stat-card:focus-visible,
.br-app-quick-card:focus-visible,
.br-app-checklist__item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--app-bg), 0 0 0 4px var(--app-accent);
}

.br-app .br-button--md {
  min-height: 1.9rem;
  padding: 0.32rem 0.7rem;
  font-size: 0.8rem;
}

.br-app .br-button--lg,
.br-app .br-button--xl {
  min-height: 2.45rem;
  padding: 0.6rem 1.05rem;
}

.br-app .br-button--primary {
  border: 1px solid transparent;
  background: #f4f4f5;
  color: #0a0a0a;
  box-shadow: none;
}

.br-app .br-button--primary:hover {
  background: #ffffff;
  filter: none;
  transform: none;
}

.br-app .br-button--secondary,
.br-app .br-button--outline {
  border: 1px solid var(--app-border-strong);
  background: transparent;
  color: var(--app-text);
  box-shadow: none;
}

.br-app .br-button--secondary:hover,
.br-app .br-button--outline:hover {
  background: var(--app-nav-hover);
  border-color: color-mix(in srgb, #ffffff 22%, transparent);
  transform: none;
}

.br-app .br-button--ghost {
  color: var(--app-text-muted);
  background: transparent;
}

.br-app .br-button--ghost:hover {
  color: var(--app-text);
  background: var(--app-nav-hover);
}

.br-app .br-button--danger {
  border-color: color-mix(in srgb, var(--app-danger) 35%, var(--app-border));
  background: transparent;
  color: var(--app-danger);
}

.br-app .br-button--danger:hover {
  background: color-mix(in srgb, var(--app-danger) 16%, #171717);
}

.br-app .br-button--success {
  border-color: var(--app-border-strong);
  background: var(--app-text);
  color: var(--app-bg);
}

.br-app .br-button--success:hover {
  background: #ffffff;
}

.br-app .br-button:active:not(:disabled) {
  transform: none;
  opacity: 0.92;
}

.br-app .br-button:disabled,
.br-app .br-button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.48;
}

/* Surfaces */

.br-app-panel,
.br-app .br-card,
.br-app-stat-card,
.br-app-quick-card,
.br-app-device,
.br-app-download-card {
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-card);
  background: var(--app-card);
  box-shadow: none;
}

.br-app-panel {
  padding: 1.15rem 1.2rem;
  animation: br-app-panel-in 420ms ease both;
}

.br-app-panel--featured {
  border-color: color-mix(in srgb, var(--app-accent) 34%, var(--app-border));
  background: linear-gradient(135deg, color-mix(in srgb, var(--app-accent) 8%, var(--app-card)), var(--app-card) 58%);
}

.br-app-panel--plan {
  animation-delay: 70ms;
}

.br-app-panel__title {
  margin: 0 0 0.35rem;
  color: var(--app-text);
  font-size: 0.95rem;
  font-weight: 600;
}

.br-app-panel__copy,
.br-app-panel__email {
  margin: 0 0 0.85rem;
  color: var(--app-text-muted);
  font-size: 0.8125rem;
  line-height: 1.55;
}

.br-app-panel__copy--mono,
.br-app-panel__email {
  color: var(--app-text);
  font-family: var(--br-font-mono);
  font-size: 0.75rem;
  word-break: break-all;
}

.br-app-kicker {
  margin: 0 0 0.4rem;
  color: var(--app-text-faint);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  font-family: inherit;
}

.br-app-hero-grid,
.br-app-dashboard-grid,
.br-app-stat-grid,
.br-app-quick-grid {
  display: grid;
  gap: 0.85rem;
}

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

.br-app-hero-grid,
.br-app-stat-grid,
.br-app-dashboard-grid {
  margin-bottom: 0.85rem;
}

.br-app-usage-card__label,
.br-app-stat-card__label,
.br-app-stat-card__hint {
  margin: 0;
  color: var(--app-text-faint);
  font-size: 0.78rem;
}

.br-app-usage-card__value,
.br-app-stat-card__value {
  margin: 0.55rem 0 0.85rem;
  color: var(--app-text);
  font-family: var(--br-font-sans);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.br-app-stat-card__value--text {
  font-size: 1.15rem;
}

.br-app-usage-card__meta {
  margin: 0.55rem 0 0;
  color: var(--app-text-faint);
  font-size: 0.75rem;
}

.br-app-progress {
  display: block;
  height: 2px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.br-app-progress > span {
  display: block;
  height: 100%;
  background: #e4e4e7;
}

.br-app-plan-card__heading {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  margin-bottom: 0.45rem;
}

.br-app-plan-card__name {
  margin: 0;
  color: var(--app-text);
  font-size: 0.95rem;
  font-weight: 650;
}

.br-app-plan-card__price,
.br-app-plan-card__status {
  color: var(--app-text-faint);
  font-size: 0.8125rem;
}

.br-app-plan-card__copy {
  margin: 0 0 1rem;
  color: var(--app-text-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.br-app-stat-card,
.br-app-quick-card,
.br-app-device {
  color: inherit;
  text-decoration: none;
}

.br-app-stat-card {
  display: block;
  min-height: 8.2rem;
  padding: 1.05rem 1.1rem;
  transition:
    background-color var(--app-transition),
    border-color var(--app-transition),
    transform var(--app-transition),
    box-shadow var(--app-transition);
  animation: br-app-panel-in 420ms ease both;
}

.br-app-stat-card:nth-child(2) { animation-delay: 50ms; }
.br-app-stat-card:nth-child(3) { animation-delay: 100ms; }
.br-app-stat-card:nth-child(4) { animation-delay: 150ms; }

.br-app-stat-card:hover,
.br-app-quick-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.br-app-stat-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}

.br-app-stat-card__icon,
.br-app-quick-card__icon,
.br-app-device__icon {
  display: grid;
  width: 1.85rem;
  height: 1.85rem;
  place-items: center;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--app-text-muted);
  transition: color var(--app-transition), background-color var(--app-transition), transform var(--app-transition);
}

.br-app-stat-card--mcp .br-app-stat-card__icon,
.br-app-stat-card--account .br-app-stat-card__icon {
  color: var(--app-success-light);
  background: color-mix(in srgb, var(--app-success-light) 10%, transparent);
}

.br-app-stat-card:hover .br-app-stat-card__icon,
.br-app-quick-card:hover .br-app-quick-card__icon {
  transform: scale(1.06);
}

.br-app-stat-card:hover,
.br-app-quick-card:hover,
.br-app-device:hover {
  background: var(--app-card-hover);
  border-color: var(--app-border-strong);
}

.br-app-quick-card {
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-card);
  background: var(--app-card);
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.95rem 1rem;
  transition:
    background-color var(--app-transition),
    border-color var(--app-transition),
    transform var(--app-transition),
    box-shadow var(--app-transition);
  animation: br-app-panel-in 420ms ease both;
}

.br-app-quick-card:nth-child(2) { animation-delay: 60ms; }
.br-app-quick-card:nth-child(3) { animation-delay: 120ms; }
.br-app-quick-card:nth-child(4) { animation-delay: 180ms; }

.br-app-quick-card__body {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.br-app-quick-card__body strong {
  color: var(--app-text);
  font-size: 0.875rem;
}

.br-app-quick-card__body small {
  color: var(--app-text-faint);
  font-size: 0.75rem;
  line-height: 1.4;
}

.br-app-quick-card__arrow {
  align-self: center;
  margin-left: auto;
  color: var(--app-text-faint);
  transition: color var(--app-transition), transform var(--app-transition);
}

.br-app-quick-card:hover .br-app-quick-card__arrow {
  color: var(--app-text);
  transform: translateX(3px);
}

.br-app-checklist {
  margin: 0.85rem 0 0;
  padding: 0;
  list-style: none;
}

.br-app-checklist li + li {
  border-top: 1px solid var(--app-border);
}

.br-app-checklist__item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0;
  color: inherit;
}

.br-app-checklist__mark {
  color: var(--app-text-faint);
}

.br-app-checklist__item.is-complete .br-app-checklist__mark {
  color: var(--app-success-light);
}

.br-app-checklist__label {
  flex: 1 1 auto;
  color: var(--app-text);
  font-size: 0.8125rem;
}

.br-app-checklist__status {
  color: var(--app-text-faint);
  font-size: 0.72rem;
}

.br-app-device-list {
  display: grid;
  gap: 0.65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.br-app-device {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  padding: 1rem 1.05rem;
  min-height: 4.7rem;
  transition: background-color var(--app-transition), border-color var(--app-transition), transform var(--app-transition), box-shadow var(--app-transition);
}

.br-app-device:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.br-app-device.is-revoked {
  opacity: 0.72;
}

.br-app-device__main {
  min-width: 0;
  flex: 1 1 12rem;
}

.br-app-device__name {
  margin: 0 0 0.2rem;
  color: var(--app-text);
  font-size: 0.95rem;
  font-weight: 600;
}

.br-app-device__meta,
.br-app-device__seen {
  margin: 0;
  color: var(--app-text-faint);
  font-size: 0.78rem;
}

.br-app-device__aside {
  display: grid;
  gap: 0.2rem;
  min-width: 10rem;
  text-align: right;
}

.br-app-device__status {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  color: var(--app-text);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.br-app-device__status::before {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background: var(--app-text-faint);
  content: "";
}

.br-app-device__status.is-active {
  color: var(--app-success-light);
}

.br-app-device__status.is-active::before {
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 12%, transparent);
}

.br-app-device-empty,
.br-app-panel--empty {
  text-align: left;
}

.br-app-meta {
  display: grid;
  gap: 0.65rem;
  margin: 0.85rem 0 0;
}

.br-app-meta dt {
  color: var(--app-text-faint);
  font-size: 0.72rem;
}

.br-app-meta dd {
  margin: 0.15rem 0 0;
  color: var(--app-text);
  font-size: 0.875rem;
}

.br-app-section + .br-app-section {
  margin-top: 1.25rem;
}

.br-app-pagination {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

.br-app-back {
  margin: 1rem 0 0;
}

.br-app-back a {
  color: var(--app-text-muted);
  font-size: 0.8125rem;
}

/* Forms */

.br-app .br-field__label {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--app-text-body);
  font-size: 0.78rem;
  font-weight: 550;
}

.br-app .br-field__hint {
  margin: 0.35rem 0 0;
  color: var(--app-text-faint);
  font-size: 0.75rem;
}

.br-app .br-field__error {
  margin: 0.35rem 0 0;
  color: #fda4af;
  font-size: 0.75rem;
}

.br-app .br-input,
.br-app select.br-input,
.br-app textarea.br-input {
  width: 100%;
  min-height: 2.35rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--app-border-strong);
  border-radius: var(--app-radius-control);
  background: var(--app-card);
  color: var(--app-text);
  box-shadow: none;
}

.br-app .br-input:hover:not(:disabled) {
  border-color: var(--app-border-strong);
}

.br-app .br-input:focus {
  border-color: color-mix(in srgb, #ffffff 28%, var(--app-border));
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.04);
  outline: none;
}

.br-app .br-field--invalid .br-input {
  border-color: color-mix(in srgb, var(--app-danger) 55%, var(--app-border));
}

.br-app .br-field__reveal {
  position: absolute;
  top: 50%;
  right: 0.45rem;
  border: 0;
  background: transparent;
  color: var(--app-text-faint);
  transform: translateY(-50%);
}

.br-app .br-check {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--app-text-body);
  font-size: 0.8125rem;
}

.br-app .br-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.br-app-download-grid {
  display: grid;
  gap: 0.65rem;
  margin: 0.85rem 0 0;
  padding: 0;
  list-style: none;
}

.br-app-download-card {
  padding: 0.9rem 1rem;
}

/* Popovers */

.br-app .br-popover {
  position: relative;
}

.br-app .br-popover__menu {
  position: absolute;
  z-index: 90;
  min-width: 15rem;
  overflow: hidden;
  border: 1px solid var(--app-border-strong);
  border-radius: 12px;
  background: var(--app-elevated);
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.9);
}

.br-app .br-popover__menu[hidden] {
  display: none !important;
}

.br-app .br-app-topbar-notifications__menu {
  top: calc(100% + 0.45rem);
  right: 0;
  width: min(22rem, calc(100vw - 1.5rem));
}

.br-app .br-app-sidebar-user-menu {
  left: 0;
  right: 0;
  bottom: calc(100% + 0.45rem);
  width: auto;
  min-width: 0;
}

.br-app .br-notifications__header,
.br-app .br-notifications__footer,
.br-app .br-sidebar-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.8rem 0.9rem;
}

.br-app .br-sidebar-menu__header {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
  border-bottom: 1px solid var(--app-border);
}

.br-app .br-sidebar-menu__header-link {
  color: inherit;
  text-decoration: none;
  transition: background-color var(--app-transition);
}

.br-app .br-sidebar-menu__header-link:hover,
.br-app .br-sidebar-menu__header-link[aria-current="page"] {
  background: var(--app-nav-hover);
}

.br-app .br-sidebar-menu__header strong,
.br-app .br-sidebar-menu__header span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.br-app .br-notifications__header {
  border-bottom: 1px solid var(--app-border);
}

.br-app .br-notifications__footer {
  border-top: 1px solid var(--app-border);
}

.br-app .br-notifications__header strong,
.br-app .br-sidebar-menu__header strong {
  color: var(--app-text);
  font-size: 0.8125rem;
}

.br-app .br-notifications__header span,
.br-app .br-sidebar-menu__header span,
.br-app .br-notification__body span {
  color: var(--app-text-faint);
  font-size: 0.72rem;
}

.br-app .br-notifications__list {
  max-height: min(22rem, 50dvh);
  margin: 0;
  padding: 0.35rem;
  overflow-y: auto;
  list-style: none;
}

.br-app .br-notification {
  display: flex;
  gap: 0.65rem;
  padding: 0.65rem;
  border-radius: 8px;
}

.br-app .br-notification__body {
  display: grid;
  gap: 0.15rem;
}

.br-app .br-notification__body strong {
  color: var(--app-text);
  font-size: 0.8rem;
}

.br-app .br-notifications__empty {
  padding: 1rem 0.9rem;
  color: var(--app-text-faint);
  font-size: 0.8rem;
}

.br-app .br-sidebar-menu__items {
  display: grid;
  padding: 0.35rem;
}

.br-app .br-sidebar-menu__form {
  display: block;
  width: 100%;
  margin: 0;
}

.br-app .br-sidebar-menu__item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  padding: 0.55rem 0.6rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--app-text-body);
  font: inherit;
  font-size: 0.8125rem;
  text-align: left;
  cursor: pointer;
}

.br-app .br-sidebar-menu__item .br-icon {
  flex-shrink: 0;
  color: var(--app-text-faint);
}

.br-app .br-sidebar-menu__item:hover {
  background: var(--app-nav-hover);
  color: var(--app-text);
}

.br-app .br-sidebar-menu__item:hover .br-icon {
  color: var(--app-text);
}

.br-app .br-sidebar-menu__separator {
  display: block;
  height: 1px;
  margin: 0.25rem 0.35rem;
  background: var(--app-border);
}

.br-app .br-notifications__footer a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--app-text);
  font-size: 0.78rem;
}

/* Dialogs + SweetAlert */

.br-app .br-dialog {
  width: min(32rem, calc(100vw - 1.5rem));
  max-height: calc(100dvh - 1.5rem);
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: inherit;
}

.br-app .br-dialog::backdrop {
  background: rgba(0, 0, 0, 0.62);
}

.br-app .br-dialog__panel {
  max-height: inherit;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.15rem;
  border: 1px solid var(--app-border-strong);
  border-radius: 14px;
  background: var(--app-card);
}

html.br-dialog-open {
  overflow-y: hidden;
}

.br-app .br-dialog__header,
.br-app .br-dialog__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.br-app .br-dialog__heading {
  align-items: center;
}

.br-app .br-dialog__icon {
  display: grid;
  width: 2.15rem;
  height: 2.15rem;
  place-items: center;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  color: var(--app-text);
}

.br-app .br-dialog__title {
  margin: 0;
  color: var(--app-text);
  font-size: 1rem;
}

.br-app .br-dialog__copy {
  margin: 0.65rem 0 1rem;
  color: var(--app-text-muted);
  font-size: 0.8125rem;
}

.br-app .br-dialog__close {
  display: grid;
  width: 1.85rem;
  height: 1.85rem;
  place-items: center;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--app-text-faint);
}

.br-app .br-dialog__close:hover {
  background: var(--app-nav-hover);
  color: var(--app-text);
}

.br-app .br-dialog__actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

/* Skeleton */

.br-app-navigation-skeleton {
  position: fixed;
  inset: 3.25rem 0 0;
  z-index: 18;
  display: none;
  padding: 1.75rem 1.25rem;
  background: var(--app-bg);
  pointer-events: none;
}

.br-app.is-navigating .br-app-navigation-skeleton {
  display: block;
}

.br-skeleton {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--app-border);
  border-radius: 10px;
  background: var(--app-card);
}

.br-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
  animation: br-app-shimmer 1.2s ease-in-out infinite;
}

.br-skeleton--title {
  width: min(18rem, 60vw);
  height: 1.6rem;
  margin-bottom: 0.7rem;
}

.br-skeleton--copy {
  width: min(28rem, 78vw);
  height: 0.85rem;
  margin-bottom: 1.4rem;
}

.br-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.br-skeleton--card {
  min-height: 8.5rem;
}

@keyframes br-app-shimmer {
  100% { transform: translateX(100%); }
}

@keyframes br-app-toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

@keyframes br-app-toast-out {
  to { opacity: 0; transform: translateY(-6px); }
}

@keyframes br-app-panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 767px) {
  .br-app-shell {
    overflow-x: hidden;
  }

  .br-app-sidebar {
    position: fixed;
    pointer-events: none;
  }

  .br-app-sidebar.is-open {
    pointer-events: auto;
  }

  .br-app-page-header {
    flex-direction: column;
    align-items: stretch;
  }

  .br-app-page-header__actions .br-button {
    flex: 1 1 auto;
  }
}

@media (min-width: 768px) {
  .br-app-sidebar,
  .br-app-sidebar.is-open {
    position: sticky;
    top: 0;
    height: 100dvh;
    max-height: 100dvh;
    transform: none;
    pointer-events: auto;
  }

  .br-app-menu,
  .br-app-backdrop,
  .br-app-topbar {
    display: none;
  }

  .br-app-content {
    padding: 2.5rem 3rem 5rem;
  }

  .br-app-hero-grid,
  .br-app-dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .br-app-stat-grid,
  .br-app-quick-grid,
  .br-skeleton-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .br-app-navigation-skeleton {
    inset: 0 0 0 var(--app-sidebar-width);
  }
}

@media (min-width: 1100px) {
  .br-app-stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .br-app-sidebar,
  .br-app .br-button,
  .br-skeleton::after,
  .br-app-panel,
  .br-app-stat-card,
  .br-app-quick-card {
    transition: none;
    animation: none;
  }
}

.br-app-setup-details { margin-top: 1rem; }
.br-app-setup-details summary { cursor: pointer; color: var(--app-text-muted); font-size: 0.8125rem; }
.br-app-setup-details[open] summary { color: var(--app-text); }
.br-app .br-app-stat-card__icon { background: none; border: 0; }

/* Desktop utilities stay with the persistent sidebar; mobile uses the topbar. */
.br-app-sidebar-tools { display: none; }
@media (min-width: 768px) {
  .br-app-sidebar-tools {
    display: block;
    min-height: 1.85rem;
  }
  .br-app-sidebar-tools .br-app-topbar__tools {
    justify-content: space-between;
    width: 100%;
    margin-left: 0;
  }
  .br-app-sidebar-tools .br-locale__menu {
    top: auto;
    bottom: calc(100% + 0.5rem);
    left: 0;
    right: auto;
  }
  .br-app .br-app-sidebar-tools .br-app-topbar-notifications__menu {
    top: auto;
    bottom: calc(100% + 0.5rem);
    left: 0;
    right: auto;
    width: min(22rem, calc(100vw - var(--app-sidebar-width) + 3rem));
    min-width: min(18rem, calc(100vw - 1rem));
    max-width: calc(100vw - 1rem);
  }

  .br-app .br-app-sidebar-tools .br-notifications__list {
    max-height: min(22rem, calc(100dvh - 12rem));
  }
}