/* ============================================================
   MED ANGEL — APP THEME · "Doctor House Light"
   Carregado apenas em app.html — sobrescreve Obsidian Clinic
   Paleta: Branco + Índigo (#6366F1) — Design clínico moderno
   ============================================================ */

/* ─── 1. Override de Tokens CSS ─────────────────────────────── */
:root {
  /* Índigo — substitui ouro */
  --gold:         #6366F1;
  --gold-light:   #818CF8;
  --gold-pale:    #E0E7FF;
  --gold-dim:     rgba(99, 102, 241, 0.10);
  --gold-border:  rgba(99, 102, 241, 0.18);
  --gold-glow:    0 0 32px rgba(99, 102, 241, 0.14);
  --gold-gradient: linear-gradient(135deg, #4F46E5 0%, #6366F1 50%, #818CF8 100%);

  /* Brand → Índigo */
  --brand-primary:          #4F46E5;
  --brand-secondary:        #6366F1;
  --brand-accent:           #818CF8;
  --brand-gradient:         linear-gradient(135deg, #4F46E5 0%, #6366F1 50%, #818CF8 100%);
  --brand-gradient-soft:    linear-gradient(135deg, rgba(79, 70, 229, 0.7) 0%, rgba(99, 102, 241, 0.5) 100%);

  /* Backgrounds → Tema Claro */
  --bg-base:       #EEF2FF;
  --bg-surface:    #FFFFFF;
  --bg-card:       #FFFFFF;
  --bg-card-hover: #F8F9FF;
  --bg-input:      #F4F4FF;
  --bg-overlay:    rgba(15, 15, 40, 0.65);

  /* Glassmorphism */
  --glass-bg:     rgba(255, 255, 255, 0.92);
  --glass-border: rgba(99, 102, 241, 0.18);

  /* Texto → Modo Claro */
  --text-primary:   #1E293B;
  --text-secondary: #64748B;
  --text-muted:     #94A3B8;
  --text-accent:    #6366F1;
  --text-white:     #FFFFFF;

  /* Status (mantidos) */
  --info:    #6366F1;
  --info-bg: rgba(99, 102, 241, 0.10);

  /* Fonte de exibição → sans-serif do app, NÃO a serifada em itálico
     do "Obsidian Clinic" original (achado em auditoria QA/UX 06/09/2026:
     "não tem aspecto de software profissional, parece amador" — títulos
     de página, saudação do dashboard e nome do paciente no prontuário
     usavam Cormorant Garamond itálico, uma identidade de clínica boutique
     que não combina com prontuário eletrônico). A landing page não usa
     esta variável (define a própria font-family), então fica intacta. */
  --font-display: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;

  /* Bordas → sutis, indigo-tinted */
  --border:        rgba(99, 102, 241, 0.12);
  --border-hover:  rgba(99, 102, 241, 0.30);
  --border-accent: rgba(99, 102, 241, 0.55);

  /* Sombras → suaves, adequadas ao tema claro */
  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 6px rgba(99, 102, 241, 0.05);
  --shadow-md:   0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(99, 102, 241, 0.06);
  --shadow-lg:   0 8px 32px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(99, 102, 241, 0.08);
  --shadow-glow: 0 0 32px rgba(99, 102, 241, 0.14);
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(99, 102, 241, 0.06);
}

/* ─── 2. Body → fundo claro, sem noise ──────────────────────── */
body {
  background-color: var(--bg-base);
  background-image: none;
  color: var(--text-primary);
}

/* ─── 3. Sidebar ─────────────────────────────────────────────── */

/* Remove a linha dourada lateral */
.sidebar::before { display: none; }

/* Sidebar base → branco */
.sidebar {
  background: #FFFFFF;
  border-right: 1px solid rgba(99, 102, 241, 0.12);
  box-shadow: 2px 0 16px rgba(99, 102, 241, 0.06);
}

/* Header da sidebar → fundo índigo (como Doctor House) */
.sidebar-header {
  background: linear-gradient(135deg, #4F46E5 0%, #6366F1 100%);
  border-bottom: none;
}

/* Logo dentro do header indigo */
.sidebar-logo {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.15);
}

/* Brand name → texto branco no header indigo */
.sidebar-brand-name {
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: #FFFFFF;
  color: #FFFFFF;
  font-family: 'IBM Plex Sans', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

/* Sub-label → branco com opacidade */
.sidebar-brand-sub {
  color: rgba(255, 255, 255, 0.65);
}

/* Botão de colapso */
.sidebar-toggle {
  background: #FFFFFF;
  border-color: rgba(99, 102, 241, 0.2);
  color: #6366F1;
}
.sidebar-toggle:hover {
  background: rgba(99, 102, 241, 0.08);
  color: #4F46E5;
  border-color: #6366F1;
}
/* Quando sidebar colapsada, o toggle fica sobre o header indigo */
.sidebar.collapsed .sidebar-toggle {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  color: #FFFFFF;
}

/* Scrollbar da nav */
.sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.18);
}

/* Seção da nav — título */
.nav-section-title {
  color: rgba(99, 102, 241, 0.45);
}

/* Nav items → cor escura no fundo branco */
.nav-item {
  color: #64748B;
}
.nav-item:hover {
  background: rgba(99, 102, 241, 0.08);
  color: #4F46E5;
}
/* Item ativo → preenchimento índigo sólido com texto branco */
.nav-item.active {
  background: #6366F1;
  color: #FFFFFF;
  border: none;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}
.nav-item.active::before {
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.7), transparent);
}
.nav-item.active .nav-icon { opacity: 1; }

