/* ====================================================================
   HUMAN Academy — Design System v4 do cofre
   --------------------------------------------------------------------
   Escopo disciplinado:
     · body.layout_frontend  → telas públicas (login, registro, LOCK,
       2FA, splash): DARK, vidro, pílula branca.
     · body:not(.layout_frontend) → app: sidebar escura flutuante,
       canvas claro, superfícies brancas, dropdowns com blur.
   Seletores independentes de idioma (não dependem de title/texto).
   Injetado via nginx — sobrevive a updates do Vaultwarden.
   ==================================================================== */

/* ---------------------------- Fontes ------------------------------- */
@font-face { font-family: 'Satoshi'; src: url('/branding/fonts/satoshi-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('/branding/fonts/satoshi-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('/branding/fonts/satoshi-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* ---------------------------- Tokens ------------------------------- */
:root {
  --ha-ink:        #101013;
  --ha-ink-soft:   rgba(16,16,19,.62);
  --ha-canvas:     #F2F2F0;
  --ha-surface:    #FFFFFF;
  --ha-line:       rgba(16,16,19,.08);
  --ha-line-soft:  rgba(16,16,19,.05);
  --ha-dark:       #0E0E10;
  --ha-radius-xl:  24px;
  --ha-radius-lg:  18px;
  --ha-radius-md:  13px;
  --ha-shadow-pop: 0 18px 50px -12px rgba(16,16,19,.18), 0 4px 14px -6px rgba(16,16,19,.10);
  --ha-shadow-card:0 1px 2px rgba(16,16,19,.04), 0 10px 30px -18px rgba(16,16,19,.12);
}

/* ----------------- Variáveis do app (web vault) ---------------------
   Sobrescreve a paleta nos DOIS temas (theme_light/theme_dark): o tema
   visual é nosso, não do SO do usuário. */
:root, html, body, html.theme_light, html.theme_dark {
  --primary: #101013 !important;
  --primary-accent: #2c2c30 !important;

  --color-background: 242 242 240 !important;
  --color-background-alt: 242 242 240 !important;
  --color-background-alt2: 14 14 16 !important;
  --color-background-alt3: 14 14 16 !important;
  --color-background-alt4: 22 22 25 !important;

  --color-primary-100: 232 232 230 !important;
  --color-primary-300: 110 110 116 !important;
  --color-primary-500: 16 16 19 !important;
  --color-primary-600: 16 16 19 !important;
  --color-primary-700: 50 50 55 !important;

  --color-secondary-100: 236 236 234 !important;
  --color-secondary-300: 210 210 207 !important;
  --color-secondary-600: 122 122 128 !important;
  --color-secondary-700: 16 16 19 !important;

  --color-text-main: 16 16 19 !important;
  --color-text-muted: 116 116 122 !important;
  --color-text-headers: 16 16 19 !important;
  --color-text-contrast: 255 255 255 !important;
  --color-text-alt2: 255 255 255 !important;
  --color-text-code: 176 42 110 !important;

  --color-success-600: 22 142 84 !important;
  --color-success-700: 13 106 62 !important;
  --color-danger-600: 203 58 43 !important;
  --color-danger-700: 158 44 32 !important;
  --color-warning-600: 176 118 18 !important;
  --color-warning-700: 140 92 12 !important;
  --color-info-600: 110 110 116 !important;
  --color-info-700: 86 86 92 !important;
}

/* --------------------------- Base ---------------------------------- */
body, html, input, button, select, textarea {
  font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { font-weight: 700 !important; letter-spacing: -0.015em !important; }
body:not(.layout_frontend) h1, body:not(.layout_frontend) h2,
body:not(.layout_frontend) h3, body:not(.layout_frontend) h4 { color: var(--ha-ink) !important; }
main h1, main .tw-text-2xl { font-size: 1.65rem !important; }

::selection { background: #101013; color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(16,16,19,.18); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(16,16,19,.32); }
::-webkit-scrollbar-track { background: transparent; }
aside ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); }

/* Autofill do navegador — NUNCA texto invisível */
body:not(.layout_frontend) input:-webkit-autofill,
body:not(.layout_frontend) input:-webkit-autofill:hover,
body:not(.layout_frontend) input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: #101013 !important;
  caret-color: #101013 !important;
}
body.layout_frontend input:-webkit-autofill,
body.layout_frontend input:-webkit-autofill:hover,
body.layout_frontend input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #1c1c20 inset !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff !important;
}

/* ====================================================================
   SIDEBAR — bloco escuro FLUTUANTE
   ==================================================================== */
bit-layout aside {
  margin: 14px 0 14px 14px !important;
  height: calc(100vh - 28px) !important;
  border-radius: var(--ha-radius-xl) !important;
  background: var(--ha-dark) !important;
  box-shadow: 0 18px 44px -18px rgba(16,16,19,.45);
  border: 1px solid rgba(255,255,255,.06);
  overflow: hidden !important;
}
bit-layout aside > nav { background: transparent !important; padding: 10px 10px 12px !important; }

/* logo no topo da sidebar — seletores SEM dependência de idioma */
bit-layout aside > nav > a:first-of-type bit-icon,
bit-layout aside a[href="#/"] bit-icon,
a[routerlink="."] bit-icon,
bit-nav-logo bit-icon {
  display: block !important;
  width: 186px; height: 40px;
  background: url('/images/logo-white@2x.png') no-repeat left center / 178px auto;
}
bit-layout aside > nav > a:first-of-type bit-icon svg,
bit-layout aside a[href="#/"] bit-icon svg,
a[routerlink="."] bit-icon svg,
bit-nav-logo bit-icon svg { display: none !important; }
bit-layout aside > nav > a:first-of-type { margin: 14px 10px 18px 14px !important; }

/* itens de navegação */
bit-layout aside a, bit-layout aside button {
  color: rgba(255,255,255,.78) !important;
  border-radius: var(--ha-radius-md) !important;
}
bit-layout aside a:hover, bit-layout aside button:hover {
  color: #fff !important;
  background: rgba(255,255,255,.07) !important;
}
bit-layout aside a[aria-current], bit-layout aside .active,
bit-layout aside a[class*="active"] {
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
}
bit-layout aside i.bwi { color: inherit !important; opacity: .92; }
bit-layout aside nav > :last-child, bit-layout aside [class*="tw-mt-auto"] {
  border-top: 1px solid rgba(255,255,255,.08) !important;
  background: transparent !important;
}

/* ====================================================================
   CANVAS / CONTEÚDO
   ==================================================================== */
bit-layout main {
  background: var(--ha-canvas) !important;
  padding: 28px 32px !important;
}

/* banner/hero escuro (Get started) */
main [class*="tw-bg-background-alt2"] {
  background: var(--ha-dark) !important;
  border-radius: var(--ha-radius-lg) !important;
  border: 1px solid rgba(255,255,255,.06);
}
main [class*="tw-bg-background-alt2"] * { color: rgba(255,255,255,.92); }
main [class*="tw-bg-background-alt2"] .tw-bg-primary-600 { background: #fff !important; }

/* barras de progresso — finas e arredondadas, nunca um blocão */
main .progress, main bit-progress > div, main [role="progressbar"] {
  height: 10px !important;
  border-radius: 9999px !important;
  background: rgba(16,16,19,.10) !important;
  overflow: hidden !important;
}
main .progress .progress-bar, main bit-progress > div > div, main [role="progressbar"] > div {
  background: var(--ha-ink) !important;
  border-radius: 9999px !important;
  height: 100% !important;
}

/* onboarding "Get started" como cartão estruturado */
main app-onboarding, main app-vault-onboarding {
  display: block;
  background: var(--ha-surface);
  border: 1px solid var(--ha-line);
  border-radius: var(--ha-radius-lg);
  box-shadow: var(--ha-shadow-card);
  padding: 18px 22px;
  margin-bottom: 22px;
}

/* ====================================================================
   CARDS (app) — superfícies brancas  [escopo: NUNCA nas telas públicas]
   ==================================================================== */
body:not(.layout_frontend) .card {
  background: var(--ha-surface) !important;
  border: 1px solid var(--ha-line) !important;
  border-radius: var(--ha-radius-lg) !important;
  box-shadow: var(--ha-shadow-card) !important;
  color: var(--ha-ink) !important;
}
body:not(.layout_frontend) .card, body:not(.layout_frontend) .card * { color: var(--ha-ink) !important; }
body:not(.layout_frontend) .card .text-muted, body:not(.layout_frontend) .card small { color: var(--ha-ink-soft) !important; }
body:not(.layout_frontend) .card a:hover, body:not(.layout_frontend) .card button:hover { color: #000 !important; }
body:not(.layout_frontend) .card-header { background: transparent !important; border-bottom: 1px solid var(--ha-line-soft) !important; font-weight: 700; letter-spacing: .02em; }
body:not(.layout_frontend) .card-body { background: transparent !important; }
main .card .filter-heading .filter-button h3,
main .card .filter-heading .filter-button h3.active,
main .card h3, main .card h3.active {
  color: var(--ha-ink) !important;
  font-size: .78rem !important;
  text-transform: uppercase; letter-spacing: .08em; font-weight: 700 !important;
}
.card .filter-button { border-radius: 10px !important; }
.card .filter-button:hover { background: rgba(16,16,19,.05) !important; }

/* busca — pílula */
bit-search input, main input[type="search"] {
  background: rgba(16,16,19,.045) !important;
  border: 1px solid transparent !important;
  border-radius: 9999px !important;
  color: var(--ha-ink) !important;
  transition: background .15s, border-color .15s;
}
bit-search input:focus, main input[type="search"]:focus {
  background: #fff !important;
  border-color: rgba(16,16,19,.25) !important;
  box-shadow: 0 0 0 4px rgba(16,16,19,.07) !important;
}

/* ====================================================================
   BOTÕES — pílulas (app)
   ==================================================================== */
button[buttontype="primary"], button[type="submit"],
button[class*="tw-bg-primary"], a[class*="tw-bg-primary"] {
  border-radius: 9999px !important;
  font-weight: 500 !important;
  letter-spacing: .01em;
  transition: transform .08s ease, background .15s ease;
}
button[buttontype="primary"]:active { transform: scale(.985); }

body:not(.layout_frontend) button[buttontype="secondary"] {
  border-radius: 9999px !important;
  background: var(--ha-surface) !important;
  border: 1px solid rgba(16,16,19,.16) !important;
  color: var(--ha-ink) !important;
}
body:not(.layout_frontend) button[buttontype="secondary"]:hover { background: #fafaf9 !important; border-color: rgba(16,16,19,.30) !important; }
button[buttontype="danger"] { border-radius: 9999px !important; }

main button.tw-border-none, main button[biticonbutton] {
  border-radius: 12px !important;
  color: rgba(16,16,19,.66) !important;
}
main button[biticonbutton]:hover { background: rgba(16,16,19,.06) !important; color: var(--ha-ink) !important; }

/* Bootstrap legado (Generator, Import/Export, Settings, modais) */
body:not(.layout_frontend) .btn { border-radius: 9999px !important; font-weight: 500 !important; }
body:not(.layout_frontend) .btn-primary {
  background: var(--ha-ink) !important; border-color: var(--ha-ink) !important; color: #fff !important;
}
body:not(.layout_frontend) .btn-primary:hover { background: #2c2c30 !important; border-color: #2c2c30 !important; }
body:not(.layout_frontend) .btn-secondary, body:not(.layout_frontend) .btn-outline-secondary {
  background: var(--ha-surface) !important;
  border: 1px solid rgba(16,16,19,.16) !important;
  color: var(--ha-ink) !important;
}
body:not(.layout_frontend) .btn-secondary:hover, body:not(.layout_frontend) .btn-outline-secondary:hover { background: #fafaf9 !important; border-color: rgba(16,16,19,.30) !important; }
body:not(.layout_frontend) .btn-danger, body:not(.layout_frontend) .btn-outline-danger { border-radius: 9999px !important; }

/* ====================================================================
   INPUTS / FORMULÁRIOS (app)
   ==================================================================== */
main input[type="text"], main input[type="password"], main input[type="email"],
main input[type="number"], main input[type="url"], main textarea,
main .form-control, main .form-select, main select,
.modal input[type="text"], .modal input[type="password"], .modal input[type="email"],
.modal input[type="number"], .modal input[type="url"], .modal textarea,
.modal .form-control, .modal select {
  background: #fff !important;
  border: 1px solid rgba(16,16,19,.14) !important;
  border-radius: var(--ha-radius-md) !important;
  color: var(--ha-ink) !important;
  transition: border-color .15s, box-shadow .15s;
}
main input:focus, main textarea:focus, main select:focus,
main .form-control:focus, main .form-select:focus,
.modal input:focus, .modal textarea:focus, .modal select:focus, .modal .form-control:focus {
  border-color: rgba(16,16,19,.45) !important;
  box-shadow: 0 0 0 4px rgba(16,16,19,.08) !important;
  outline: none !important;
}
main .form-control:disabled, main .form-control[readonly]:not(.font-monospace),
.modal .form-control:disabled {
  background: rgba(16,16,19,.04) !important;
  color: rgba(16,16,19,.55) !important;
}
main label, main legend, main small, main .form-check-label, main .form-text, main p,
.modal label, .modal legend, .modal .form-check-label {
  color: var(--ha-ink) !important;
}
main .form-text, main small, main .text-muted, .modal small, .modal .form-text { color: var(--ha-ink-soft) !important; }

/* grupos input+botões (copiar / olho / gerar) — bloco coeso arredondado */
main .input-group, .modal .input-group { border-radius: var(--ha-radius-md); }
main .input-group .form-control, .modal .input-group .form-control {
  border-radius: var(--ha-radius-md) 0 0 var(--ha-radius-md) !important;
}
main .input-group .form-control:not(:first-child), .modal .input-group .form-control:not(:first-child) { border-radius: 0 !important; }
main .input-group .btn, main .input-group button,
.modal .input-group .btn, .modal .input-group button {
  border-radius: 0 !important;
  background: #fff !important;
  border: 1px solid rgba(16,16,19,.14) !important;
  border-left: 0 !important;
  color: rgba(16,16,19,.66) !important;
}
main .input-group > :last-child, .modal .input-group > :last-child,
main .input-group .btn:last-child, .modal .input-group .btn:last-child {
  border-radius: 0 var(--ha-radius-md) var(--ha-radius-md) 0 !important;
}
main .input-group .btn:hover, .modal .input-group .btn:hover { background: #f4f4f2 !important; color: var(--ha-ink) !important; }

/* checkbox / radio — accent ink */
input[type="checkbox"], input[type="radio"] { accent-color: #101013 !important; }
body:not(.layout_frontend) .form-check-input:checked { background-color: #101013 !important; border-color: #101013 !important; }

/* display de senha gerada e blocos .bg-light */
body:not(.layout_frontend) .card.bg-light, body:not(.layout_frontend) main div.bg-light {
  background: #fff !important;
  border: 1px solid var(--ha-line) !important;
  border-radius: var(--ha-radius-lg) !important;
  color: var(--ha-ink) !important;
  font-size: 1.15rem;
  letter-spacing: .04em;
}
main .font-monospace, main code, .modal .font-monospace { color: var(--ha-ink) !important; }
/* caracteres coloridos da senha — legíveis no fundo claro */
main .password-number, .modal .password-number, .tw-text-code { color: #1252a3 !important; }
main .password-special, .modal .password-special { color: #b02a6e !important; }

/* páginas de conteúdo (Gerador, Import/Export…): cartão com respiro */
main bit-container {
  display: block;
  background: var(--ha-surface);
  border: 1px solid var(--ha-line);
  border-radius: var(--ha-radius-lg);
  box-shadow: var(--ha-shadow-card);
  padding: 26px 28px;
  max-width: 960px;
}
main .form-check-input { width: 1.05em; height: 1.05em; }

/* ====================================================================
   TABELA DO COFRE
   ==================================================================== */
main table { border-collapse: separate !important; border-spacing: 0 !important; }
main th { color: rgba(16,16,19,.55) !important; font-weight: 500 !important; font-size: .82rem; border-bottom: 1px solid var(--ha-line) !important; }
main td { border-bottom: 1px solid var(--ha-line-soft) !important; }
main tr:hover td { background: rgba(255,255,255,.85) !important; }
main td a { color: var(--ha-ink) !important; font-weight: 500; }
main td a:hover { text-decoration: underline !important; }

main div[class*="tw-items-center"] > p { color: var(--ha-ink-soft) !important; }
main bit-icon svg { filter: none; opacity: .9; }

/* ====================================================================
   DROPDOWNS / MENUS — vidro com backdrop-blur
   ==================================================================== */
.cdk-overlay-pane [role="menu"],
.cdk-overlay-pane bit-menu-panel > *,
.cdk-overlay-pane .tw-flex-col[class*="tw-bg-background"] {
  background: rgba(255,255,255,.78) !important;
  backdrop-filter: blur(22px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.5) !important;
  border: 1px solid rgba(16,16,19,.08) !important;
  border-radius: 16px !important;
  box-shadow: var(--ha-shadow-pop) !important;
  padding: 6px !important;
  overflow: hidden;
}
.cdk-overlay-pane [role="menuitem"], .cdk-overlay-pane a[role="menuitem"] {
  border-radius: 10px !important;
  color: var(--ha-ink) !important;
  padding-top: .5rem !important; padding-bottom: .5rem !important;
}
.cdk-overlay-pane [role="menuitem"]:hover {
  background: rgba(16,16,19,.06) !important;
  color: #000 !important;
}

/* ====================================================================
   MODAIS — CL (cdk) e Bootstrap legado
   ==================================================================== */
.cdk-overlay-backdrop, .modal-backdrop {
  background: rgba(12,12,14,.42) !important;
  backdrop-filter: blur(7px) !important;
  -webkit-backdrop-filter: blur(7px) !important;
  opacity: 1 !important;
}
.cdk-overlay-pane [role="dialog"] > *,
.cdk-overlay-pane bit-dialog > *,
.cdk-overlay-pane app-vault-item-dialog > * {
  border-radius: var(--ha-radius-xl) !important;
}
[role="dialog"] .tw-bg-background, bit-dialog .tw-bg-background { background: #fff !important; }

/* modal Bootstrap legado (Novo item, Folders…) — respiro e cantos */
.modal-dialog { margin: 44px auto !important; }
.modal-content {
  border: none !important;
  border-radius: var(--ha-radius-xl) !important;
  box-shadow: var(--ha-shadow-pop) !important;
  overflow: hidden;
}
.modal-header {
  background: #fff !important;
  border-bottom: 1px solid var(--ha-line-soft) !important;
  padding: 20px 26px !important;
}
.modal-header .modal-title {
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;
  color: var(--ha-ink) !important;
}
.modal-body { background: #fff !important; padding: 24px 26px !important; }
.modal-footer {
  background: #fff !important;
  border-top: 1px solid var(--ha-line-soft) !important;
  padding: 16px 26px !important;
}
.modal .close { color: var(--ha-ink) !important; opacity: .55; }
.modal .close:hover { opacity: 1; }

/* ====================================================================
   BADGES / CHIPS / AVATAR / LINKS
   ==================================================================== */
.badge, bit-badge span, span[class*="tw-rounded-full"][class*="tw-bg-"] { border-radius: 9999px !important; }
body:not(.layout_frontend) .badge { background: rgba(16,16,19,.07) !important; color: var(--ha-ink) !important; font-weight: 500 !important; }
img.tw-rounded-full, app-avatar img, dynamic-avatar img { filter: grayscale(1) contrast(1.05) !important; }
main a:not(.btn):not([class*="tw-bg-"]) { color: var(--ha-ink) !important; text-decoration-color: rgba(16,16,19,.3); }
main a:not(.btn):not([class*="tw-bg-"]):hover { color: #000 !important; }

/* ====================================================================
   RESPONSIVO
   ==================================================================== */
@media (max-width: 900px) {
  bit-layout aside { margin: 8px 0 8px 8px !important; height: calc(100vh - 16px) !important; border-radius: 18px !important; }
  bit-layout main { padding: 18px 16px !important; }
  .modal-dialog { margin: 18px auto !important; }
}
@media (max-width: 640px) {
  bit-layout aside { margin: 0 !important; height: 100vh !important; border-radius: 0 !important; }
}

/* ====================================================================
   TELAS PÚBLICAS (login / registro / LOCK / 2FA / splash) — DARK
   Tudo aqui dentro é escuro: nada de superfície branca herdada.
   ==================================================================== */
body.layout_frontend { background: #0E0E10 !important; }
body.layout_frontend h1, body.layout_frontend h2, body.layout_frontend h3 { color: #fff !important; }
body.layout_frontend p, app-frontend-layout p { color: rgba(255,255,255,.72) !important; }
app-frontend-layout label, app-frontend-layout span { color: rgba(255,255,255,.85) !important; }
app-frontend-layout button span, button span { color: inherit !important; }
body.layout_frontend small, body.layout_frontend .text-muted { color: rgba(255,255,255,.55) !important; }
body.layout_frontend hr { border-color: rgba(255,255,255,.12) !important; opacity: 1; }

/* cartões das telas públicas — vidro escuro (inclui .card legada do LOCK) */
app-frontend-layout form > div[class*="tw-rounded"],
app-frontend-layout div[class*="tw-rounded-lg"],
app-frontend-layout div[class*="tw-border-secondary"],
body.layout_frontend .card {
  background: rgba(255,255,255,.045) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 64px -24px rgba(0,0,0,.7) !important;
  backdrop-filter: blur(14px);
  color: rgba(255,255,255,.92) !important;
}
body.layout_frontend .card-body { background: transparent !important; }
body.layout_frontend .card label, body.layout_frontend .card p,
body.layout_frontend .card small, body.layout_frontend .card span:not(.btn span) {
  color: rgba(255,255,255,.85) !important;
}

/* inputs das telas públicas — sempre legíveis */
body.layout_frontend input[type="email"],
body.layout_frontend input[type="password"],
body.layout_frontend input[type="text"],
body.layout_frontend .form-control {
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  color: #fff !important;
  border-radius: 12px !important;
}
body.layout_frontend input:focus, body.layout_frontend .form-control:focus {
  border-color: rgba(255,255,255,.6) !important;
  box-shadow: 0 0 0 4px rgba(255,255,255,.12) !important;
  outline: none !important;
}
body.layout_frontend input::placeholder { color: rgba(255,255,255,.4) !important; }

/* grupos input+botão (olho do Master password) — coesos no escuro */
body.layout_frontend .input-group .form-control { border-radius: 12px 0 0 12px !important; }
body.layout_frontend .input-group .btn, body.layout_frontend .input-group button {
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-left: 0 !important;
  border-radius: 0 12px 12px 0 !important;
  color: rgba(255,255,255,.8) !important;
}
body.layout_frontend .input-group .btn:hover { background: rgba(255,255,255,.14) !important; color: #fff !important; }

/* botões das telas públicas — primário = pílula BRANCA */
body.layout_frontend button[buttontype="primary"],
body.layout_frontend button[type="submit"],
body.layout_frontend button[class*="tw-bg-primary"],
body.layout_frontend .btn-primary {
  background: #fff !important;
  border-color: #fff !important;
  color: #101013 !important;
  border-radius: 9999px !important;
  font-weight: 500 !important;
}
body.layout_frontend button[buttontype="primary"]:hover,
body.layout_frontend .btn-primary:hover { background: #e4e4e6 !important; border-color: #e4e4e6 !important; }
body.layout_frontend .btn:not(.btn-primary),
body.layout_frontend button[buttontype="secondary"],
body.layout_frontend .btn-outline-secondary {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  color: rgba(255,255,255,.92) !important;
  border-radius: 9999px !important;
}
body.layout_frontend .btn:not(.btn-primary):hover { background: rgba(255,255,255,.12) !important; color: #fff !important; }
body.layout_frontend input[type="checkbox"] { accent-color: #fff !important; }

/* links das telas públicas — contraste alto */
body.layout_frontend a:not(.btn) { color: #fff !important; text-decoration-color: rgba(255,255,255,.4); }
body.layout_frontend a:not(.btn):hover { text-decoration: underline; }

/* ícone de cadeado / avisos do LOCK */
body.layout_frontend .bwi-lock, body.layout_frontend i.bwi { color: rgba(255,255,255,.8) !important; }

/* logo / splash */
.logo, .logo-themed, img[class*="logo"] { max-width: 250px !important; height: auto !important; }

/* esconde rodapé Vaultwarden/Bitwarden */
app-frontend-layout > div.container.my-5,
app-frontend-layout div.container.text-muted.text-center { display: none !important; }