/* Account controls share the product palette and keep native form semantics. */
.br-field__control[data-controller~="password-visibility"] { position: relative; min-width: 0; }
.br-field__control[data-controller~="password-visibility"] .br-input { padding-right: 2.8rem; }
.br-field__control[data-controller~="password-visibility"] .br-field__reveal {
  position: absolute; inset: 50% .3rem auto auto; transform: translateY(-50%);
  display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0;
  border: 0; border-radius: .35rem; background: transparent; color: var(--br-text-secondary);
  cursor: pointer; transition: background-color 160ms ease, color 160ms ease;
}
.br-field__control .br-field__reveal[hidden] { display: none; }
.br-field__control .br-field__reveal:hover { background: rgba(255,255,255,.06); color: var(--br-text-heading); }
.br-field__control .br-field__reveal:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
.br-password-eye { grid-area: 1 / 1; display: flex; transition: opacity 160ms ease, transform 160ms ease; }
.br-password-eye--hide { opacity: 0; transform: scale(.65) rotate(-12deg); }
.is-revealed > .br-field__reveal .br-password-eye--show { opacity: 0; transform: scale(.65) rotate(12deg); }
.is-revealed > .br-field__reveal .br-password-eye--hide { opacity: 1; transform: scale(1) rotate(0); }

.br-verification-form { gap: 1.5rem; }
.br-verification-code { display: grid; gap: 1rem; min-width: 0; }
.br-verification-code > .br-field__label { text-align: center; font-size: .75rem; letter-spacing: .06em; }
.br-verification-code__control { position: relative; min-width: 0; }
.br-verification-code__cells { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .6rem; max-width: 24rem; margin: 0 auto; }
.br-verification-code__cells[hidden], .br-verification-code__mode[hidden] { display: none; }
.br-verification-code__cell {
  display: grid; place-items: center; min-width: 0; height: 3.7rem;
  border: 1px solid var(--br-border-default); border-radius: .6rem; background: rgba(0,0,0,.2);
  color: var(--br-text-heading); font: 500 1.5rem var(--br-font-mono); cursor: text;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}
.br-verification-code__cell.is-filled { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.22); }
.br-verification-code__cell.is-active { border-color: rgba(255,255,255,.7); box-shadow: 0 0 0 3px rgba(255,255,255,.07); }
.br-verification-code.is-enhanced:not(.is-recovery) .br-verification-code__control > input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; pointer-events: none; }
.br-verification-code.is-recovery .br-input { font-family: var(--br-font-mono); text-align: center; letter-spacing: .06em; }
.br-verification-code > .br-field__hint { margin: 0; text-align: center; line-height: 1.6; color: var(--br-text-secondary); font-size: .8125rem; }
.br-verification-code__mode { justify-self: center; text-decoration: none; }
.br-auth-portal .br-verification-resend { display: flex; margin: .75rem auto 0; }
.br-app .br-verification-form--settings { width: min(100%, 28rem); margin: .4rem auto 1rem; padding: 1.1rem; background: var(--app-bg); border: 1px solid var(--app-border); border-radius: var(--app-radius-card); }
.br-verification-form--settings > .br-button { width: 100%; }

