:root {
  --q10f-navy: #001060;
  --q10f-blue: #2563eb;
  --q10f-blue-strong: #1d4ed8;
  --q10f-cyan: #12baf2;
  --q10f-orange: #ff7a00;
  --q10f-bg: #f4f8ff;
  --q10f-bg-soft: #eef5ff;
  --q10f-surface: rgba(255,255,255,.98);
  --q10f-surface-strong: #ffffff;
  --q10f-text: #0f172a;
  --q10f-text-soft: #475569;
  --q10f-line: rgba(37,99,235,.12);
  --q10f-line-strong: rgba(37,99,235,.18);
  --q10f-shadow: 0 18px 40px rgba(0,16,96,.10);
  --q10f-shadow-strong: 0 24px 54px rgba(0,16,96,.16);
}

/* reforço global de legibilidade */
body,
button,
input,
select,
textarea {
  color: var(--q10f-text);
}

.muted,
small,
#userInfo,
.q10-role-launcher-subtitle,
.q10-final-home-intro__copy span,
.auth-links {
  color: var(--q10f-text-soft) !important;
}

/* login unificado, estável e sem laranja no navegador */
#loginView.auth-shell {
  min-height: 100dvh !important;
  padding: 18px !important;
  background:
    radial-gradient(circle at top left, rgba(18,186,242,.10), transparent 28%),
    radial-gradient(circle at top right, rgba(37,99,235,.08), transparent 24%),
    linear-gradient(180deg, #f9fbff 0%, var(--q10f-bg) 45%, var(--q10f-bg-soft) 100%) !important;
}

#loginView .auth-card {
  position: relative !important;
  width: min(100%, 430px) !important;
  padding: 28px 22px 22px !important;
  border-radius: 30px !important;
  border: 1px solid rgba(255,255,255,.88) !important;
  background:
    radial-gradient(circle at top right, rgba(18,186,242,.08), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.99) 0%, rgba(248,251,255,.98) 100%) !important;
  box-shadow: var(--q10f-shadow-strong) !important;
  backdrop-filter: blur(12px) !important;
  overflow: hidden !important;
}

#loginView .auth-card::before {
  content: "" !important;
  display: block !important;
  width: 78px !important;
  height: 6px !important;
  margin: 0 auto 18px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, var(--q10f-blue) 0%, var(--q10f-blue-strong) 100%) !important;
}

#loginView .auth-brand-logo {
  width: 82px !important;
  height: 82px !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto 12px !important;
}

#loginView .auth-card h1 {
  margin: 0 0 8px !important;
  text-align: center !important;
  color: var(--q10f-text) !important;
  font-size: clamp(1.7rem, 7vw, 2.2rem) !important;
  letter-spacing: -.03em !important;
  line-height: 1.06 !important;
}

#loginView #loginForm {
  gap: 14px !important;
  margin-top: 6px !important;
}

#loginView #loginForm label {
  gap: 8px !important;
  color: var(--q10f-text-soft) !important;
  font-size: .95rem !important;
}

#loginView #loginForm input {
  min-height: 54px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(37,99,235,.14) !important;
  background: rgba(255,255,255,.99) !important;
  color: var(--q10f-text) !important;
  padding: 14px 16px !important;
}

#loginView #loginForm input:focus {
  border-color: rgba(37,99,235,.42) !important;
  box-shadow: 0 0 0 4px rgba(37,99,235,.10) !important;
}

#loginView #loginForm button[type="submit"] {
  min-height: 54px !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, var(--q10f-blue) 0%, var(--q10f-blue-strong) 100%) !important;
  color: #fff !important;
  box-shadow: 0 14px 28px rgba(37,99,235,.18) !important;
  font-weight: 800 !important;
}

#loginView .auth-links {
  margin: 14px 0 0 !important;
  display: grid !important;
  gap: 6px !important;
  text-align: center !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

#loginView .auth-links a {
  color: var(--q10f-blue-strong) !important;
  text-decoration: none !important;
}

#loginView .auth-links a:hover {
  text-decoration: underline !important;
}

#loginView #loginMsg {
  min-height: 22px !important;
  margin-top: 12px !important;
  text-align: center !important;
}

/* cabeçalho final com logo sempre visível */
.topbar {
  background: rgba(248,251,255,.88) !important;
  border: 1px solid rgba(217,226,239,.82) !important;
  box-shadow: var(--q10f-shadow) !important;
}

.q10-final-header-brand {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
}

.q10-final-header-logo {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 14px !important;
  object-fit: contain !important;
  background: #fff !important;
  box-shadow: 0 8px 20px rgba(0,16,96,.08) !important;
  padding: 4px !important;
}

.q10-final-header-copy {
  display: grid !important;
  min-width: 0 !important;
}

.q10-final-header-copy #salonTitle,
.q10-final-header-copy h2 {
  margin: 0 0 4px !important;
  color: var(--q10f-text) !important;
}

.q10-final-header-copy #userInfo {
  color: var(--q10f-text-soft) !important;
}

.topbar-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  margin-left: auto !important;
  justify-content: flex-end !important;
}

#logoutBtn {
  white-space: nowrap !important;
}

