:root {
  --q10p-navy: #001060;
  --q10p-blue: #2563eb;
  --q10p-blue-strong: #1d4ed8;
  --q10p-cyan: #12baf2;
  --q10p-orange: #ff7a00;
  --q10p-surface: #ffffff;
  --q10p-text: #0f172a;
  --q10p-text-soft: #475569;
  --q10p-line: rgba(37,99,235,.14);
  --q10p-shadow: 0 16px 36px rgba(0,16,96,.12);
  --q10p-shadow-strong: 0 18px 42px rgba(0,16,96,.18);
}

/* botão sair mais forte no desktop */
@media (min-width: 921px) {
  .topbar-actions #logoutBtn,
  #logoutBtn.ghost {
    background: linear-gradient(180deg, var(--q10p-blue) 0%, var(--q10p-blue-strong) 100%) !important;
    color: #fff !important;
    border: 1px solid rgba(29,78,216,.34) !important;
    box-shadow: 0 12px 28px rgba(37,99,235,.18) !important;
    font-weight: 800 !important;
  }

  .topbar-actions #logoutBtn:hover,
  #logoutBtn.ghost:hover {
    filter: brightness(1.04) !important;
    transform: translateY(-1px) !important;
  }
}

/* botão instalar app: texto sempre visível */
#q10PwaInstallFab,
#q10InstallFab,
.q10-pwa-install-fab,
.q10-install-fab {
  min-width: 162px !important;
  min-height: 56px !important;
  padding: 12px 16px !important;
  border-radius: 999px !important;
}

#q10PwaInstallFab .q10-pwa-install-fab__text,
#q10InstallFab .q10-install-fab__text,
.q10-pwa-install-fab__text,
.q10-install-fab__text {
  display: grid !important;
  gap: 1px !important;
  text-align: left !important;
}

#q10PwaInstallFab .q10-pwa-install-fab__text span,
#q10InstallFab .q10-install-fab__text span,
.q10-pwa-install-fab__text span,
.q10-install-fab__text span {
  display: block !important;
  font-size: 14px !important;
  line-height: 1.05 !important;
  font-weight: 800 !important;
  color: #fff !important;
}

#q10PwaInstallFab .q10-pwa-install-fab__text small,
#q10InstallFab .q10-install-fab__text small,
.q10-pwa-install-fab__text small,
.q10-install-fab__text small {
  display: block !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
  color: rgba(255,255,255,.82) !important;
}

@media (max-width: 720px) {
  #q10PwaInstallFab,
  #q10InstallFab,
  .q10-pwa-install-fab,
  .q10-install-fab {
    min-width: 150px !important;
    min-height: 54px !important;
    padding: 12px 14px !important;
  }

  #q10PwaInstallFab .q10-pwa-install-fab__text,
  #q10InstallFab .q10-install-fab__text,
  .q10-pwa-install-fab__text,
  .q10-install-fab__text {
    display: grid !important;
  }

  #q10PwaInstallFab .q10-pwa-install-fab__text span,
  #q10InstallFab .q10-install-fab__text span,
  .q10-pwa-install-fab__text span,
  .q10-install-fab__text span {
    font-size: 13px !important;
  }
}

/* login: remove link fixo de reenviar validação */
#loginView .auth-links a[href="/resend-verification"] {
  display: none !important;
}

#loginView .auth-links {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0 !important;
}

#loginView .auth-links::after {
  content: "" !important;
}

#loginView .login-action-wrap {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

#loginView .login-action-wrap:empty {
  display: none !important;
}

#loginView .login-inline-note {
  text-align: center;
  font-size: 13px;
  line-height: 1.45;
  color: var(--q10p-text-soft);
}

#loginView .login-resend-btn {
  min-height: 48px;
  border-radius: 16px;
  border: 1px solid rgba(37,99,235,.14);
  background: linear-gradient(180deg, var(--q10p-blue) 0%, var(--q10p-blue-strong) 100%);
  color: #fff;
  box-shadow: 0 12px 26px rgba(37,99,235,.18);
  font-weight: 800;
}

#loginView .login-resend-btn[disabled] {
  opacity: .75;
  cursor: wait;
}

/* spinner global responsivo */
.q10-global-loading {
  min-height: clamp(180px, 36vh, 320px);
  display: grid;
  place-items: center;
  gap: 16px;
  text-align: center;
}

.q10-global-loading__spinner {
  width: clamp(54px, 11vw, 84px);
  height: clamp(54px, 11vw, 84px);
  border-radius: 999px;
  background:
    conic-gradient(
      from 220deg,
      var(--q10p-navy) 0deg,
      var(--q10p-blue) 110deg,
      var(--q10p-cyan) 220deg,
      var(--q10p-orange) 300deg,
      var(--q10p-navy) 360deg
    );
  -webkit-mask: radial-gradient(circle at center, transparent 58%, #000 60%);
  mask: radial-gradient(circle at center, transparent 58%, #000 60%);
  animation: q10GlobalSpin 1s linear infinite;
  box-shadow: 0 10px 30px rgba(0,16,96,.14);
}

.q10-global-loading__label {
  font-size: 0 !important;
  line-height: 0 !important;
  opacity: 0 !important;
}

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

@keyframes q10GlobalSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}