.br-app .br-settings-layout { gap: 1.5rem; }
.br-app .br-settings-content { min-width: 0; }
.br-app .br-settings-content .br-settings-card { box-shadow: 0 1px 0 rgba(255,255,255,.025); }
.br-app .br-settings-content .br-settings-card__header { padding: 1.2rem 1.25rem; gap: .85rem; }
.br-app .br-settings-content .br-settings-card__heading { display: block; min-width: 0; flex: 1; }
.br-app .br-settings-content .br-settings-card__heading h2 { font-size: .94rem; line-height: 1.5; }
.br-app .br-settings-content .br-settings-card__heading > div > p:not(.br-app-kicker) { display: block; margin: .35rem 0 0; font-size: .8125rem; line-height: 1.6; color: var(--app-text-muted); }
.br-app .br-settings-content .br-settings-card__body { padding: 1.15rem 1.25rem; }
.br-app .br-settings-content .br-settings-form .br-field,
.br-app .br-account-profile .br-account-form .br-field { padding: 1rem 1.25rem; row-gap: .5rem; }
.br-app .br-settings-content .br-settings-form .br-field__control,
.br-app .br-settings-content .br-settings-form .br-field__hint { width: min(100%, 25rem); }
.br-app .br-settings-content .br-input,
.br-app .br-account-profile .br-input { min-height: 2.5rem; transition: border-color 160ms ease, box-shadow 160ms ease; }
.br-app .br-settings-inline-row .br-button { min-height: 2.5rem; }
.br-app .br-settings-content .br-settings-card__footer,
.br-app .br-account-profile .br-account-form__footer { padding: 1rem 1.25rem; gap: .75rem; background: rgba(255,255,255,.012); }
.br-app .br-settings-nav__item { transition: background-color 160ms ease, color 160ms ease; }
.br-app .br-settings-toggle { padding: 1.1rem 1.25rem; }
.br-app .br-settings-toggle__control { transition: background-color 160ms ease, border-color 160ms ease; }
.br-app .br-security-recovery { background: var(--app-bg); padding: 1.25rem; }
.br-app .br-security-recovery ul { gap: .5rem; margin: 1.1rem 0; }
.br-app .br-security-recovery li { padding: .65rem .75rem; border: 1px solid var(--app-border); border-radius: var(--app-radius-control); }
.br-app .br-security-recovery code { font-size: .8rem; letter-spacing: .025em; }
.br-app .br-security-log { border: 1px solid var(--app-border); border-radius: var(--app-radius-card); overflow: hidden; background: var(--app-card); }
.br-app .br-security-log__header { padding: 1.2rem 1.25rem; }
.br-app .br-security-events { margin: 0; }
.br-app .br-security-event { padding: 1.1rem 1.25rem; transition: background-color 160ms ease; }
.br-app .br-security-event:hover { background: rgba(255,255,255,.018); }
.br-app .br-security-event__icon { display: grid; place-items: center; width: 2rem; height: 2rem; color: var(--app-text-muted); }
.br-app .br-security-event__details { margin-top: .6rem; font-size: .75rem; color: var(--app-text-muted); }
.br-security-event__details summary { cursor: pointer; width: fit-content; }
.br-security-event__details[open] summary { margin-bottom: .5rem; }
.br-app .br-security-log__empty, .br-app .br-security-log__pagination { padding: 1.25rem; }
.br-app .br-account-banner .br-stack-row { gap: 1rem; padding: 1.4rem 1.25rem; }
.br-app .br-account-banner__badges { margin-top: .6rem; }
.br-app .br-account-banner__name { font-size: 1.1rem; }
.br-app .br-account-profile .br-stack-label { margin: 1.2rem 0 .65rem; color: var(--app-text-muted); letter-spacing: .04em; }
.br-app .br-account-link { transition: background-color 160ms ease; }
.br-account-link > .br-icon { margin-left: auto; color: var(--app-text-faint); transition: transform 160ms ease; }
.br-account-link:hover > .br-icon { transform: translateX(3px); }
.br-account-progress { width: 8rem; height: .3rem; border: 0; border-radius: 1rem; overflow: hidden; appearance: none; background: var(--app-border); }
.br-account-progress::-webkit-progress-bar { background: var(--app-border); }
.br-account-progress::-webkit-progress-value { background: var(--app-text-muted); border-radius: 1rem; }
.br-account-progress::-moz-progress-bar { background: var(--app-text-muted); border-radius: 1rem; }
@media (prefers-reduced-motion: no-preference) {
  .br-settings-content, .br-account-profile, .br-verification-form { animation: br-account-enter 220ms ease-out both; }
  @keyframes br-account-enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
}
@media (max-width: 600px) {
  .br-verification-code__cells { gap: .4rem; }
  .br-verification-code__cell { height: 3rem; font-size: 1.3rem; border-radius: .45rem; }
  .br-app .br-security-controls .br-settings-card__heading { flex-basis: 100%; }
  .br-app .br-settings-content .br-settings-card__header,
  .br-app .br-settings-content .br-settings-card__body { padding: 1rem; }
  .br-app .br-settings-content .br-settings-form .br-field { padding: 1rem; grid-template-columns: minmax(0, 1fr); }
  .br-app .br-settings-content .br-settings-form .br-field__control,
  .br-app .br-settings-content .br-settings-form .br-field__hint { width: 100%; justify-self: stretch; grid-column: 1; }
  .br-app .br-settings-card__footer > .br-button { flex: 1 1 auto; }
  .br-app .br-account-banner .br-stack-row { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .br-password-eye, .br-verification-code__cell, .br-field__reveal,
  .br-app .br-settings-content *, .br-app .br-account-profile * { animation: none !important; transition: none !important; }
}