/* home mobile preenchida, sem repetir informação */
@media (max-width: 920px) {
  body.q10-launcher-mode #content {
    min-height: calc(100dvh - 170px) !important;
    display: grid !important;
    align-content: start !important;
  }

  body.q10-launcher-mode #content > .panel {
    min-height: calc(100dvh - 190px) !important;
    padding: 18px !important;
    border-radius: 28px !important;
    border: 1px solid rgba(255,255,255,.88) !important;
    background:
      radial-gradient(circle at top right, rgba(18,186,242,.08), transparent 30%),
      linear-gradient(180deg, rgba(255,255,255,.99) 0%, rgba(248,251,255,.98) 100%) !important;
    box-shadow: var(--q10f-shadow) !important;
  }

  body.q10-launcher-mode .q10-role-launcher-wrap {
    min-height: 100% !important;
    display: grid !important;
    gap: 16px !important;
    align-content: start !important;
  }

  body.q10-launcher-mode .q10-role-launcher-hero,
  body.q10-launcher-mode .q10r-hero,
  body.q10-launcher-mode .q10-mobile-topbar-extra,
  body.q10-mobile-app-mode .q10-mobile-topbar-extra,
  body.q10-mobile-app-mode .q10-role-launcher-hero,
  body.q10-mobile-app-mode .q10r-hero {
    display: none !important;
  }

  body.q10-launcher-mode .q10-final-home-intro {
    display: grid !important;
    gap: 12px !important;
    padding: 18px !important;
    border-radius: 22px !important;
    border: 1px solid rgba(37,99,235,.10) !important;
    background:
      radial-gradient(circle at top right, rgba(18,186,242,.10), transparent 32%),
      linear-gradient(180deg, #ffffff 0%, #f7fbff 100%) !important;
    box-shadow: 0 12px 28px rgba(0,16,96,.06) !important;
  }

  body.q10-launcher-mode .q10-final-home-intro__row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  body.q10-launcher-mode .q10-final-home-intro__copy {
    display: grid !important;
    gap: 4px !important;
    min-width: 0 !important;
  }

  body.q10-launcher-mode .q10-final-home-intro__copy strong {
    color: var(--q10f-text) !important;
    font-size: 1.08rem !important;
    letter-spacing: -.02em !important;
  }

  body.q10-launcher-mode .q10-final-home-intro__chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: flex-end !important;
  }

  body.q10-launcher-mode .q10-final-home-chip {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 30px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    background: #fff !important;
    border: 1px solid rgba(37,99,235,.12) !important;
    color: var(--q10f-navy) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }

  body.q10-launcher-mode .q10-role-launcher-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    margin-top: 0 !important;
  }

  body.q10-launcher-mode .q10-role-launcher-btn {
    position: relative !important;
    min-height: 142px !important;
    padding: 18px 16px !important;
    border-radius: 24px !important;
    border: 1px solid rgba(37,99,235,.10) !important;
    background:
      radial-gradient(circle at top right, rgba(18,186,242,.08), transparent 34%),
      linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
    box-shadow: 0 14px 30px rgba(0,16,96,.08) !important;
    align-content: start !important;
    gap: 10px !important;
    overflow: hidden !important;
  }

  body.q10-launcher-mode .q10-role-launcher-btn::after {
    content: "↗" !important;
    position: absolute !important;
    right: 14px !important;
    top: 14px !important;
    width: 28px !important;
    height: 28px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    background: rgba(37,99,235,.08) !important;
    color: var(--q10f-blue-strong) !important;
    font-size: 14px !important;
    font-weight: 900 !important;
  }

  body.q10-launcher-mode .q10-role-launcher-btn:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(37,99,235,.20) !important;
    box-shadow: 0 18px 34px rgba(0,16,96,.10) !important;
  }

  body.q10-launcher-mode .q10-role-launcher-icon {
    width: 48px !important;
    height: 48px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, rgba(37,99,235,.10) 0%, rgba(29,78,216,.12) 100%) !important;
    font-size: 1.45rem !important;
    line-height: 1 !important;
  }

  body.q10-launcher-mode .q10-role-launcher-title {
    color: var(--q10f-text) !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    letter-spacing: -.02em !important;
  }

  body.q10-launcher-mode .q10-role-launcher-subtitle {
    color: var(--q10f-text-soft) !important;
    font-size: .88rem !important;
    line-height: 1.42 !important;
    max-width: 90% !important;
  }

  body.q10-launcher-mode .q10-mobile-bottom-nav,
  body.q10-launcher-mode .q10-mobile-primary-fab,
  body.q10-mobile-app-mode .q10-mobile-bottom-nav,
  body.q10-mobile-app-mode .q10-mobile-primary-fab,
  #q10PushEnableBtn {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

@media (max-width: 560px) {
  body.q10-launcher-mode .q10-final-home-intro__row {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  body.q10-launcher-mode .q10-final-home-intro__chips {
    justify-content: flex-start !important;
  }

  body.q10-launcher-mode .q10-role-launcher-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* botão instalar app e chat finais */
#q10PwaInstallFab,
#q10InstallFab,
.q10-pwa-install-fab,
.q10-install-fab {
  position: fixed !important;
  left: auto !important;
  top: auto !important;
  right: max(14px, calc(env(safe-area-inset-right, 0px) + 14px)) !important;
  bottom: max(14px, calc(env(safe-area-inset-bottom, 0px) + 14px)) !important;
  transform: none !important;
  z-index: 2147483645 !important;
  min-width: 140px !important;
  border-radius: 18px !important;
}

#q10CustomerChatFab {
  position: fixed !important;
  left: auto !important;
  top: auto !important;
  right: max(14px, calc(env(safe-area-inset-right, 0px) + 14px)) !important;
  transform: none !important;
  z-index: 2147483644 !important;
  width: 58px !important;
  height: 58px !important;
  border: none !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(180deg, #10b981 0%, #059669 100%) !important;
  color: #fff !important;
  box-shadow: 0 18px 45px rgba(15,23,42,.24) !important;
  cursor: pointer !important;
  padding: 0 !important;
}

#q10CustomerChatFab[hidden] {
  display: none !important;
}

#q10CustomerChatFab .q10-customer-chat-fab__icon {
  font-size: 24px !important;
  line-height: 1 !important;
}