/* Footer da sidebar */
.sidebar-footer {
  border-top: 1px solid rgba(99, 102, 241, 0.1);
}
.sidebar-user:hover {
  background: rgba(99, 102, 241, 0.06);
}
.sidebar-user-role { color: #94A3B8; }

/* ─── 4. Topbar ─────────────────────────────────────────────── */
.topbar {
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid rgba(99, 102, 241, 0.10);
  box-shadow: 0 1px 8px rgba(99, 102, 241, 0.06);
}

.notif-btn {
  background: rgba(99, 102, 241, 0.05);
  border-color: rgba(99, 102, 241, 0.12);
  color: #94A3B8;
}
.notif-btn:hover {
  background: rgba(99, 102, 241, 0.08);
  border-color: rgba(99, 102, 241, 0.3);
  color: #6366F1;
}
.notif-count {
  border-color: #FFFFFF;
}
.notif-item.unread {
  background: rgba(99, 102, 241, 0.05);
}

/* ─── 5. Cards ───────────────────────────────────────────────── */
/* Remove o acento dourado vertical do card */
.card::before { display: none; }

/* Cards → brancos, sombra suave */
.card {
  background: #FFFFFF;
  border: 1px solid rgba(99, 102, 241, 0.10);
  box-shadow: var(--shadow-card);
}
.card:hover {
  border-color: rgba(99, 102, 241, 0.22);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* Stat cards */
.stat-card {
  background: #FFFFFF;
  border-color: rgba(99, 102, 241, 0.10);
}
/* Remove linha dourada do topo e adiciona indigo */
.stat-card::after {
  background: linear-gradient(90deg, transparent, #6366F1, transparent);
  opacity: 0.4;
}
.stat-card:hover {
  border-color: rgba(99, 102, 241, 0.25);
  box-shadow: var(--shadow-md);
}
.stat-icon {
  background: rgba(99, 102, 241, 0.10);
  border-color: rgba(99, 102, 241, 0.18);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.12);
}
.stat-value {
  font-family: 'IBM Plex Sans', sans-serif;
  color: #1E293B;
  font-weight: 700;
}
.stat-label { color: #94A3B8; }

/* ─── 6. Botões ──────────────────────────────────────────────── */

/* Garante cursor pointer em todos os botões, independente do elemento HTML */
.btn {
  cursor: pointer;
}
.btn:not(:disabled):hover {
  transform: translateY(-1px);
}
.btn:not(:disabled):active {
  transform: scale(0.97);
}

.btn-primary {
  background: linear-gradient(135deg, #4F46E5 0%, #6366F1 50%, #818CF8 100%);
  color: #FFFFFF;
  border-color: rgba(129, 140, 248, 0.4);
  box-shadow: 0 2px 12px rgba(99, 102, 241, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.btn-primary:not(:disabled):hover {
  background: linear-gradient(135deg, #4338CA 0%, #4F46E5 50%, #6366F1 100%);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.45);
}
.btn-primary:not(:disabled):active {
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.btn-secondary {
  background: rgba(99, 102, 241, 0.06);
  color: #6366F1;
  border-color: rgba(99, 102, 241, 0.22);
}
.btn-secondary:not(:disabled):hover {
  background: rgba(99, 102, 241, 0.14);
  border-color: #6366F1;
  color: #4F46E5;
  box-shadow: 0 2px 10px rgba(99, 102, 241, 0.18);
}

/* Botões danger/warning/success também ficam interativos */
.btn-danger:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.28);
}
.btn-ghost:not(:disabled):hover {
  transform: translateY(-1px);
  background: rgba(99, 102, 241, 0.08);
  color: #4F46E5;
}

/* ─── 7. Tipografia ──────────────────────────────────────────── */
/* Títulos display → índigo gradient */
.display-title {
  background: linear-gradient(135deg, #4F46E5 0%, #6366F1 50%, #818CF8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: normal;
}

/* Mono data (IDs) → índigo claro */
.mono, .patient-id, [data-type="id"], [data-type="code"] {
  color: #818CF8;
}

/* ─── 8. Inputs / Formulários ────────────────────────────────── */
input, textarea, select {
  background: #FFFFFF;
  color: #1E293B;
  border-color: rgba(99, 102, 241, 0.15);
}
input:focus, textarea:focus, select:focus {
  border-color: #6366F1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

/* ─── 9. Modais ──────────────────────────────────────────────── */
.modal-overlay {
  background: rgba(15, 15, 40, 0.55);
}
.modal-container {
  background: #FFFFFF;
  border-color: rgba(99, 102, 241, 0.12);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.15);
}
.modal-header {
  border-bottom-color: rgba(99, 102, 241, 0.10);
}
.modal-footer {
  border-top-color: rgba(99, 102, 241, 0.10);
}

/* ─── 10. Tabelas ────────────────────────────────────────────── */
th {
  background: #F8F9FF;
  color: #64748B;
  border-bottom-color: rgba(99, 102, 241, 0.12);
}
td { border-bottom-color: rgba(99, 102, 241, 0.08); }
tr:hover td { background: rgba(99, 102, 241, 0.03); }

/* ─── 11. Badges / Tags ──────────────────────────────────────── */
.badge-primary, .tag-primary {
  background: rgba(99, 102, 241, 0.10);
  color: #4F46E5;
  border-color: rgba(99, 102, 241, 0.2);
}

/* ─── 12. Loading screen ─────────────────────────────────────── */
.loading-screen {
  background: #EEF2FF;
}

/* ─── 13. Toasts ─────────────────────────────────────────────── */
.toast {
  background: #FFFFFF;
  color: #1E293B;
  border-color: rgba(99, 102, 241, 0.12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.toast-success { border-left-color: #10B981; }
.toast-error   { border-left-color: #EF4444; }
.toast-info    { border-left-color: #6366F1; }
.toast-warning { border-left-color: #F59E0B; }

/* ─── 14. Scrollbar global ───────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.2);
  border-radius: 3px;
}

/* ─── 15. Dropdown / Select ──────────────────────────────────── */
.dropdown, .select-dropdown {
  background: #FFFFFF;
  border-color: rgba(99, 102, 241, 0.15);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
}
.dropdown-item:hover {
  background: rgba(99, 102, 241, 0.06);
  color: #4F46E5;
}

/* ─── 16. Página de erro / vazia ─────────────────────────────── */
.empty-state-icon { color: #C7D2FE; }
.empty-state-title { color: #1E293B; }
.empty-state-text  { color: #94A3B8; }

/* ─── 17. Elementos interativos — cursor e feedback de clique ─── */

/* Classe utilitária cursor-pointer usada amplamente nos módulos */
.cursor-pointer {
  cursor: pointer;
}
.cursor-pointer:hover {
  transform: translateY(-1px);
}
.cursor-pointer:active {
  transform: scale(0.98);
}

/* Cards clicáveis (card + cursor-pointer) */
.card.cursor-pointer:hover {
  border-color: rgba(99, 102, 241, 0.30);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.card.cursor-pointer:active {
  transform: scale(0.99);
}

/* Botão fechar modal */
.modal-close {
  cursor: pointer;
}
.modal-close:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #EF4444;
}

/* Filter chips — estado ativo adaptado ao tema claro */
.filter-chip.active {
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.15) 0%, rgba(99, 102, 241, 0.10) 100%);
  border-color: rgba(99, 102, 241, 0.50);
  color: #4F46E5;
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.18), inset 0 1px 0 rgba(255,255,255,0.5);
  font-weight: 700;
}
.filter-chip:hover {
  border-color: rgba(99, 102, 241, 0.35);
  color: #4F46E5;
  background: rgba(99, 102, 241, 0.06);
}

/* Nav items — cursor garantido */
.nav-item {
  cursor: pointer;
}

/* Linhas de tabela clicáveis */
tr[onclick],
[role="button"] {
  cursor: pointer;
}
tr[onclick]:hover td {
  background: rgba(99, 102, 241, 0.04);
}

/* ─── 18. Ajustes visuais complementares ─────────────────────── */

/* Link padrão → índigo */
a { color: #6366F1; }
a:hover { color: #4F46E5; }

/* Highlight / seleção */
::selection {
  background: rgba(99, 102, 241, 0.2);
  color: #1E293B;
}

/* Focus visible acessível */
:focus-visible {
  outline: 2px solid #6366F1;
  outline-offset: 2px;
}

/* Separadores */
hr {
  border-color: rgba(99, 102, 241, 0.10);
}

/* Card header com borda */
.card-header {
  border-bottom-color: rgba(99, 102, 241, 0.10);
}

/* Avisos da aba Mensagens (main.css:1563/1579) foram escritos pro tema escuro
   (texto quase branco) e dependiam de [data-theme="light"], que nunca chega a
   ser setado em lugar nenhum do app — o tema claro/índigo real é este arquivo,
   sobrescrevendo :root direto. Sem isso o texto ficava quase ilegível: fundo
   claro (herdado do app) + cor de texto pensada pra fundo escuro. */
.msg-urgent-warning {
  background: #FEF2F2 !important;
  border-color: #FCA5A5 !important;
  color: #991B1B !important;
}
.msg-urgent-warning strong { color: #7F1D1D !important; }

.msg-hours-warning {
  background: #FFFBEB !important;
  border-color: #FCD34D !important;
  color: #92400E !important;
}
.msg-hours-warning strong { color: #78350F !important; }

.msg-blocked-notice {
  background: #FFFBEB !important;
  border-color: #FCD34D !important;
  color: #92400E !important;
}

/* Mesmo problema dos avisos acima, mas em badges de status e tags de tipo de
   atendimento — texto claro pensado pro tema escuro, ilegível sobre o fundo
   claro real do app. Valores portados do bloco [data-theme="light"] morto. */
.badge-master    { background: #F3E8FF !important; color: #7E22CE !important; border-color: #D8B4FE !important; }
.badge-admin     { background: #EFF6FF !important; color: #1D4ED8 !important; border-color: #93C5FD !important; }
.badge-concierge { background: #FFFBEB !important; color: #B45309 !important; border-color: #FCD34D !important; }
.badge-patient   { background: #ECFDF5 !important; color: #047857 !important; border-color: #6EE7B7 !important; }
.badge-active    { background: #ECFDF5 !important; color: #047857 !important; border-color: #6EE7B7 !important; }
.badge-suspended { background: #FEF2F2 !important; color: #B91C1C !important; border-color: #FCA5A5 !important; }
.badge-pending   { background: #FFFBEB !important; color: #B45309 !important; border-color: #FCD34D !important; }
.badge-success   { background: #ECFDF5 !important; color: #047857 !important; border-color: #6EE7B7 !important; }
.badge-danger    { background: #FEF2F2 !important; color: #B91C1C !important; border-color: #FCA5A5 !important; }
.badge-warning   { background: #FFFBEB !important; color: #B45309 !important; border-color: #FCD34D !important; }
.badge-info      { background: #EFF6FF !important; color: #1D4ED8 !important; border-color: #93C5FD !important; }

.tag-consulta      { background: #E0F2FE !important; color: #0369A1 !important; }
.tag-cirurgia      { background: #FEE2E2 !important; color: #B91C1C !important; }
.tag-exame         { background: #FEF3C7 !important; color: #B45309 !important; }
.tag-avaliacao     { background: #D1FAE5 !important; color: #047857 !important; }
.tag-interconsulta { background: #F3E8FF !important; color: #7E22CE !important; }

/* ─── 19. Títulos e nome do paciente — sans-serif, sem itálico/gradiente ───
   Neutraliza a "PREMIUM LAYER — Obsidian Clinic v2" de main.css (título de
   página em itálico serifado com texto em gradiente) e o nome do paciente
   em itálico serifado de components.css — pensados pro tema escuro
   original, nunca adaptados pro tema claro/índigo real do app. */
.page-title {
  font-family: var(--font-base);
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.02em;
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: currentColor;
  color: #1E293B;
}

.prontuario-name {
  font-family: var(--font-base);
  font-style: normal;
  font-weight: 700;
}

.topbar-title {
  font-family: var(--font-base);
  font-style: normal;
}

.welcome-title {
  font-family: var(--font-base);
}

/* ─── 20. Banner de boas-vindas — gradiente índigo, sem ícone-fantasma ───
   Herdava um gradiente azul-marinho/ciano do "Obsidian Clinic"
   (dashboard.css) e um emoji de hospital gigante decorativo no fundo —
   nenhum dos dois pertence a esta paleta. */
.welcome-banner {
  background: var(--brand-gradient);
  box-shadow: 0 8px 32px rgba(79, 70, 229, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.welcome-banner::after {
  content: none;
}

/* ─── 21. Próximo Atendimento — substitui o relógio decorativo ───
   O relógio digital gigante (achado em auditoria QA/UX 06/09/2026) não
   tinha nenhum valor clínico; este widget mostra o próximo compromisso
   de hoje, com a mesma área que o relógio ocupava. */
.next-apt-widget {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-md);
  padding: 10px 18px;
  min-width: 220px;
  cursor: pointer;
  transition: background var(--transition);
}
.next-apt-widget:hover { background: rgba(255, 255, 255, 0.22); }
.next-apt-widget.empty { cursor: default; justify-content: center; }
.next-apt-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.7);
}
.next-apt-body { display: flex; align-items: center; gap: 12px; }
.next-apt-time {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1;
}
.next-apt-info { min-width: 0; }
.next-apt-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: #FFFFFF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}
.next-apt-type { font-size: 0.75rem; color: rgba(255, 255, 255, 0.75); }
.next-apt-empty-text { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.75); }

@media (max-width: 640px) {
  .next-apt-widget { width: 100%; }
  .next-apt-name { max-width: none; }
}

/* ─── 22. Linhas douradas literais dos cards → índigo, sem shimmer ───
   main.css tinha rgba(212,176,96,*) / rgba(184,150,46,*) fixos (dourado
   sobrevivente do tema escuro original) com animação de brilho contínua —
   nem a cor nem o movimento perpétuo combinam com "clínico, rápido, sem
   efeitos" (main.css:93). */
.stat-card::after {
  background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.35), transparent);
  animation: none;
}
.kpi-card::after {
  background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.3), transparent);
}

/* ─── 23. Ícones dentro de stat-icon/badges herdam a cor índigo ─── */
.stat-icon { color: #6366F1; }
.stat-icon svg.icon { width: 22px; height: 22px; }
.surgical-status .icon { width: 12px; height: 12px; }

/* ═══════════════════════════════════════════════════════════════
   TELA DE AUTENTICAÇÃO — exceção deliberada ao Doctor House Light

   Este arquivo troca ouro por índigo no app inteiro. A tela de login,
   porém, é a ÚLTIMA do percurso de marca e não a primeira do app:
   quem vem da landing (Obsidian Clinic) precisa reconhecer o mesmo
   produto. Os tokens dourados estão escopados no topo de auth.css;
   aqui neutralizamos só os literais índigo cravados FORA de token,
   que este arquivo aplica depois de auth.css e venceriam a cascata.
   ═══════════════════════════════════════════════════════════════ */

.auth-screen .profile-card,
.auth-screen .back-to-profiles-btn,
.auth-screen .profile-selector-footer,
.auth-screen .auth-divider,
.auth-screen .auth-form-container > div {
  border-color: rgba(201, 160, 48, 0.16);
}

.auth-screen .profile-card:hover {
  border-color: rgba(201, 160, 48, 0.42);
  box-shadow: 0 12px 28px rgba(8, 9, 14, 0.10);
}

/* Texto escuro sobre o dourado: branco sobre #C9A030 dá ~2,2:1 e
   reprova em contraste; #1A1408 fica perto de 8:1. */
.auth-screen .btn-primary,
.auth-screen .auth-submit-btn {
  background-image: linear-gradient(135deg, #8B6914 0%, #C9A030 52%, #E8CC78 100%);
  border-color: rgba(201, 160, 48, 0.40);
  box-shadow: 0 2px 12px rgba(201, 160, 48, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  color: #1A1408;
}
.auth-screen .btn-primary:hover,
.auth-screen .auth-submit-btn:hover {
  box-shadow: 0 6px 20px rgba(201, 160, 48, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}