/* ==========================================================================
   Império Seguidores — identidade imperial
   Carregado depois do CSS do tema (smmaxom). Cores e medidas ficam nos tokens
   abaixo; para mudar o visual, altere os tokens em vez de cada tela.
   ========================================================================== */

:root,
html.dark,
html.light {
  --imp-navy: #07162F;
  --imp-deep: #0B2347;
  --imp-royal: #123D78;
  --imp-electric: #087BFF;
  --imp-accent: #168FFF;
  --imp-gold: #D6AD55;
  --imp-gold-light: #FFD77A;
  --imp-ice: #F3F6FC;
  --imp-white: #FFFFFF;
  --imp-muted: #9EABC2;
  --imp-success: #2FC46B;
  --imp-warning: #E8B63E;
  --imp-danger: #F05252;

  --imp-font: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --imp-font-display: 'Cinzel', 'Times New Roman', serif;
  --imp-radius: 14px;
  --imp-radius-sm: 10px;
  --imp-gold-line: rgba(214, 173, 85, .55);
  --imp-gold-soft: rgba(214, 173, 85, .22);
  --imp-blue-line: rgba(22, 143, 255, .35);
  --imp-card-bg: linear-gradient(180deg, rgba(18, 61, 120, .38) 0%, rgba(11, 35, 71, .92) 38%, rgba(7, 22, 47, .96) 100%);
  --imp-field-bg: rgba(7, 22, 47, .85);
  --imp-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  --imp-glow-blue: 0 0 0 1px rgba(22, 143, 255, .55), 0 0 18px rgba(8, 123, 255, .45);
  --imp-glow-gold: 0 0 0 1px rgba(255, 215, 122, .6), 0 0 16px rgba(214, 173, 85, .45);
  --imp-btn-gold: linear-gradient(180deg, #FFE39A 0%, #F2C866 35%, #D6AD55 70%, #B88A35 100%);
  --imp-btn-blue: linear-gradient(180deg, #2A9BFF 0%, #087BFF 55%, #0A5FD0 100%);
  --imp-header-h: 64px;
  --imp-bottomnav-h: 70px;

  /* Variáveis do tema original, apontadas para a paleta imperial. */
  --tp-100: #07162F !important;
  --tp-200: #0B2347 !important;
  --tp-300: #0E2A55 !important;
  --tp-400: #168FFF !important;
  --tp-500: #C9D3E6 !important;
  --tp-600: #9EABC2 !important;
  --tp-700: #087BFF !important;
  --tp-800: #F3F6FC !important;
  --tp-site-color: #087BFF !important;
  --tp-soft-color: #0B2347 !important;
  --tp-soft-color2: rgba(0, 0, 0, .45) !important;
  --tp-blue-gradient: linear-gradient(180deg, #2A9BFF 0%, #087BFF 55%, #0A5FD0 100%) !important;
  --tp-site-border: 7px;
  color-scheme: dark;
}

/* ---------- Base ---------------------------------------------------------- */

html, body {
  background: var(--imp-navy) !important;
  background-color: var(--imp-navy) !important;
}

body {
  font-family: var(--imp-font) !important;
  color: #C9D3E6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Fundo do painel: azul imperial com colunas douradas discretas nas laterais. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 40% at 50% -5%, rgba(22, 143, 255, .22), transparent 70%),
    radial-gradient(ellipse 60% 50% at 50% 110%, rgba(214, 173, 85, .10), transparent 70%),
    linear-gradient(90deg, rgba(214, 173, 85, .10) 0 2px, transparent 2px 14px, rgba(214, 173, 85, .06) 14px 16px, transparent 16px) left top / 18px 100% no-repeat,
    linear-gradient(270deg, rgba(214, 173, 85, .10) 0 2px, transparent 2px 14px, rgba(214, 173, 85, .06) 14px 16px, transparent 16px) right top / 18px 100% no-repeat,
    linear-gradient(180deg, #0B2347 0%, #07162F 45%, #061127 100%);
}

a { color: var(--imp-accent); }
a:hover { color: var(--imp-gold-light); }

h1, h2, h3, .imp-display { font-family: var(--imp-font-display); letter-spacing: .02em; }

::selection { background: rgba(8, 123, 255, .45); color: #fff; }

:focus-visible {
  outline: 2px solid var(--imp-gold-light) !important;
  outline-offset: 2px;
}

* { scrollbar-width: thin; scrollbar-color: var(--imp-royal) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--imp-royal); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* Ícones Font Awesome do tema: a fonte original vinha de um CDN que saiu do ar. */
.fad { font-family: 'Font Awesome 5 Free' !important; font-weight: 900 !important; }
.fad::after { content: none !important; }

[hidden] { display: none !important; }

.imp-home, .imp-stage, .imp-faq summary,
.page-header, .page-container, .page-content, .imp-bottom-nav, .imp-login-card,
.imp-frame, .well, .stats-box, .order-box, .modal_content, .form-control, .login-label,
.payment-page-left, .payment-page-right, .api-top, .api-code, .service-box, .category-box {
  box-sizing: border-box;
}
.page-header { width: auto !important; }

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

/* ---------- Componentes compartilhados ------------------------------------ */

/* Moldura imperial: cartão azul-marinho com contorno dourado e cantos ornamentados. */
.imp-frame {
  position: relative;
  background: var(--imp-card-bg);
  border: 1px solid var(--imp-gold-line);
  border-radius: var(--imp-radius);
  box-shadow: var(--imp-shadow), inset 0 1px 0 rgba(255, 215, 122, .18);
}
.imp-frame::before,
.imp-frame::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid var(--imp-gold);
  pointer-events: none;
  opacity: .9;
}
.imp-frame::before { top: -2px; left: -2px; border-right: 0; border-bottom: 0; border-top-left-radius: 10px; }
.imp-frame::after { right: -2px; bottom: -2px; border-left: 0; border-top: 0; border-bottom-right-radius: 10px; }

.imp-crown-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--imp-gold);
  font-size: 14px;
}
.imp-crown-divider::before,
.imp-crown-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--imp-gold-line), transparent);
}

.imp-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-family: var(--imp-font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--imp-ice);
  letter-spacing: .02em;
}
.imp-title i, .imp-title svg { color: var(--imp-gold); }

/* Ícones das redes sociais (gerados pelo imperio.js). */
.imp-net {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  color: #fff;
  background: #24324F;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.imp-net svg { width: 62%; height: 62%; display: block; }
.imp-net--instagram { background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%); }
.imp-net--tiktok { background: #000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), -2px 0 0 rgba(37, 244, 238, .55), 2px 0 0 rgba(254, 44, 85, .55); }
.imp-net--youtube { background: #FF0000; }
.imp-net--facebook { background: #1877F2; }
.imp-net--twitter { background: #000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.imp-net--telegram { background: #2AABEE; }
.imp-net--spotify { background: #1DB954; }
.imp-net--kwai { background: #FF7A00; }
.imp-net--other { background: linear-gradient(180deg, #123D78, #0B2347); color: var(--imp-gold-light); box-shadow: inset 0 0 0 1px var(--imp-gold-line); }

/* ---------- Botões --------------------------------------------------------- */

.btn {
  box-sizing: border-box;
  font-family: var(--imp-font);
  border-radius: var(--imp-radius-sm) !important;
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease !important;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn[disabled], .btn.disabled { opacity: .6; cursor: not-allowed; }

/* Ação principal: dourado imperial. */
.btn-blue,
.btn-main,
.btn-primary,
.imp-btn-gold {
  background: var(--imp-btn-gold) !important;
  color: #1A1206 !important;
  border: 1px solid #FFE6A6 !important;
  font-weight: 700 !important;
  letter-spacing: .01em;
  box-shadow: 0 6px 18px rgba(214, 173, 85, .28), inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 0 rgba(120, 80, 20, .35) !important;
  text-shadow: 0 1px 0 rgba(255, 240, 200, .5);
}
.btn-blue:hover,
.btn-main:hover,
.btn-primary:hover,
.imp-btn-gold:hover { filter: brightness(1.06); color: #1A1206 !important; box-shadow: 0 8px 24px rgba(214, 173, 85, .4), inset 0 1px 0 rgba(255, 255, 255, .6) !important; }

/* Ação secundária: contorno azul. */
.btn-border,
.btn-default,
.imp-btn-outline {
  background: rgba(8, 123, 255, .08) !important;
  color: var(--imp-ice) !important;
  border: 1px solid var(--imp-blue-line) !important;
  font-weight: 600;
}
.btn-border:hover,
.btn-default:hover,
.imp-btn-outline:hover { border-color: var(--imp-accent) !important; box-shadow: var(--imp-glow-blue); }

.imp-btn-blue {
  background: var(--imp-btn-blue) !important;
  color: #fff !important;
  border: 1px solid rgba(120, 190, 255, .6) !important;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(8, 123, 255, .35) !important;
}

.btn-success { background: linear-gradient(180deg, #3DDB80, #1FA855) !important; border: 0 !important; color: #04210F !important; font-weight: 700; }
.btn-warning { background: linear-gradient(180deg, #FFD77A, #D6AD55) !important; border: 0 !important; color: #1A1206 !important; font-weight: 700; }
.btn-actions { background: rgba(240, 82, 82, .12) !important; border: 1px solid rgba(240, 82, 82, .5) !important; color: #FFB4B4 !important; }

/* ---------- Campos --------------------------------------------------------- */

.form-control,
.login-label,
input[type="text"].form-control,
input[type="password"],
input[type="email"],
textarea.form-control,
select.form-control {
  background-color: var(--imp-field-bg) !important;
  color: var(--imp-ice) !important;
  border: 1px solid rgba(22, 143, 255, .28) !important;
  border-radius: var(--imp-radius-sm) !important;
  min-height: 46px;
  font-size: 15px !important;
  font-family: var(--imp-font) !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35) !important;
  transition: border-color .2s ease, box-shadow .2s ease;
}
textarea.form-control { min-height: 120px; }
.form-control::placeholder,
.login-label::placeholder { color: #7484A3 !important; opacity: 1; }
.form-control:focus,
.login-label:focus {
  outline: none !important;
  border-color: var(--imp-accent) !important;
  box-shadow: var(--imp-glow-blue), inset 0 2px 6px rgba(0, 0, 0, .35) !important;
}
.form-control[readonly] { color: var(--imp-gold-light) !important; font-weight: 700; }

select.form-control {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 42px !important;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--imp-gold) 50%),
    linear-gradient(135deg, var(--imp-gold) 50%, transparent 50%) !important;
  background-position: calc(100% - 20px) 52%, calc(100% - 14px) 52% !important;
  background-size: 6px 6px, 6px 6px !important;
  background-repeat: no-repeat !important;
  text-overflow: ellipsis;
}
select.form-control option { background: var(--imp-deep); color: var(--imp-ice); }

.control-label,
label {
  color: var(--imp-ice);
  font-weight: 600;
  font-size: 14px;
}
.control-label i { color: var(--imp-gold); }

.help-block,
.min-max { color: var(--imp-muted) !important; font-size: 12.5px; }

/* Select2 (usado em algumas telas). */
.select2-container--default .select2-selection--single {
  background: var(--imp-field-bg) !important;
  border: 1px solid rgba(22, 143, 255, .28) !important;
  border-radius: var(--imp-radius-sm) !important;
  min-height: 46px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--imp-ice) !important; line-height: 44px !important; }
.select2-dropdown { background: var(--imp-deep) !important; border-color: var(--imp-gold-line) !important; color: var(--imp-ice); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--imp-electric) !important; }
.select2-search__field { background: var(--imp-navy) !important; color: var(--imp-ice) !important; border-color: var(--imp-blue-line) !important; }

/* ---------- Alertas ------------------------------------------------------- */

.alert {
  border-radius: var(--imp-radius-sm) !important;
  border: 1px solid transparent;
  padding: 12px 40px 12px 14px !important;
  font-weight: 500;
  position: relative;
}
.alert-danger { background: rgba(240, 82, 82, .12) !important; border-color: rgba(240, 82, 82, .55) !important; color: #FFC9C9 !important; }
.alert-success { background: rgba(47, 196, 107, .12) !important; border-color: rgba(47, 196, 107, .55) !important; color: #BDF5D2 !important; }
.alert-info { background: rgba(8, 123, 255, .12) !important; border-color: var(--imp-blue-line) !important; color: #CFE5FF !important; }
.massorder-box { padding: 16px !important; }
.massorder-box .btn-blue { width: 100%; min-height: 50px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.alert .close { position: absolute; right: 12px; top: 8px; background: none; border: 0; color: inherit; font-size: 20px; opacity: .8; cursor: pointer; }

/* ---------- Estrutura autenticada ---------------------------------------- */

.app-container { background: transparent !important; }
.page-content { min-height: 100vh; background: transparent !important; }

.page-container {
  margin-top: calc(var(--imp-header-h) + 14px) !important;
  padding: 0 14px calc(var(--imp-bottomnav-h) + 36px) !important;
  max-width: 1180px;
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
}
.page-container .page-container { margin-top: 0 !important; padding: 0 !important; }
.page-container .container,
.page-container .container-fluid { padding-left: 0; padding-right: 0; max-width: 100%; }
.page-container .row { margin-left: 0; margin-right: 0; }
.page-container [class*="col-"] { padding-left: 0; padding-right: 0; }

.page-title {
  display: flex !important;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 4px 0 14px !important;
  font-family: var(--imp-font-display) !important;
  font-size: 21px !important;
  font-weight: 700 !important;
  color: var(--imp-ice) !important;
  letter-spacing: .02em;
}
.page-title i { color: var(--imp-gold); font-size: 22px; }

/* ---------- Cabeçalho ------------------------------------------------------ */

.page-header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: var(--imp-header-h);
  min-height: var(--imp-header-h) !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 12px !important;
  background:
    linear-gradient(180deg, rgba(11, 35, 71, .96), rgba(7, 22, 47, .94)) !important;
  border-bottom: 1px solid var(--imp-gold-line);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .45), 0 1px 0 rgba(255, 215, 122, .15);
  backdrop-filter: blur(8px);
}
.page-header::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 140px;
  height: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--imp-gold-light), transparent);
}

/* A logo fica no meio do espaço livre entre os botões da esquerda e os da direita
   (os da direita são mais largos, então o meio da tela encostava no sino). */
.imp-header-logo {
  position: relative;
  align-self: flex-start;
  margin: 4px auto 0;
  display: block;
  flex: none;
  z-index: 2;
}
.imp-header-logo img {
  display: block;
  height: 74px;
  width: auto;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .55)) drop-shadow(0 0 12px rgba(8, 123, 255, .35));
}

.sidebar-btn,
.header-detail > i,
.header-detail-button,
.currency-btn-mobile {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(18, 61, 120, .55), rgba(7, 22, 47, .9)) !important;
  border: 1px solid var(--imp-gold-line) !important;
  color: var(--imp-gold-light) !important;
  font-size: 18px !important;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 215, 122, .2);
  transition: box-shadow .2s ease, transform .15s ease;
}
.sidebar-btn:hover,
.header-detail > i:hover,
.header-detail-button:hover,
.currency-btn-mobile:hover { box-shadow: var(--imp-glow-gold); }
.sidebar-btn i { color: var(--imp-gold-light); font-size: 20px; line-height: 1; }

.header-detail {
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin-left: 0;
  flex: none;
}
.header-detail > i { padding: 0 !important; }

/* Saldo no cabeçalho (desktop) e seletor de moeda. */
.header-detail-button.balance {
  width: auto !important;
  padding: 0 14px !important;
  gap: 8px;
  font-family: var(--imp-font);
  font-weight: 700;
  font-size: 14px !important;
  color: var(--imp-ice) !important;
}
.header-detail-button.balance i { color: var(--imp-gold); }
.currencies-content { position: relative; }
.currency-list {
  background: var(--imp-deep) !important;
  border: 1px solid var(--imp-gold-line) !important;
  border-radius: var(--imp-radius-sm) !important;
  box-shadow: var(--imp-shadow) !important;
}
.currency-box { color: var(--imp-ice) !important; }
.currency-box:hover { background: rgba(8, 123, 255, .2) !important; }

@media (max-width: 767px) {
  .header-detail .currency-btn,
  .header-detail > .fa-expand { display: none !important; }
  .header-detail { gap: 6px; }
  .sidebar-btn,
  .header-detail > i,
  .header-detail-button,
  .currency-btn-mobile { width: 40px; height: 40px; font-size: 17px !important; }
  .imp-header-logo img { height: 66px; }
}
@media (max-width: 359px) {
  .imp-header-logo img { height: 54px; }
  .sidebar-btn,
  .header-detail > i,
  .header-detail-button,
  .currency-btn-mobile { width: 36px; height: 36px; }
}
@media (min-width: 768px) {
  .currency-btn-mobile { display: none !important; }
}

/* Caixa do perfil (abre ao tocar no avatar). */
.account-detail-box {
  background: var(--imp-card-bg) !important;
  border: 1px solid var(--imp-gold-line) !important;
  border-radius: var(--imp-radius) !important;
  box-shadow: var(--imp-shadow) !important;
  color: var(--imp-ice);
}
.account-detail-box .prodile-box img {
  border-radius: 50%;
  border: 2px solid var(--imp-gold);
  background: var(--imp-deep);
}
.account-detail-box .user-name span { color: var(--imp-ice); font-weight: 700; }
.profile-button {
  color: var(--imp-ice) !important;
  border-radius: var(--imp-radius-sm);
}
.profile-button i { color: var(--imp-gold); }
.profile-button:hover { background: rgba(8, 123, 255, .15) !important; }
/* O painel imperial tem um visual único; o seletor claro/escuro antigo fica oculto. */
.account-detail-box .profile-detail .color-change-box { display: none !important; }

/* Avisos (sino). */
.notify-box {
  background: var(--imp-card-bg) !important;
  border-left: 1px solid var(--imp-gold-line) !important;
  color: var(--imp-ice);
  box-shadow: var(--imp-shadow);
}
.notify-top { border-bottom: 1px solid var(--imp-gold-soft) !important; color: var(--imp-gold-light); font-family: var(--imp-font-display); }
.duyuru-box { background: rgba(7, 22, 47, .7) !important; border: 1px solid var(--imp-blue-line); border-radius: var(--imp-radius-sm); }
.duyuru-title { color: var(--imp-ice) !important; font-weight: 700; }
.duyuru-content { color: var(--imp-muted) !important; }

/* ---------- Menu lateral (salão imperial) --------------------------------- */

.page-sidebar { z-index: 1000 !important; }
.sidebar-overlay { z-index: 990 !important; }
.page-sidebar .sidebar {
  width: 288px !important;
  background:
    linear-gradient(180deg, rgba(7, 22, 47, .65), rgba(7, 22, 47, .97) 34%),
    url("img/login/fundo-castelo.webp") center top / cover no-repeat,
    var(--imp-navy) !important;
  border-right: 1px solid var(--imp-gold-line) !important;
  box-shadow: 10px 0 40px rgba(0, 0, 0, .55);
}
.sidebar-bg { display: none !important; }
.page-sidebar .sidebar-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 14px 0 !important;
  /* Altura da área visível de verdade (no celular, 100vh inclui a barra do navegador e cortava o "Sair"). */
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.page-sidebar .sidebar-menu .header-links img {
  width: 170px !important;
  height: auto;
  margin: 0 auto;
  display: block;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .6));
}
.page-sidebar .sidebar-menu .header-links > a > div { justify-content: center; padding: 4px 0 !important; }

.imp-side-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  margin-bottom: 6px;
  color: var(--imp-ice) !important;
  text-decoration: none !important;
}
.imp-side-user .imp-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--imp-gold);
  background: radial-gradient(circle at 50% 35%, #1B4A8C, #0B2347);
  color: var(--imp-gold-light);
  font-size: 20px;
  box-shadow: 0 0 14px rgba(214, 173, 85, .35);
}
.imp-side-user b { display: block; font-size: 16px; color: var(--imp-ice); }
.imp-side-user small { display: flex; align-items: center; gap: 6px; color: var(--imp-gold-light); font-size: 12.5px; }
.imp-side-user .imp-chevron { margin-left: auto; color: var(--imp-gold); }

.page-sidebar .menu-item {
  position: relative;
  display: flex !important;
  align-items: center;
  gap: 14px !important;
  min-height: 52px;
  padding: 0 16px !important;
  border-radius: 12px !important;
  color: var(--imp-ice) !important;
  font-size: 15.5px !important;
  font-weight: 600 !important;
  background: linear-gradient(180deg, rgba(18, 61, 120, .35), rgba(7, 22, 47, .82)) !important;
  border: 1px solid rgba(214, 173, 85, .35);
  text-decoration: none !important;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.page-sidebar .menu-item i {
  width: 24px;
  font-size: 20px;
  line-height: 1;
  text-align: center;
  color: var(--imp-gold);
}
.page-sidebar .menu-item::after {
  content: "";
  margin-left: auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--imp-gold);
  border-top: 2px solid var(--imp-gold);
  transform: rotate(45deg);
  opacity: .8;
}
.page-sidebar .menu-item:hover { border-color: var(--imp-gold); box-shadow: var(--imp-glow-gold); }
.page-sidebar .menu-item.active {
  background: linear-gradient(90deg, #0A5FD0, #087BFF 55%, #168FFF) !important;
  border-color: var(--imp-gold-light) !important;
  color: #fff !important;
  box-shadow: 0 0 22px rgba(8, 123, 255, .55), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.page-sidebar .menu-item.active i { color: #fff; }
.page-sidebar .menu-item.active::after { border-color: #fff; }

.page-sidebar .sidebar-menu { display: block !important; height: auto !important; flex: none !important; }
.page-sidebar .sidebar-bottom {
  position: sticky !important;
  bottom: 0;
  margin: auto -14px 0 !important;
  padding: 12px 14px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  border-top: 1px solid var(--imp-gold-soft);
  background: linear-gradient(180deg, rgba(7, 22, 47, .92), #07162F 40%) !important;
  z-index: 2;
}
.page-sidebar .sidebar-bottom .btn {
  box-sizing: border-box;
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(7, 22, 47, .8) !important;
  color: var(--imp-ice) !important;
  border: 1px solid var(--imp-gold-line) !important;
  box-shadow: none !important;
  text-shadow: none;
  font-weight: 600 !important;
}
.page-sidebar .sidebar-bottom .btn:hover { border-color: var(--imp-danger) !important; color: #FFC9C9 !important; }

.imp-side-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 40px;
  height: 40px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(7, 22, 47, .85);
  border: 1px solid var(--imp-gold-line);
  color: var(--imp-gold-light);
  font-size: 18px;
  cursor: pointer;
}

@media (max-width: 991px) {
  .page-sidebar {
    width: 288px !important;
    max-width: 88vw;
    left: 0 !important;
    transform: translateX(-105%) !important;
    transition: transform .3s ease !important;
  }
  .page-sidebar .sidebar { max-width: 88vw; }
  body.sidebar-open .page-sidebar { transform: none !important; }
  .sidebar-overlay { background: rgba(3, 9, 22, .72) !important; backdrop-filter: blur(2px); }
  body.sidebar-open .imp-side-close { display: flex; }
  body.sidebar-open { overflow: hidden; }
  /* Com o menu aberto, o botão do WhatsApp não fica por cima das opções. */
  body.sidebar-open .wpp-btn { display: none !important; }
  .page-sidebar { height: 100dvh !important; }
}

@media (min-width: 992px) {
  .page-sidebar { position: fixed !important; top: 0; left: 0; height: 100vh; }
  .page-content { padding-left: 288px; }
  .page-header { left: 288px; }
  .sidebar-btn { visibility: hidden; }
  .imp-header-logo { display: none; }
  .header-detail { margin-left: auto; }
}

/* ---------- Navegação inferior (celular) ---------------------------------- */

.bottom-navigaiton { display: none !important; }

.imp-bottom-nav {
  position: fixed;
  left: 8px;
  right: 8px;
  bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  z-index: 45;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  padding: 6px;
  height: var(--imp-bottomnav-h);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(11, 35, 71, .96), rgba(7, 22, 47, .98));
  border: 1px solid var(--imp-gold-line);
  box-shadow: 0 -6px 26px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 215, 122, .18);
  backdrop-filter: blur(8px);
}
.imp-bottom-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 12px;
  color: #C9D3E6 !important;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  text-decoration: none !important;
  border: 1px solid transparent;
  transition: background .2s ease, box-shadow .2s ease;
}
.imp-bottom-nav a i { font-size: 21px; line-height: 1; color: var(--imp-gold); }
.imp-bottom-nav a.active {
  color: #fff !important;
  background: linear-gradient(180deg, #168FFF, #0A5FD0);
  border-color: rgba(255, 215, 122, .7);
  box-shadow: 0 0 16px rgba(8, 123, 255, .6);
}
.imp-bottom-nav a.active i { color: #fff; }

@media (min-width: 992px) {
  .imp-bottom-nav { display: none; }
  .page-container { padding-bottom: 40px !important; }
}

/* Botões flutuantes de WhatsApp (vêm do código personalizado do painel) ficam acima do menu. */
@media (max-width: 991px) {
  body.imp-auth a[href*="wa.me"][style*="fixed"],
  body.imp-auth a[href*="whatsapp"][style*="fixed"],
  body.imp-auth [class*="whatsapp"][style*="fixed"],
  body.imp-auth .imp-float-lift,
  body.imp-auth .wpp-btn {
    bottom: calc(var(--imp-bottomnav-h) + 24px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .wpp-btn { right: 14px !important; }
}

/* ---------- Novo Pedido / painel ------------------------------------------ */

.stats-box-content {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
@media (min-width: 992px) {
  .stats-box-content { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.stats-box {
  position: relative;
  display: grid !important;
  grid-template-columns: 38px 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 8px;
  align-items: center;
  min-height: 76px;
  padding: 12px !important;
  margin: 0 !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0;
  justify-self: stretch;
  flex: none !important;
  background: var(--imp-card-bg) !important;
  border: 1px solid var(--imp-gold-line) !important;
  border-radius: var(--imp-radius) !important;
  box-shadow: var(--imp-shadow), inset 0 1px 0 rgba(255, 215, 122, .15);
  overflow: hidden;
}
.stats-box-title {
  display: contents !important;
  color: var(--imp-muted) !important;
}
.stats-box-title,
.stats-box-text,
.stats-box-balance,
.stats-balance { border: 0 !important; box-shadow: none !important; }
.stats-box-title::before, .stats-box-title::after,
.stats-box-text::before, .stats-box-text::after,
.stats-box-balance::before, .stats-box-balance::after { content: none !important; }
.stats-box-title i {
  grid-row: 1;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  font-size: 19px;
  color: var(--imp-gold-light);
  background: radial-gradient(circle at 50% 30%, rgba(214, 173, 85, .28), rgba(7, 22, 47, .8));
  border: 1px solid var(--imp-gold-line);
}
.stats-box-title,
.stats-box-title span { font-size: 12.5px; font-weight: 600; }
.stats-box-text,
.stats-balance {
  grid-column: 1 / -1;
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--imp-ice) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  background: none !important;
  padding: 0 !important;
}
.stats-box-balance .stats-balance { flex: 1; }
.stats-box-balance {
  grid-column: 1 / -1;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
  background: none !important;
  padding: 0 !important;
}
.stats-balance dot::before, .stats-balance dot::after { content: none !important; }
.stats-balance { font-size: 15.5px !important; letter-spacing: -.01em; }
.stats-balance dot { margin-right: 4px !important; }
.stats-balance dot { display: inline-block; width: 8px !important; height: 8px !important; padding: 0 !important; border: 0 !important; margin-right: 6px; border-radius: 50%; background: var(--imp-success) !important; box-shadow: 0 0 8px var(--imp-success); vertical-align: middle; }
.stats-btn {
  flex: none;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--imp-btn-gold) !important;
  color: #1A1206 !important;
  text-decoration: none !important;
}
.stats-btn span { display: none; }
.stats-btn i { font-size: 16px; line-height: 1; }

/* Abas Novo Pedido / Pedido em massa. */
.tab-select {
  display: flex !important;
  gap: 8px;
  padding: 0 !important;
  margin: 0 0 12px !important;
  background: none !important;
  border: 0 !important;
}
.tab-select .favslct {
  flex: 1;
  margin: 0 !important;
  border-radius: 12px !important;
  background: rgba(7, 22, 47, .7) !important;
  border: 1px solid var(--imp-blue-line) !important;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tab-select .favslct span,
.tab-select .favslct a { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; color: var(--imp-ice) !important; font-weight: 600; text-decoration: none !important; display: flex; align-items: center; gap: 8px; }
.tab-select .neworderApp { background: var(--imp-btn-blue) !important; border-color: rgba(255, 215, 122, .6) !important; box-shadow: 0 0 14px rgba(8, 123, 255, .45); }
.tab-select .neworderApp span { color: #fff !important; }
.favalert { display: none !important; }

.well {
  display: block !important;
  padding: 16px !important;
  background: var(--imp-card-bg) !important;
  border: 1px solid var(--imp-gold-line) !important;
  border-radius: var(--imp-radius) !important;
  box-shadow: var(--imp-shadow), inset 0 1px 0 rgba(255, 215, 122, .15) !important;
  margin-bottom: 16px;
}
.well .control-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 8px !important;
  color: var(--imp-gold-light) !important;
  font-weight: 700;
  font-size: 14px;
  background: none !important;
}
.well .control-label:first-of-type { margin-top: 0 !important; }
.well .control-label i { font-size: 16px; }
.well .form-group { margin-bottom: 4px; }
.well .btn-main,
.well button[type="submit"] {
  width: 100%;
  min-height: 54px;
  margin-top: 18px;
  font-size: 17px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.neworder-search { display: none !important; }
#neworder_fields .form-group { margin-top: 2px; }
#neworder_fields #description { display: none; }
#description_new .panel-body,
.description-box,
#service_description {
  color: #C9D3E6 !important;
  background: rgba(7, 22, 47, .6) !important;
  border: 1px solid var(--imp-blue-line) !important;
  border-radius: var(--imp-radius-sm) !important;
  padding: 12px !important;
  line-height: 1.55;
}
.secili-servis .control-label { margin-top: 0 !important; }
.m-service-box { display: none !important; }

/* Faixa de redes sociais. */
.imp-networks {
  margin: 0 0 14px;
  padding: 12px;
}
.imp-networks-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  color: var(--imp-ice);
  font-weight: 700;
  font-size: 15px;
}
.imp-networks-head span { display: flex; align-items: center; gap: 8px; }
.imp-networks-head span i { color: var(--imp-gold); }
.imp-networks-head button {
  background: none;
  border: 0;
  padding: 4px 0;
  color: var(--imp-accent);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}
.imp-networks-list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 6px;
  margin: 0 -2px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.imp-networks-list::-webkit-scrollbar { display: none; }
.imp-net-chip {
  flex: none;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 70px;
  padding: 8px 4px;
  border-radius: 14px;
  background: rgba(7, 22, 47, .6);
  border: 1px solid rgba(22, 143, 255, .2);
  color: #C9D3E6;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.imp-net-chip .imp-net { width: 44px; height: 44px; border-radius: 12px; }
.imp-net-chip:hover { border-color: var(--imp-gold-line); }
.imp-net-chip[aria-pressed="true"] {
  color: #fff;
  border-color: var(--imp-gold-light);
  background: linear-gradient(180deg, rgba(22, 143, 255, .3), rgba(7, 22, 47, .8));
  box-shadow: 0 0 0 1px rgba(255, 215, 122, .5), 0 0 18px rgba(8, 123, 255, .55);
  transform: translateY(-1px);
}

/* Aviso do campo Link: perfil x publicação (bem destacado, em vermelho). */
.imp-link-hint {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  background: linear-gradient(180deg, #FF6B6B, #D93A3F);
  border: 1px solid #FFB3B3;
  color: #fff !important;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: none;
  box-shadow: 0 0 12px rgba(229, 72, 77, .45);
  vertical-align: middle;
}
.imp-link-note {
  display: flex !important;
  align-items: flex-start;
  gap: 8px;
  margin: 8px 0 4px;
  padding: 8px 10px;
  border-radius: var(--imp-radius-sm);
  background: rgba(229, 72, 77, .14);
  border: 1px solid rgba(255, 140, 140, .55);
  color: #FFD2D2 !important;
  font-size: 13px;
  line-height: 1.4;
}
.imp-link-note {
  background: rgba(5, 15, 34, .92) !important;
  border: 2px solid #FF3B3B !important;
  box-shadow: 0 0 14px rgba(255, 59, 59, .35);
}
.imp-link-note b { color: #fff; }
.imp-link-note i { color: #FF3B3B; margin-top: 2px; font-size: 16px; }
.imp-link-note > span { display: block; }
/* A instrução principal: vermelho vivo, grande e em negrito. */
.imp-link-must {
  display: block;
  margin: 4px 0 2px;
  color: #FF3B3B !important;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(255, 59, 59, .45);
}
/* Espaço entre o seletor de Serviços e o campo Link. */
#neworder_fields #order_link { margin-top: 18px !important; }
#neworder_fields #order_link > .control-label { margin-top: 0 !important; }
#order_link.is-profile #field-orderform-fields-link,
#order_link.is-post #field-orderform-fields-link { border-color: rgba(255, 120, 120, .75) !important; }

.imp-net-chip.is-empty { opacity: .55; }
.imp-net-chip.is-empty .imp-net { filter: grayscale(.5); }
.imp-networks-empty {
  margin: 8px 0 0;
  padding: 8px 12px;
  border-radius: var(--imp-radius-sm);
  border: 1px dashed var(--imp-gold-line);
  background: rgba(214, 173, 85, .08);
  color: var(--imp-gold-light);
  font-size: 13px;
}
#neworder_services optgroup { color: var(--imp-gold-light); background: var(--imp-navy); font-weight: 700; }
#neworder_services[disabled] { opacity: .75; cursor: progress; }

/* Campo com ícone da rede à esquerda (Categoria e Serviços). */
.imp-select-wrap { position: relative; }
.imp-select-wrap > .imp-net {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  pointer-events: none;
  z-index: 1;
}
.imp-select-wrap select.form-control { padding-left: 48px !important; }
#neworder_category.form-control,
#neworder_services.form-control {
  min-height: 52px;
  font-weight: 700;
  background-color: #F6E7C1 !important;
  background-image:
    linear-gradient(45deg, transparent 50%, #5A3D10 50%),
    linear-gradient(135deg, #5A3D10 50%, transparent 50%),
    linear-gradient(180deg, #FFF3D6, #E9CF8E) !important;
  background-position: calc(100% - 20px) 52%, calc(100% - 14px) 52%, 0 0 !important;
  background-size: 6px 6px, 6px 6px, 100% 100% !important;
  color: #1A1206 !important;
  border: 1px solid #FFE6A6 !important;
  box-shadow: 0 4px 14px rgba(214, 173, 85, .25), inset 0 1px 0 #fff !important;
}
#neworder_category option,
#neworder_services option { color: var(--imp-ice); background: var(--imp-deep); font-weight: 500; }

/* ---------- Serviços ------------------------------------------------------ */

.page-search-box {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px !important;
  background: none !important;
  padding: 0 !important;
}
.page-search-box > select { flex: 1 1 180px; width: auto !important; }
.serach-box-input { flex: 1 1 220px; position: relative; width: auto !important; max-width: none !important; margin: 0 !important; }
.serach-box-input form { width: 100%; }
.serach-box-input form > input { width: 100% !important; }
.serach-box-input form { display: flex !important; flex-wrap: wrap; gap: 10px; position: relative; }
.serach-box-input form > select,
.serach-box-input form > .select2 { flex: 1 1 100%; }
.serach-box-input form > input { flex: 1 1 auto; padding-right: 54px !important; }
.search-input-btn {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 42px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 9px;
  background: var(--imp-btn-gold) !important;
  color: #1A1206 !important;
}
.service-list { display: flex; flex-direction: column; gap: 10px; }
.category-box {
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 12px 14px !important;
  border-radius: var(--imp-radius-sm) !important;
  background: linear-gradient(90deg, rgba(214, 173, 85, .22), rgba(11, 35, 71, .7)) !important;
  border: 1px solid var(--imp-gold-line) !important;
}
.category-box span { color: var(--imp-gold-light) !important; font-weight: 800; font-size: 14.5px; letter-spacing: .02em; }
.service-box {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px !important;
  background: var(--imp-card-bg) !important;
  border: 1px solid rgba(214, 173, 85, .3) !important;
  border-radius: var(--imp-radius-sm) !important;
}
.service-box > div,
.service-top,
.service-bottom {
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
.service-box::before, .service-box::after,
.service-box > div::before, .service-box > div::after { content: none !important; }
.service-box-left { flex: 1 1 220px; min-width: 0; }
.service-bottom { margin-top: 6px !important; }
.search-input-btn { display: flex !important; z-index: 2; }
.service-top span { color: var(--imp-ice) !important; font-weight: 700; font-size: 14.5px; line-height: 1.4; }
.service-bottom { display: flex; gap: 14px; margin-top: 6px; }
.service-bottom span { color: var(--imp-muted) !important; font-size: 12.5px; }
.service-bottom b { color: var(--imp-ice); }
.service-box-right { display: flex !important; gap: 8px; flex: none; margin-left: auto !important; }
.service-box-right .btn { min-height: 40px; padding: 8px 14px; display: inline-flex; align-items: center; }
.service-box-right .btn-border { color: var(--imp-gold-light) !important; font-weight: 800; }

/* ---------- Meus Pedidos -------------------------------------------------- */

.order-list { margin-bottom: 14px; }
.order-box {
  position: relative;
  padding: 14px !important;
  gap: 12px;
  background: var(--imp-card-bg) !important;
  border: 1px solid var(--imp-gold-line) !important;
  border-radius: var(--imp-radius) !important;
  box-shadow: var(--imp-shadow), inset 0 1px 0 rgba(255, 215, 122, .15);
}
.order-box-top { display: flex !important; flex-direction: column; gap: 10px; background: none !important; padding: 0 !important; }
.order-top-left { display: grid !important; grid-template-columns: auto 1fr; align-items: center; gap: 10px; }
.order-id {
  justify-self: start;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid var(--imp-gold-line);
  background: rgba(214, 173, 85, .12);
  color: var(--imp-gold-light) !important;
  font-weight: 800;
  font-size: 14px;
}
.order-date { justify-self: end; color: var(--imp-muted) !important; font-size: 12.5px; display: flex; align-items: center; gap: 6px; }
.order-service {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--imp-ice) !important;
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.35;
}
.order-service .imp-net { width: 36px; height: 36px; border-radius: 10px; }
.order-top-right { display: flex !important; justify-content: flex-start !important; width: auto !important; }
.order-service { white-space: normal !important; overflow: visible !important; }
.order-box .order-status,
.modal_content .order-status {
  width: auto !important;
  max-width: 100%;
  align-self: flex-start;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  font-weight: 700;
  font-size: 13px;
  border: 1px solid currentColor;
  background: rgba(158, 171, 194, .1) !important;
  color: #C9D3E6 !important;
}
.order-status i, .order-status span { color: inherit !important; }
.order-status i { font-size: 13px; line-height: 1; }
html body .order-status.st-completed { color: #6EE7A0 !important; background: rgba(47, 196, 107, .12) !important; border-color: rgba(110, 231, 160, .6) !important; }
html body .order-status.st-partial,
html body .order-status.st-processing,
html body .order-status.st-inprogress,
html body .order-status.st-pending { color: var(--imp-gold-light) !important; background: rgba(214, 173, 85, .12) !important; border-color: rgba(255, 215, 122, .6) !important; }
html body .order-status.st-canceled,
html body .order-status.st-cancelled,
html body .order-status.st-fail { color: #FF9C9C !important; background: rgba(240, 82, 82, .12) !important; border-color: rgba(255, 156, 156, .6) !important; }
.order-button .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: 1 1 auto; font-weight: 700; }
.imp-btn-refill {
  background: linear-gradient(180deg, #3DDB80, #1FA855) !important;
  color: #04210F !important;
  border: 1px solid rgba(160, 255, 200, .7) !important;
  box-shadow: 0 6px 16px rgba(47, 196, 107, .3) !important;
}
.imp-refill-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--imp-radius-sm);
  background: rgba(8, 123, 255, .08);
  border: 1px dashed var(--imp-blue-line);
  color: #AFC2E3;
  font-size: 13px;
  line-height: 1.4;
}
.imp-refill-note i { color: var(--imp-accent); margin-top: 2px; }
.imp-copy-row { display: flex !important; align-items: center; justify-content: space-between; gap: 10px; }
.imp-copy-row b { color: var(--imp-gold-light); margin-left: 4px; }
.imp-copy-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn.is-busy { pointer-events: none; opacity: .7; }
html body .order-status.Completed { color: #6EE7A0 !important; background: rgba(47, 196, 107, .12) !important; border-color: rgba(110, 231, 160, .6) !important; }
html body .order-status.Partial,
html body .order-status.Processing,
html body .order-status.Inprogress,
html body .order-status[class*="In progress"],
html body .order-status.Pending { color: var(--imp-gold-light) !important; background: rgba(214, 173, 85, .12) !important; border-color: rgba(255, 215, 122, .6) !important; }
html body .order-status.Canceled,
html body .order-status.Cancelled,
html body .order-status.Fail,
html body .order-status.Error { color: #FF9C9C !important; background: rgba(240, 82, 82, .12) !important; border-color: rgba(255, 156, 156, .6) !important; }
.order-box-bottom { display: flex !important; flex-direction: column; gap: 10px; background: none !important; padding: 0 !important; }
.order-link {
  display: flex !important;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 12px !important;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #AFC2E3 !important;
  background: var(--imp-field-bg) !important;
  border: 1px solid var(--imp-blue-line) !important;
  border-radius: var(--imp-radius-sm) !important;
  cursor: pointer;
}
.order-link i { color: var(--imp-gold); }
.order-button { display: flex; flex-wrap: wrap; gap: 8px; }
.order-button:empty { display: none; }
.order-box-bottom > .btn-blue { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.order-box-bottom > br { display: none; }

/* ---------- Modais ------------------------------------------------------- */

/* Acima do widget de WhatsApp do rodapé personalizado (z-index 9999). */
.swal2-container { z-index: 10060 !important; }
.modal_container {
  position: fixed !important;
  inset: 0;
  z-index: 10050 !important;
  display: flex !important;
  align-items: flex-end;
  justify-content: center;
  padding: 14px;
  background: rgba(3, 9, 22, .78) !important;
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, visibility .2s ease;
}
.modal_container.show-modal { opacity: 1; visibility: visible; pointer-events: auto; }
@media (min-width: 768px) { .modal_container { align-items: center; } }
.modal_container { box-sizing: border-box; padding: 14px !important; }
.modal_content {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  margin: 0 auto !important;
  box-sizing: border-box;
  width: 100% !important;
  max-width: 520px;
  max-height: 88vh;
  overflow-y: auto;
  padding: 18px !important;
  background: var(--imp-card-bg) !important;
  border: 1px solid var(--imp-gold-line) !important;
  border-radius: 18px !important;
  box-shadow: var(--imp-shadow), 0 0 30px rgba(8, 123, 255, .2);
  color: var(--imp-ice);
  transform: translateY(14px);
  transition: transform .25s ease;
}
.modal_container.show-modal .modal_content { transform: none; }
.modal_close {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--imp-gold-soft);
  color: var(--imp-gold-light) !important;
  font-family: var(--imp-font-display);
  font-weight: 700;
  font-size: 16px;
  cursor: default;
}
.modal_close i {
  cursor: pointer;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  border: 1px solid var(--imp-gold-line);
  color: var(--imp-gold-light);
}
.modal-order-content { display: flex; flex-direction: column; gap: 8px; }
.modal-order-content > span {
  padding: 10px 12px;
  border-radius: var(--imp-radius-sm);
  background: rgba(7, 22, 47, .6);
  border: 1px solid rgba(22, 143, 255, .18);
  color: #C9D3E6;
  word-break: break-word;
}
.modal-order-detail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 12px; }
.modal-order-detail span {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
  text-align: center;
  border-radius: var(--imp-radius-sm);
  border: 1px solid var(--imp-gold-line);
  background: rgba(214, 173, 85, .08);
  color: var(--imp-muted);
  font-size: 12px;
}
.modal-order-detail b { color: var(--imp-gold-light); font-size: 16px; }
/* Andamento ao vivo do pedido (Detalhes do pedido). */
.imp-live {
  margin: 6px 0 12px;
  padding: 14px;
  border-radius: var(--imp-radius);
  border: 1px solid var(--imp-gold-line);
  background: linear-gradient(180deg, rgba(18, 61, 120, .3), rgba(7, 22, 47, .85));
}
/* O tema estiliza todo <span> do detalhe do pedido; o bloco ao vivo usa os próprios estilos. */
.modal-order-content .imp-live span,
.modal-order-content .imp-live b,
.modal-order-content .imp-live small {
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  word-break: normal;
}
.modal-order-content .imp-live .imp-live-head > span { color: var(--imp-ice); }
.modal-order-content .imp-live .imp-live-foot span { color: var(--imp-muted); }
.modal-order-content .imp-live .imp-live-box {
  padding: 10px 6px;
  border: 1px solid var(--imp-blue-line);
  border-radius: var(--imp-radius-sm);
  background: rgba(5, 15, 34, .7);
}
.modal-order-content .imp-live .imp-live-box.is-left { border-color: rgba(255, 215, 122, .45); }
.modal-order-content .imp-live .imp-live-box.is-done { border-color: rgba(110, 231, 160, .45); }
.modal-order-content .imp-live .imp-live-box small { color: var(--imp-muted); }
.modal-order-content .imp-live .imp-live-box b { color: var(--imp-ice); }
.modal-order-content .imp-live .imp-live-box.is-left b { color: var(--imp-gold-light); }
.modal-order-content .imp-live .imp-live-box.is-done b { color: #6EE7A0; }
.modal-order-content .imp-live .imp-live-foot b { color: var(--imp-ice); }

/* Cores dos quadros: pedido = ouro, falta = vermelho, entregue = verde. */
.modal-order-content .imp-live .imp-live-box.is-ordered {
  background: linear-gradient(180deg, #FFE39A 0%, #E9C56B 45%, #C89A3E 100%);
  border-color: #FFE6A6;
  box-shadow: 0 4px 14px rgba(214, 173, 85, .3), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.modal-order-content .imp-live .imp-live-box.is-ordered small { color: #5A3D10 !important; }
.modal-order-content .imp-live .imp-live-box.is-ordered b { color: #2A1A04; }

.modal-order-content .imp-live .imp-live-box.is-left {
  background: linear-gradient(180deg, #FF8A8A 0%, #E5484D 50%, #B42F34 100%);
  border-color: #FFB3B3;
  box-shadow: 0 4px 14px rgba(229, 72, 77, .3), inset 0 1px 0 rgba(255, 255, 255, .4);
}
.modal-order-content .imp-live .imp-live-box.is-left small { color: #FFE1E1 !important; }
.modal-order-content .imp-live .imp-live-box.is-left b { color: #fff; }

.modal-order-content .imp-live .imp-live-box.is-done {
  background: linear-gradient(180deg, #6EE7A0 0%, #2FC46B 50%, #1A9A50 100%);
  border-color: #A8F3C6;
  box-shadow: 0 4px 14px rgba(47, 196, 107, .3), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.modal-order-content .imp-live .imp-live-box.is-done small { color: #0B3D20 !important; }
.modal-order-content .imp-live .imp-live-box.is-done b { color: #04210F; }
.imp-live-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; color: var(--imp-ice); font-weight: 700; font-size: 14px; }
.imp-live-pct { color: var(--imp-gold-light); font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.imp-live-bar {
  position: relative;
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(5, 15, 34, .9);
  border: 1px solid var(--imp-gold-soft);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .5);
}
.imp-live-bar > i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #0A5FD0, #168FFF 55%, #FFD77A);
  box-shadow: 0 0 12px rgba(22, 143, 255, .7);
  transition: width .8s cubic-bezier(.3, .7, .2, 1);
}
.imp-live.is-running .imp-live-bar > i {
  background-image: linear-gradient(90deg, #0A5FD0, #168FFF 55%, #FFD77A), repeating-linear-gradient(45deg, rgba(255, 255, 255, .16) 0 10px, transparent 10px 20px);
  background-blend-mode: overlay;
  background-size: 100% 100%, 28px 28px;
  animation: imp-live-stripes 1s linear infinite;
}
@keyframes imp-live-stripes { to { background-position: 0 0, 28px 0; } }
.imp-live.is-done-all .imp-live-bar > i { background: linear-gradient(90deg, #1FA855, #3DDB80); box-shadow: 0 0 12px rgba(47, 196, 107, .6); }
.imp-live-boxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.imp-live-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  border-radius: var(--imp-radius-sm);
  border: 1px solid var(--imp-blue-line);
  background: rgba(5, 15, 34, .7);
  text-align: center;
}
.imp-live-box small { color: var(--imp-muted) !important; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.imp-live-box b { color: var(--imp-ice); font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.imp-live-box.is-left { border-color: rgba(255, 215, 122, .45); }
.imp-live-box.is-left b { color: var(--imp-gold-light); }
.imp-live-box.is-done { border-color: rgba(110, 231, 160, .45); }
.imp-live-box.is-done b { color: #6EE7A0; }
.imp-live-box b.is-bump { animation: imp-live-bump .6s ease; }
@keyframes imp-live-bump { 40% { transform: scale(1.12); color: #fff; } }
.imp-live-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; margin-top: 10px; color: var(--imp-muted); font-size: 12px; }
.imp-live-foot b { color: var(--imp-ice); }
.imp-live-state { display: inline-flex; align-items: center; gap: 6px; }
.imp-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--imp-muted); }
.imp-live.is-running .imp-live-dot { background: var(--imp-success); box-shadow: 0 0 0 0 rgba(47, 196, 107, .7); animation: imp-live-pulse 1.6s infinite; }
@keyframes imp-live-pulse { 70% { box-shadow: 0 0 0 7px rgba(47, 196, 107, 0); } 100% { box-shadow: 0 0 0 0 rgba(47, 196, 107, 0); } }

.modal_content .order-status { position: static !important; inset: auto !important; transform: none !important; margin-top: 4px; }
.modal-bottom-btn { display: flex; gap: 8px; margin-top: 12px; }
.modal-bottom-btn .btn { flex: 1; min-height: 44px; }

/* Mensagem curta "Link copiado". */
.notification {
  position: fixed !important;
  left: 50% !important;
  bottom: calc(var(--imp-bottomnav-h) + 28px) !important;
  top: auto !important;
  z-index: 300 !important;
  transform: translate(-50%, 20px);
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 10px 16px !important;
  border-radius: 999px !important;
  background: var(--imp-deep) !important;
  border: 1px solid var(--imp-gold-line) !important;
  color: var(--imp-ice) !important;
  box-shadow: var(--imp-shadow);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.notification.active { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.notification i { color: var(--imp-success); }
#error-search, #voiceclose, #lnc:empty { display: none !important; }

/* SweetAlert (QR Code PIX e avisos). */
.swal2-popup {
  background: var(--imp-card-bg) !important;
  border: 1px solid var(--imp-gold-line) !important;
  border-radius: 18px !important;
  color: var(--imp-ice) !important;
  box-shadow: var(--imp-shadow) !important;
}
.swal2-title { color: var(--imp-gold-light) !important; font-family: var(--imp-font-display) !important; }
.swal2-html-container, .swal2-content { color: #C9D3E6 !important; }
.swal2-html-container input, .swal2-html-container textarea { background: var(--imp-field-bg) !important; color: var(--imp-ice) !important; border: 1px solid var(--imp-blue-line) !important; border-radius: 10px !important; }
.swal2-html-container img#img-pix { background: #fff; border-radius: 12px; padding: 8px; border: 2px solid var(--imp-gold) !important; max-width: 280px; }
.swal2-styled.swal2-confirm { background: var(--imp-btn-gold) !important; color: #1A1206 !important; font-weight: 700 !important; border-radius: 10px !important; }
.swal2-styled.swal2-cancel, .swal2-styled.swal2-deny { background: rgba(8, 123, 255, .15) !important; color: var(--imp-ice) !important; border: 1px solid var(--imp-blue-line) !important; border-radius: 10px !important; }
.swal2-close { color: var(--imp-gold-light) !important; }

/* ---------- Recarregar ---------------------------------------------------- */

.addfunds-page { display: flex; flex-direction: column; gap: 14px; }
.payment-list:empty { display: none; }
.payment-page-bottom { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 992px) { .payment-page-bottom { grid-template-columns: 1fr 1fr; align-items: start; } }
.payment-page-left,
.payment-page-right {
  padding: 16px !important;
  background: var(--imp-card-bg) !important;
  border: 1px solid var(--imp-gold-line) !important;
  border-radius: var(--imp-radius) !important;
  box-shadow: var(--imp-shadow), inset 0 1px 0 rgba(255, 215, 122, .15);
  width: auto !important;
}
.payment-title {
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  color: var(--imp-ice) !important;
  font-family: var(--imp-font-display);
  font-weight: 700;
  font-size: 17px !important;
}
.payment-title i { color: var(--imp-gold); }
.payment-page-left .control-label { display: block; margin: 12px 0 8px; color: var(--imp-gold-light); }
.payment-page-left .btn-blue { width: 100%; min-height: 54px; font-size: 16.5px !important; display: flex; align-items: center; justify-content: center; gap: 10px; letter-spacing: .04em; }
.imp-amount-field { position: relative; }
.imp-amount-field > span {
  position: absolute;
  left: 1px;
  top: 1px;
  bottom: 1px;
  width: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--imp-blue-line);
  color: var(--imp-gold-light);
  font-weight: 800;
  border-radius: var(--imp-radius-sm) 0 0 var(--imp-radius-sm);
  background: rgba(214, 173, 85, .08);
}
.imp-amount-field > input { padding-left: 64px !important; }
.payment-history { display: flex; flex-direction: column; gap: 10px; }
.history-box {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px !important;
  border-radius: var(--imp-radius-sm) !important;
  background: rgba(7, 22, 47, .65) !important;
  border: 1px solid rgba(214, 173, 85, .3) !important;
}
.history-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.history-left .imp-pix {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(50, 188, 173, .15);
  border: 1px solid rgba(50, 188, 173, .45);
}
.history-left { flex: 1 1 auto; width: auto !important; }
.history-right { flex: none !important; width: auto !important; }
.history-top, .history-bottom { border: 0 !important; padding: 0 !important; background: none !important; }
.history-top span { color: var(--imp-ice) !important; font-weight: 700; }
.history-bottom span { color: var(--imp-accent) !important; font-size: 12.5px; }
.history-amount {
  flex: none;
  padding: 6px 12px;
  border-radius: 8px;
  font-weight: 800;
  color: #04210F !important;
  background: linear-gradient(180deg, #3DDB80, #1FA855);
}
.error-message { color: #FF9C9C !important; }

/* ---------- API ----------------------------------------------------------- */

.api-box { display: flex; flex-direction: column; gap: 14px; background: none !important; padding: 0 !important; }
.api-top {
  display: flex !important;
  flex-direction: column;
  gap: 10px;
  padding: 14px !important;
  background: var(--imp-card-bg) !important;
  border: 1px solid var(--imp-gold-line) !important;
  border-radius: var(--imp-radius) !important;
}
.api-top-item {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 52px;
  padding: 8px 12px !important;
  border-radius: var(--imp-radius-sm) !important;
  background: rgba(7, 22, 47, .65) !important;
  border: 1px solid rgba(214, 173, 85, .3) !important;
  color: var(--imp-ice) !important;
  font-weight: 600;
  cursor: default;
}
.api-top-item b {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  overflow-wrap: anywhere;
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--imp-field-bg);
  border: 1px solid var(--imp-blue-line);
  color: var(--imp-ice);
  font-weight: 700;
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: 13px;
}
.imp-api-label { display: flex; align-items: center; gap: 10px; }
.imp-api-label i { color: var(--imp-gold); font-size: 18px; line-height: 1; }
.imp-api-account { min-height: 38px; padding: 0 14px !important; display: inline-flex !important; align-items: center; gap: 6px; font-size: 13.5px !important; }
.api-top-item .imp-copy { margin-left: 4px; }
.api-code {
  display: flex !important;
  flex-direction: column;
  gap: 10px;
  padding: 14px !important;
  background: var(--imp-card-bg) !important;
  border: 1px solid var(--imp-gold-line) !important;
  border-radius: var(--imp-radius) !important;
}
.api-title {
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  color: var(--imp-gold-light) !important;
  font-family: var(--imp-font-display);
  font-weight: 700;
  font-size: 16px !important;
}
.api-title::before { content: ""; width: 4px; height: 18px; border-radius: 4px; background: linear-gradient(180deg, var(--imp-gold-light), var(--imp-gold)); }
.api-list { display: flex; flex-direction: column; border-radius: var(--imp-radius-sm); overflow: hidden; border: 1px solid rgba(214, 173, 85, .3); }
.api-item {
  display: grid !important;
  grid-template-columns: minmax(110px, 40%) 1fr;
  gap: 12px;
  padding: 10px 12px !important;
  background: rgba(7, 22, 47, .55) !important;
  border-bottom: 1px solid rgba(214, 173, 85, .15);
  color: var(--imp-accent) !important;
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: 13px;
  font-weight: 600;
}
.api-item b { color: #C9D3E6; font-family: var(--imp-font); font-weight: 500; overflow-wrap: anywhere; }
.api-code > .api-item,
.api-item.api-baslik { background: rgba(214, 173, 85, .14) !important; color: var(--imp-gold-light) !important; font-family: var(--imp-font); border-radius: var(--imp-radius-sm) var(--imp-radius-sm) 0 0; }
.api-code > .api-item b,
.api-item.api-baslik b { color: var(--imp-gold-light); font-weight: 700; }
.api-code pre {
  position: relative;
  margin: 0;
  padding: 14px 14px 14px 14px !important;
  max-width: 100%;
  overflow-x: auto;
  background: #050F22 !important;
  border: 1px solid rgba(214, 173, 85, .35) !important;
  border-radius: var(--imp-radius-sm) !important;
  color: #C9D3E6;
  font-size: 12.5px;
  line-height: 1.6;
  white-space: pre;
}
.api-code pre code { background: none !important; color: inherit; font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; text-shadow: none !important; }
.imp-json-key { color: #7FC0FF; }
.imp-json-str { color: #F6CF7A; }
.imp-json-num { color: #6EE7A0; }
.imp-json-bool { color: #FF9CC9; }
.imp-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 9px;
  border: 1px solid #FFE6A6;
  background: var(--imp-btn-gold);
  color: #1A1206;
  cursor: pointer;
  font-size: 15px;
}
.imp-code-wrap { position: relative; }
.imp-code-wrap > .imp-copy { position: absolute; top: 8px; right: 8px; z-index: 1; }
.api-box > .btn-blue { align-self: flex-start; min-height: 46px; display: inline-flex; align-items: center; padding: 0 18px; }
.form-inline .form-group { width: 100%; }

/* ---------- Indicação ------------------------------------------------------ */

.imp-ref { display: flex; flex-direction: column; gap: 14px; }
.imp-ref > section { padding: 16px; }
.imp-ref-hero {
  background:
    linear-gradient(100deg, rgba(7, 22, 47, .96) 30%, rgba(7, 22, 47, .55)),
    url("img/login/fundo-castelo.webp") center 35% / cover no-repeat !important;
}
.imp-ref-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--imp-gold-line);
  background: rgba(214, 173, 85, .12);
  color: var(--imp-gold-light);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.imp-ref-hero h2 { margin: 12px 0 8px; font-size: 22px; line-height: 1.25; color: var(--imp-ice); }
.imp-ref-hero h2 b { color: var(--imp-gold-light); }
.imp-ref-hero p { margin: 0; color: #C9D3E6; line-height: 1.55; font-size: 14.5px; }
.imp-ref-link .control-label { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--imp-gold-light); }
.imp-ref-copy { display: flex; gap: 8px; }
.imp-ref-copy .form-control { flex: 1; min-width: 0; font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-size: 13.5px !important; }
.imp-ref-copy .btn { flex: none; min-height: 46px; padding: 0 16px; display: inline-flex; align-items: center; gap: 6px; }
.imp-ref-share { width: 100%; min-height: 44px; margin-top: 10px; display: flex !important; align-items: center; justify-content: center; gap: 8px; }
.imp-ref-share .fa-whatsapp { color: #25D366; font-size: 18px; }
.imp-ref-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 0 !important; }
.imp-ref-stat { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px !important; text-align: center; }
.imp-ref-stat i { color: var(--imp-gold); font-size: 20px; }
.imp-ref-stat span { color: var(--imp-muted); font-size: 12px; font-weight: 600; }
.imp-ref-stat b { color: var(--imp-ice); font-size: 17px; font-weight: 800; overflow-wrap: anywhere; }
.imp-ref-steps ol { margin: 0; padding-left: 20px; color: #C9D3E6; line-height: 1.7; }
.imp-ref-history { display: flex; flex-direction: column; gap: 10px; }
.imp-ref-empty { margin: 0; color: var(--imp-muted); }
@media (max-width: 380px) {
  .imp-ref-stat b { font-size: 15px; }
  .imp-ref-copy { flex-direction: column; }
}

/* ---------- Conta, tickets, cadastro e demais telas ------------------------- */

.account-box,
.ticket-list,
.ticket-content,
.signup-screen form,
.resetpassword-box,
.a-box,
.child-panel-box,
.affiliates-box,
.massorder-box {
  background: var(--imp-card-bg) !important;
  border: 1px solid var(--imp-gold-line) !important;
  border-radius: var(--imp-radius) !important;
  box-shadow: var(--imp-shadow), inset 0 1px 0 rgba(255, 215, 122, .15);
  color: var(--imp-ice);
}
.account-box { padding: 14px !important; }
.account-top { display: none; }
.account-bottom { display: flex; flex-direction: column; gap: 14px; }
.affiliates-top {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px !important;
  border-radius: var(--imp-radius-sm);
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(7, 22, 47, .95), rgba(7, 22, 47, .55)),
    url("img/login/fundo-castelo.webp") center 30% / cover no-repeat !important;
  border: 1px solid var(--imp-gold-line);
}
.affiliates-top img { display: none; }
.affiliates-top span { color: var(--imp-ice) !important; font-family: var(--imp-font-display); font-size: 18px; font-weight: 700; }
.affiliates-top b { color: var(--imp-gold-light) !important; font-weight: 600; word-break: break-all; }
.a-box { padding: 16px !important; margin: 0 !important; background: rgba(7, 22, 47, .55) !important; }
.a-box-title { display: flex !important; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--imp-gold-light) !important; font-weight: 700; font-size: 15.5px; }
.a-box .form-group { margin-bottom: 12px; }
.a-box .control-label { display: block; margin-bottom: 6px; }
.a-box .btn { min-height: 46px; width: 100%; }

.ticket-page { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 992px) { .ticket-page { grid-template-columns: 1.2fr 1fr; align-items: start; } }
.ticket-list, .ticket-content { padding: 16px !important; }
.ticket-box { display: flex; flex-direction: column; gap: 10px; background: none !important; }
.ticket-top { display: flex !important; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 12px 12px 0 !important; border-radius: var(--imp-radius-sm) var(--imp-radius-sm) 0 0; background: rgba(7, 22, 47, .6); border: 1px solid rgba(214, 173, 85, .28); border-bottom: 0; }
.ticket-bottom { display: flex !important; gap: 8px; justify-content: space-between; padding: 10px 12px 12px !important; margin-top: -10px; border-radius: 0 0 var(--imp-radius-sm) var(--imp-radius-sm); background: rgba(7, 22, 47, .6); border: 1px solid rgba(214, 173, 85, .28); border-top: 0; }
.ticket-id { color: var(--imp-gold-light) !important; font-weight: 800; }
.ticket-subject { color: var(--imp-ice) !important; font-weight: 700; }
.ticket-date { color: var(--imp-muted) !important; font-size: 12.5px; margin-left: auto; }
.ticket-status { pointer-events: none; }
.ticket-create { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; color: var(--imp-ice); }
.ticket-create lottie-player { max-width: 100%; height: auto; }
.ticket-create span { font-family: var(--imp-font-display); font-size: 18px; color: var(--imp-ice); }
.ticket-modal-subject, .ticket-message { margin-bottom: 12px; }
.ticket-modal-subject .control-label, .ticket-message .control-label { display: block; margin-bottom: 6px; }
.modal_content .search-modal-btn { width: 100%; min-height: 48px; }

.message-box, .ticket-message-box, .viewticket-box {
  border-radius: var(--imp-radius-sm) !important;
  background: rgba(7, 22, 47, .6) !important;
  border: 1px solid rgba(214, 173, 85, .28) !important;
  color: var(--imp-ice) !important;
}

/* Tabelas (pedido em massa, assinaturas, drip-feed, painel afiliado). */
.table, table {
  color: #C9D3E6;
  background: transparent !important;
}
.table > thead > tr > th, table th {
  color: var(--imp-gold-light) !important;
  background: rgba(214, 173, 85, .12) !important;
  border-color: rgba(214, 173, 85, .25) !important;
  font-weight: 700;
}
.table > tbody > tr > td, table td { border-color: rgba(214, 173, 85, .15) !important; background: rgba(7, 22, 47, .45) !important; }
.table-responsive, .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Visitantes: cabeçalho, cadastro, recuperação ----------------- */

.user-page-container { background: transparent !important; }
.user-header {
  position: relative;
  z-index: 10;
  background: linear-gradient(180deg, rgba(7, 22, 47, .92), rgba(7, 22, 47, .6)) !important;
  border-bottom: 1px solid var(--imp-gold-line);
}
.user-header-item a { color: var(--imp-ice) !important; font-weight: 600; }
.user-header-item a:hover { color: var(--imp-gold-light) !important; }
.user-header .color-mode-btn { display: none !important; }
.imp-login-page .user-header { display: none !important; }
.user-header img { width: 150px; height: auto; }

.signup-screen { padding: 24px 14px 40px; max-width: 560px; margin: 0 auto; }
.signup-screen .row, .signup-screen [class*="col-"] { margin: 0; padding: 0; width: 100%; max-width: 100%; flex: 1 1 100%; }
.signup-screen .page-title { justify-content: center; }
.signup-screen form { padding: 18px !important; }
.signup-screen .form-group { margin-bottom: 12px; }
.signup-screen .form-group .control-label { display: block; margin-bottom: 6px; }
.signup-screen .btn-blue { width: 100%; min-height: 50px; margin-top: 8px; }
.signup-screen .pull-right { display: block; float: none !important; margin-top: 14px; text-align: center; color: var(--imp-muted); }
.checkbox label { display: flex; gap: 8px; align-items: flex-start; color: #C9D3E6; font-weight: 500; }

.signup-screen .m-card {
  padding: 18px;
  background: var(--imp-card-bg);
  border: 1px solid var(--imp-gold-line);
  border-radius: var(--imp-radius);
  box-shadow: var(--imp-shadow);
}
.signup-screen .m-card form { padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
.signup-screen .m-card label { display: block; margin-bottom: 6px; }
.signup-screen .btn-secondary {
  width: 100%;
  min-height: 50px;
  background: var(--imp-btn-gold) !important;
  color: #1A1206 !important;
  border: 1px solid #FFE6A6 !important;
  font-weight: 700;
}
footer::before, footer::after, .footer-list::before, .footer-list::after { display: none !important; }
.footer-list { background: transparent !important; box-shadow: none !important; }
footer {
  box-shadow: none !important;
  background: linear-gradient(180deg, transparent, rgba(3, 9, 22, .9)) !important;
  border-top: 1px solid var(--imp-gold-soft);
  color: var(--imp-muted);
}
.footer-logo { color: var(--imp-gold-light) !important; font-family: var(--imp-font-display); font-size: 18px; }
.footer-link-item a { color: #C9D3E6 !important; }

/* ==========================================================================
   Login — a entrada no Império
   ========================================================================== */

.imp-login {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0 28px;
  background: var(--imp-navy);
}
.imp-login-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(7, 22, 47, .15) 0%, rgba(7, 22, 47, .05) 30%, rgba(7, 22, 47, .55) 58%, #07162F 82%),
    url("img/login/fundo-castelo.webp") center top / cover no-repeat;
}
.imp-login-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 40% at 50% 46%, rgba(255, 196, 90, .14), transparent 70%);
}

.imp-login-logo {
  position: relative;
  z-index: 6;
  margin-top: 10px;
  width: 150px;
  height: auto;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .65)) drop-shadow(0 0 18px rgba(8, 123, 255, .45));
}

/* Cena: arco + portas + guardas + lanças. As medidas usam % da largura do arco
   (portao-arco.webp, 755x1100, vão entre 27,4% e 72,5% da largura). */
/* Palco: cena + mensagens de estado. O cartão de login sobe por cima da metade
   de baixo do palco (altura das mãos dos guardas), deixando a animação ao fundo. */
.imp-stage {
  position: relative;
  z-index: 2;
  width: min(100%, 470px);
  margin-top: -34px;
}
.imp-scene {
  position: relative;
  width: 100%;
  aspect-ratio: 375 / 380;
}
.imp-gate {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 66%;
  aspect-ratio: 755 / 1100;
  transform: translateX(-50%);
  perspective: 900px;
}
.imp-gate-light {
  position: absolute;
  left: 27.4%;
  right: 27.4%;
  top: 21.6%;
  bottom: 0;
  border-radius: 50% 50% 0 0 / 22% 22% 0 0;
  background:
    radial-gradient(ellipse 60% 55% at 50% 70%, rgba(255, 226, 150, .0), transparent 70%),
    linear-gradient(180deg, #050C1C, #0A1A38);
  overflow: hidden;
}
.imp-gate-light::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 60% at 50% 75%, rgba(255, 230, 160, 1), rgba(255, 196, 90, .85) 30%, rgba(22, 143, 255, .5) 62%, transparent 80%);
  opacity: 0;
  transition: opacity .9s ease .25s;
}
.imp-door {
  position: absolute;
  bottom: 0;
  width: 30.5%;
  aspect-ratio: 340 / 900;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .6));
  transition: transform 1.1s cubic-bezier(.6, .05, .25, 1) .2s, filter 1.1s ease .2s;
  will-change: transform;
}
.imp-door--left { left: 19.4%; background-image: url("img/login/porta-esquerda.webp"); transform-origin: 13% 50%; }
.imp-door--right { right: 19.4%; background-image: url("img/login/porta-direita.webp"); transform-origin: 87% 50%; }
.imp-arch {
  position: absolute;
  inset: 0;
  background: url("img/login/portao-arco.webp") center / 100% 100% no-repeat;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .7));
  pointer-events: none;
}

.imp-guard {
  position: absolute;
  bottom: -2%;
  width: 37%;
  aspect-ratio: 522 / 900;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .7));
  z-index: 4;
  transition: transform .9s cubic-bezier(.5, 0, .2, 1);
}
.imp-guard--left { left: -4%; background-image: url("img/login/guarda-1.webp"); transform: scaleX(-1); }
.imp-guard--right { right: -4%; background-image: url("img/login/guarda-2.webp"); }

/* Lanças cruzadas diante do portão. */
.imp-spear {
  position: absolute;
  left: 50%;
  top: 6%;
  height: 92%;
  aspect-ratio: 84 / 1000;
  margin-left: -3.1%;
  background: url("img/login/lanca.webp") center / 100% 100% no-repeat;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .7));
  z-index: 5;
  transform-origin: 50% 62%;
  transition: transform .8s cubic-bezier(.6, 0, .2, 1), opacity .5s ease .45s;
}
.imp-spear--left { transform: rotate(-34deg); }
.imp-spear--right { transform: rotate(34deg) scaleX(-1); }

.imp-scene-status {
  position: absolute;
  left: 50%;
  top: 34%;
  z-index: 6;
  transform: translate(-50%, -50%);
  width: 78%;
  text-align: center;
  pointer-events: none;
}
.imp-scene-status .imp-msg {
  display: none;
  font-family: var(--imp-font-display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.15;
  letter-spacing: .04em;
  color: var(--imp-ice);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .9), 0 0 18px rgba(8, 123, 255, .6);
}
.imp-lock {
  display: none;
  width: 58px;
  height: 58px;
  margin: 0 auto 10px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  color: var(--imp-gold-light);
  font-size: 24px;
  background: radial-gradient(circle, #1D5BB0, #0B2347 70%);
  border: 2px solid var(--imp-gold);
  box-shadow: 0 0 22px rgba(8, 123, 255, .8), 0 0 50px rgba(8, 123, 255, .4);
}
.imp-progress {
  display: none;
  height: 12px;
  margin: 12px auto 0;
  width: 86%;
  border-radius: 999px;
  border: 1px solid var(--imp-gold);
  background: rgba(7, 22, 47, .85);
  overflow: hidden;
}
.imp-progress > i {
  display: block;
  height: 100%;
  width: 40%;
  border-radius: 999px;
  background: linear-gradient(90deg, #087BFF, #7CC4FF, #087BFF);
  box-shadow: 0 0 10px rgba(22, 143, 255, .9);
  animation: imp-progress 1.1s ease-in-out infinite;
}
@keyframes imp-progress {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(260%); }
}

/* Estado B — verificando. */
.imp-login[data-state="verifying"] .imp-msg--verifying,
.imp-login[data-state="verifying"] .imp-lock,
.imp-login[data-state="verifying"] .imp-progress { display: flex; }
.imp-login[data-state="verifying"] .imp-progress { display: block; }
.imp-login[data-state="verifying"] .imp-msg--verifying { display: block; }
.imp-login[data-state="verifying"] .imp-spear { filter: drop-shadow(0 0 8px rgba(22, 143, 255, .9)); }

/* Estado C — acesso liberado (só depois da resposta real do servidor). */
.imp-login[data-state="granted"] .imp-msg--granted { display: block; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .9), 0 0 22px rgba(255, 215, 122, .9); }
.imp-login[data-state="granted"] .imp-spear--left { transform: translateX(-210%) rotate(0deg); opacity: 0; }
.imp-login[data-state="granted"] .imp-spear--right { transform: translateX(210%) rotate(0deg) scaleX(-1); opacity: 0; }
.imp-login[data-state="granted"] .imp-guard--left { transform: scaleX(-1) translateX(14%); }
.imp-login[data-state="granted"] .imp-guard--right { transform: translateX(14%); }
.imp-login[data-state="granted"] .imp-door--left { transform: rotateY(-78deg); filter: brightness(.7); }
.imp-login[data-state="granted"] .imp-door--right { transform: rotateY(78deg); filter: brightness(.7); }
.imp-login[data-state="granted"] .imp-gate-light::before { opacity: 1; }
.imp-login[data-state="granted"] .imp-login-card { opacity: 0; transform: translateY(40px); pointer-events: none; }

/* Estado D — acesso recusado: tudo continua fechado, só um tremor nas lanças. */
.imp-login[data-state="denied"] .imp-spear--left { animation: imp-deny-l .45s ease; }
.imp-login[data-state="denied"] .imp-spear--right { animation: imp-deny-r .45s ease; }
@keyframes imp-deny-l { 0%, 100% { transform: rotate(-34deg); } 30% { transform: rotate(-30deg); } 60% { transform: rotate(-37deg); } }
@keyframes imp-deny-r { 0%, 100% { transform: rotate(34deg) scaleX(-1); } 30% { transform: rotate(30deg) scaleX(-1); } 60% { transform: rotate(37deg) scaleX(-1); } }

/* Cartão do formulário. */
.imp-login-card {
  position: relative;
  z-index: 7;
  width: calc(100% - 28px);
  max-width: 440px;
  /* Sobe ~40% da altura da cena: o topo do cartão fica na altura das mãos dos guardas. */
  margin-top: calc(min(100vw, 470px) * -0.4);
  padding: 18px 16px 16px;
  background: linear-gradient(180deg, rgba(11, 35, 71, .62) 0%, rgba(7, 22, 47, .84) 45%, rgba(7, 22, 47, .92) 100%) !important;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  transition: opacity .5s ease, transform .6s ease;
}
/* Enquanto verifica, o cartão fica mais transparente para o portão aparecer por trás. */
.imp-login[data-state="verifying"] .imp-login-card { opacity: .55; }
.imp-login-card h1 {
  margin: 0;
  text-align: center;
  font-family: var(--imp-font-display);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--imp-gold-light);
  text-shadow: 0 2px 8px rgba(0, 0, 0, .6);
}
.imp-login-card > p { margin: 6px 0 14px; text-align: center; color: #C9D3E6; font-size: 14px; }
.imp-field { position: relative; margin-bottom: 12px; }
.imp-field > i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #AFC2E3;
  font-size: 17px;
  line-height: 1;
  pointer-events: none;
}
.imp-field .login-label { width: 100%; padding: 0 48px 0 44px !important; min-height: 50px; }
.imp-eye {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 9px;
  background: none;
  color: #AFC2E3;
  font-size: 18px;
  cursor: pointer;
}
.imp-login-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 0 14px; font-size: 13.5px; }
.imp-check { display: flex; align-items: center; gap: 8px; color: #C9D3E6; font-weight: 500; cursor: pointer; margin: 0; }
.imp-check input { width: 18px; height: 18px; accent-color: var(--imp-electric); margin: 0; }
.imp-login-row a { color: var(--imp-accent); font-weight: 600; }
.imp-login-card .login-btn {
  width: 100%;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 17px !important;
  background: var(--imp-btn-blue) !important;
  color: #fff !important;
  border: 1px solid rgba(160, 210, 255, .7) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
  box-shadow: 0 8px 22px rgba(8, 123, 255, .45), inset 0 1px 0 rgba(255, 255, 255, .35) !important;
}
.imp-login-card .login-btn:hover { color: #fff !important; }
.imp-login-alt { display: flex; gap: 8px; margin-top: 10px; }
.imp-login-alt .btn { flex: 1; min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; }
.imp-login-card .alert { margin-bottom: 12px; }
.imp-login-seal {
  margin-top: 14px;
  padding: 10px 12px;
  text-align: center;
  border-radius: var(--imp-radius-sm);
  border: 1px solid var(--imp-gold-line);
  background: rgba(7, 22, 47, .7);
}
.imp-login-seal b { display: block; font-family: var(--imp-font-display); color: var(--imp-gold-light); letter-spacing: .12em; font-size: 14px; }
.imp-login-seal small { color: var(--imp-muted); letter-spacing: .24em; font-size: 10.5px; }

/* Seções de apresentação abaixo do login. */
.imp-home { position: relative; z-index: 2; width: 100%; max-width: 1080px; margin: 0 auto; padding: 10px 14px 40px; }
.imp-home h2 { margin: 30px 0 14px; text-align: center; color: var(--imp-ice); font-size: 22px; }
.imp-home h2 b { color: var(--imp-gold-light); }
.imp-home-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 768px) { .imp-home-grid { grid-template-columns: repeat(3, 1fr); } }
.imp-home-card { padding: 16px; }
.imp-home-card b { display: flex; align-items: center; gap: 10px; color: var(--imp-ice); font-size: 15.5px; margin-bottom: 6px; }
.imp-home-card b i { color: var(--imp-gold); font-size: 20px; }
.imp-home-card p { margin: 0; color: var(--imp-muted); font-size: 14px; line-height: 1.5; }
.imp-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; counter-reset: step; }
@media (min-width: 768px) { .imp-steps { grid-template-columns: repeat(4, 1fr); } }
.imp-steps div { counter-increment: step; padding: 14px; text-align: center; color: var(--imp-ice); font-weight: 700; }
.imp-steps div::before { content: counter(step); display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin: 0 auto 8px; border-radius: 50%; background: var(--imp-btn-gold); color: #1A1206; font-weight: 800; }
.imp-faq { display: flex; flex-direction: column; gap: 10px; }
.imp-faq details { padding: 0; }
.imp-faq summary { list-style: none; cursor: pointer; padding: 14px 44px 14px 16px; color: var(--imp-ice); font-weight: 700; position: relative; }
.imp-faq summary::-webkit-details-marker { display: none; }
.imp-faq summary::after { content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--imp-gold-light); font-size: 22px; }
.imp-faq details[open] summary::after { content: "–"; }
.imp-faq details p { margin: 0; padding: 0 16px 14px; color: var(--imp-muted); line-height: 1.55; }

@media (min-width: 768px) {
  .imp-login-logo { width: 180px; }
  .imp-scene { margin-top: -40px; }
}

/* ---------- Movimento reduzido ------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Tutoriais ------------------------------------------------------ */

/* Botão no lado esquerdo do cabeçalho, ao lado do menu. */
.imp-tut-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 54px;
  height: 46px;
  flex: none;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(18, 61, 120, .55), rgba(7, 22, 47, .9));
  border: 1px solid var(--imp-gold-line);
  box-shadow: inset 0 1px 0 rgba(255, 215, 122, .2);
  color: var(--imp-gold-light) !important;
  text-decoration: none !important;
  transition: box-shadow .2s ease;
}
.imp-tut-btn i { font-size: 18px; line-height: 1; }
.imp-tut-btn span { font-size: 9.5px; font-weight: 800; letter-spacing: .02em; color: var(--imp-ice); line-height: 1; }
.imp-tut-btn:hover, .imp-tut-btn.active { box-shadow: var(--imp-glow-gold); }
@media (max-width: 359px) {
  .imp-tut-btn { width: 46px; height: 40px; }
  .imp-tut-btn span { font-size: 8.5px; }
}

/* Aviso discreto em Meus Pedidos, apontando para o botão. */
.imp-tut-tip {
  position: fixed;
  top: calc(var(--imp-header-h) + 10px);
  left: 12px;
  z-index: 1001;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: min(300px, calc(100vw - 24px));
  padding: 12px 34px 12px 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, #0F2E5C, #07162F);
  border: 1px solid var(--imp-gold-light);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .5), 0 0 16px rgba(214, 173, 85, .25);
  color: var(--imp-ice);
  font-size: 13.5px;
  line-height: 1.4;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .35s ease, transform .35s ease;
}
.imp-tut-tip.is-on { opacity: 1; transform: none; }
.imp-tut-tip::before {
  content: "";
  position: absolute;
  top: -7px;
  left: var(--tip-arrow, 20px);
  width: 12px;
  height: 12px;
  background: #0F2E5C;
  border-left: 1px solid var(--imp-gold-light);
  border-top: 1px solid var(--imp-gold-light);
  transform: rotate(45deg);
}
.imp-tut-tip > i { color: var(--imp-gold-light); font-size: 20px; margin-top: 1px; }
.imp-tut-tip b { color: var(--imp-gold-light); }
.imp-tut-tip-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--imp-muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.imp-tut-tip-close:hover { color: var(--imp-ice); }

/* Página de tutoriais. */
.imp-tuts { display: flex; flex-direction: column; gap: 14px; }
.imp-tuts-hero {
  padding: 16px;
  background:
    linear-gradient(100deg, rgba(7, 22, 47, .96) 30%, rgba(7, 22, 47, .55)),
    url("img/login/fundo-castelo.webp") center 35% / cover no-repeat !important;
}
.imp-tuts-hero h2 { margin: 12px 0 8px; font-size: 22px; line-height: 1.25; color: var(--imp-ice); }
.imp-tuts-hero p { margin: 0; color: #C9D3E6; line-height: 1.55; font-size: 14.5px; }
.imp-tuts-filter {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.imp-tuts-filter::-webkit-scrollbar { display: none; }
.imp-tuts-filter .imp-net-chip { width: auto; padding: 9px 14px; font-size: 13px; white-space: nowrap; }
.imp-tuts-group .imp-title { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.imp-tuts-group .imp-title small { margin-left: auto; color: var(--imp-muted); font-size: 12px; font-weight: 600; }
.imp-tuts-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 600px) { .imp-tuts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .imp-tuts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.imp-tut-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0 !important;
  overflow: hidden;
  text-align: left;
  color: inherit;
  cursor: pointer;
  transition: box-shadow .2s ease, transform .15s ease;
}
.imp-tut-card:hover { box-shadow: var(--imp-glow-gold); transform: translateY(-1px); }
.imp-tut-thumb { position: relative; display: block; aspect-ratio: 16 / 9; background: #020814; overflow: hidden; }
.imp-tut-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.imp-tut-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--imp-gold-light), var(--imp-gold));
  color: #07162F;
  font-size: 22px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .55);
}
.imp-tut-play i { margin-left: 3px; line-height: 1; }
.imp-tut-text { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.imp-tut-text b { color: var(--imp-ice); font-size: 15px; line-height: 1.3; }
.imp-tut-text small { color: #AFC0DA; font-size: 13px; line-height: 1.45; }
.imp-tuts-empty { padding: 28px 18px; text-align: center; color: #C9D3E6; }
.imp-tuts-empty i { display: block; font-size: 34px; color: var(--imp-gold); margin-bottom: 10px; }
.imp-tuts-empty p { margin: 0; line-height: 1.55; }

/* Player do vídeo (abre por cima da página). */
.imp-video-modal {
  position: fixed;
  inset: 0;
  z-index: 10070;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(2, 8, 20, .86);
}
.imp-video-box { width: min(960px, 100%); }
.imp-video-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; color: var(--imp-ice); font-weight: 700; }
.imp-video-head span { flex: 1; min-width: 0; }
.imp-video-head button {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--imp-gold-line);
  background: rgba(7, 22, 47, .9);
  color: var(--imp-gold-light);
  font-size: 18px;
  cursor: pointer;
}
.imp-video-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; border: 1px solid var(--imp-gold-line); background: #000; }
.imp-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- WhatsApp: só o botão, parado, com "Suporte" embaixo ----------- */

.wpp-btn .wpp-popup,
.wpp-btn .wpp-ring,
.wpp-btn .wpp-badge { display: none !important; }
.wpp-btn, .wpp-btn * { animation: none !important; }
.wpp-btn .wpp-fab { width: 56px !important; height: 56px !important; text-decoration: none; }
.wpp-btn .wpp-fab:hover { transform: none !important; }
.imp-wpp-label {
  display: block;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(7, 22, 47, .92);
  border: 1px solid rgba(37, 211, 102, .6);
  color: #E8FFF0;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  letter-spacing: .02em;
}
.wpp-btn > div[style*="relative"] { display: flex; flex-direction: column; align-items: center; }

/* Qualidade do serviço (entre "Serviços" e "Link"): verde excelente, amarelo boa, vermelho ruim. */
/* ---------- Baixar aplicativo do painel ------------------------------------- */

.imp-app { display: flex; flex-direction: column; gap: 14px; }
.imp-app-card { padding: 0 !important; overflow: hidden; }
.imp-app-image { display: flex; justify-content: center; background: #020814; }
.imp-app-image img { display: block; width: 100%; max-height: 460px; object-fit: contain; }
.imp-app-image.is-default {
  padding: 26px 0 18px;
  background:
    radial-gradient(circle at 50% 40%, rgba(8, 123, 255, .35), transparent 60%),
    linear-gradient(180deg, rgba(7, 22, 47, .3), rgba(7, 22, 47, .95)),
    url("img/login/fundo-castelo.webp") center 30% / cover no-repeat;
}
.imp-app-image.is-default img {
  width: 150px;
  height: 150px;
  border-radius: 34px;
  border: 2px solid var(--imp-gold-line);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .55), 0 0 26px rgba(8, 123, 255, .4);
}
.imp-app-body { padding: 18px 16px; display: flex; flex-direction: column; gap: 10px; }
.imp-app-body h2 { margin: 4px 0 0; font-size: 21px; line-height: 1.3; color: var(--imp-ice); }
.imp-app-body > p { margin: 0; color: #C9D3E6; font-size: 14.5px; line-height: 1.6; }
.imp-app-perks { list-style: none; margin: 2px 0 4px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.imp-app-perks li { display: flex; align-items: center; gap: 9px; color: #DCE4F2; font-size: 14px; }
.imp-app-perks i { color: var(--imp-gold-light); font-size: 16px; line-height: 1; }
.imp-app-install { min-height: 54px; display: flex !important; align-items: center; justify-content: center; gap: 10px; font-size: 17px; font-weight: 800; }
.imp-app-done { margin: 0; padding: 12px; border-radius: 12px; background: rgba(46, 204, 113, .14); border: 1px solid rgba(46, 204, 113, .55); color: #7CF0A8 !important; font-weight: 700; }
.imp-app-steps { padding: 16px; }
.imp-app-intro { margin: 8px 0 12px; color: #C9D3E6; line-height: 1.55; font-size: 14.5px; }
.imp-app-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.imp-app-list li { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 12px; background: rgba(5, 15, 34, .7); border: 1px solid rgba(214, 173, 85, .25); color: #E6ECF7; font-size: 14.5px; line-height: 1.5; }
.imp-app-list b { color: var(--imp-gold-light); }
.imp-app-num {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--imp-gold-light), var(--imp-gold));
  color: #07162F;
  font-weight: 900;
  font-size: 14px;
}
.imp-app-ico { display: inline-block; width: 20px; height: 20px; vertical-align: -4px; color: #4DA3FF; }
.imp-app-copy { width: 100%; min-height: 46px; margin-top: 12px; display: flex !important; align-items: center; justify-content: center; gap: 8px; }
.imp-app-tip { margin: 12px 0 0; color: var(--imp-muted); font-size: 13px; line-height: 1.5; }

/* Meus Pedidos: botão "Compartilhar dados com o suporte" (logo do WhatsApp recortado à direita). */
.imp-support-share {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  margin: 14px 0 6px;
  padding: 10px 72px 10px 16px;
  font-family: var(--imp-font, 'Inter', sans-serif) !important;
  border-radius: 14px;
  border: 1px solid rgba(37, 211, 102, .65);
  background: linear-gradient(90deg, rgba(7, 22, 47, .95) 0%, rgba(18, 61, 120, .7) 60%, rgba(37, 211, 102, .35) 100%);
  color: #F3F6FC;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .08);
  transition: box-shadow .2s ease, transform .15s ease;
}
.imp-support-share:hover { box-shadow: 0 0 0 1px rgba(37, 211, 102, .6), 0 0 22px rgba(37, 211, 102, .35); }
.imp-support-share:active { transform: scale(.99); }
.imp-support-share > i { flex: none; color: var(--imp-gold-light); font-size: 20px; line-height: 1; }
.imp-support-share > span { position: relative; z-index: 1; line-height: 1.25; }
.imp-support-wa {
  position: absolute;
  right: -16px;
  top: 50%;
  width: 78px;
  height: 78px;
  transform: translateY(-50%) rotate(-12deg);
  color: #25D366;
  opacity: .95;
  filter: drop-shadow(0 0 10px rgba(37, 211, 102, .45));
  pointer-events: none;
}
.imp-support-swal .swal2-confirm { background: linear-gradient(180deg, #2EE07A, #1DAA55) !important; color: #04210F !important; font-weight: 800; }

/* Faixa fina de uma linha, com a cor só no contorno, no ícone e no nome do nível. */
.imp-qlevel {
  display: flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  max-width: 100%;
  margin: 12px 0 2px;
  padding: 5px 12px 5px 10px;
  border-radius: 10px;
  flex-wrap: wrap;
  row-gap: 0;
  border: 1px solid var(--q-line);
  background: var(--q-soft);
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--imp-muted);
}
.imp-qlevel i { color: var(--q-line); font-size: 13px; line-height: 1; flex: none; }
.imp-qlevel span { white-space: nowrap; }
.imp-qlevel b { color: var(--q-text); font-weight: 800; }
.imp-qlevel.is-excellent { --q-line: rgba(47, 210, 122, .75); --q-soft: rgba(47, 210, 122, .1); --q-text: #7CF0A8; }
.imp-qlevel.is-good { --q-line: rgba(255, 226, 122, .7); --q-soft: rgba(255, 226, 122, .08); --q-text: #FFE9A3; }
.imp-qlevel.is-bad { --q-line: rgba(255, 77, 77, .75); --q-soft: rgba(255, 77, 77, .1); --q-text: #FF8A8A; }
.imp-qlevel.is-bad_drops { --q-line: rgba(224, 36, 36, .85); --q-soft: rgba(224, 36, 36, .14); --q-text: #FF7070; }

/* Link incorreto no Novo Pedido: o campo balança e fica vermelho até ser corrigido. */
@keyframes imp-shake {
  0%, 100% { transform: translateX(0); }
  15%, 55% { transform: translateX(-8px); }
  35%, 75% { transform: translateX(8px); }
  90% { transform: translateX(-3px); }
}
.imp-shake { animation: imp-shake .5s ease; }
.imp-field-error {
  border-color: #FF3B3B !important;
  box-shadow: 0 0 0 3px rgba(255, 59, 59, .25), 0 0 14px rgba(255, 59, 59, .35) !important;
}
.imp-link-swal .swal2-popup { border: 2px solid #FF3B3B !important; }
.imp-link-swal .swal2-html-container b { color: #FFD77A; }
.imp-link-swal .swal2-deny {
  background: transparent !important;
  border: 1px solid rgba(214, 173, 85, .6) !important;
  color: #C9D3E6 !important;
  font-weight: 600;
}

/* Nomes longos do menu lateral quebram em duas linhas em vez de cortar. */
.page-sidebar .menu-item span { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.2; }

/* ---------- Foto ampliada --------------------------------------------------- */

.imp-image-frame { display: flex; align-items: center; justify-content: center; max-height: calc(100vh - 140px); border-radius: 14px; overflow: hidden; border: 1px solid var(--imp-gold-line); background: #020814; }
.imp-image-frame img { display: block; max-width: 100%; max-height: calc(100vh - 140px); object-fit: contain; }
.imp-image-nav { display: flex; justify-content: center; gap: 14px; margin-top: 12px; }
.imp-image-nav button {
  width: 52px; height: 44px; border-radius: 12px;
  border: 1px solid var(--imp-gold-line); background: rgba(7, 22, 47, .9);
  color: var(--imp-gold-light); font-size: 26px; line-height: 1; cursor: pointer;
}

/* ---------- Qualidade dos perfis (Novo Pedido) ----------------------------- */

.imp-quality {
  margin-top: 14px;
  padding: 14px;
  border-radius: var(--imp-radius, 16px);
  border: 1px solid var(--imp-gold-line);
  background: linear-gradient(180deg, rgba(18, 61, 120, .35), rgba(7, 22, 47, .85));
}
.imp-quality-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-bottom: 10px; }
.imp-quality-head i { color: var(--imp-gold-light); font-size: 18px; }
.imp-quality-head span { font-family: var(--imp-display, 'Cinzel', serif); font-weight: 800; color: var(--imp-gold-light); font-size: 15px; letter-spacing: .03em; }
.imp-quality-head small { margin-left: auto; color: var(--imp-muted); font-size: 12px; }
.imp-quality-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 600px) { .imp-quality-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.imp-quality-grid button {
  display: block; padding: 0; aspect-ratio: 9 / 16; overflow: hidden; cursor: zoom-in;
  border-radius: 10px; border: 1px solid rgba(255, 215, 122, .35); background: #020814;
  transition: box-shadow .2s ease, transform .15s ease;
}
.imp-quality-grid button:hover { box-shadow: var(--imp-glow-gold); transform: translateY(-1px); }
.imp-quality-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Outros Serviços ------------------------------------------------- */

.imp-prods { display: flex; flex-direction: column; gap: 14px; }
.imp-prod { padding: 0 !important; overflow: hidden; }
.imp-prod-media { position: relative; background: #020814; }
.imp-prod-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.imp-prod-track::-webkit-scrollbar { display: none; }
.imp-prod-slide { flex: 0 0 100%; scroll-snap-align: center; aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; }
.imp-prod-slide video, .imp-prod-slide img { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.imp-prod-slide video { object-fit: contain; }
.imp-prod-zoom { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.imp-prod-dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.imp-prod-dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .45); transition: background .2s ease, transform .2s ease; }
.imp-prod-dots span.is-on { background: var(--imp-gold-light); transform: scale(1.25); }
.imp-prod-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.imp-prod-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.imp-prod-head h3 { margin: 0; font-size: 19px; line-height: 1.3; color: var(--imp-ice); }
.imp-prod-price {
  flex: none; padding: 5px 12px; border-radius: 999px;
  background: linear-gradient(180deg, var(--imp-gold-light), var(--imp-gold));
  color: #07162F; font-weight: 800; font-size: 14px;
}
.imp-prod-desc { color: #C9D3E6; font-size: 14.5px; line-height: 1.6; overflow-wrap: anywhere; }
.imp-prod-cta { min-height: 48px; display: flex !important; align-items: center; justify-content: center; gap: 8px; font-weight: 800; }
@media (min-width: 992px) {
  .imp-prod { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .imp-prod-media { align-self: stretch; }
  .imp-prod-slide { aspect-ratio: auto; height: 100%; min-height: 320px; }
}

/* ---------- Divulgação revendedores ----------------------------------------- */

.imp-resell-card { padding: 0 !important; overflow: hidden; }
.imp-resell-image { display: block; width: 100%; padding: 0; border: 0; background: #020814; cursor: zoom-in; }
.imp-resell-image img { display: block; width: 100%; max-height: 520px; object-fit: contain; margin: 0 auto; }
.imp-resell-body { padding: 18px 16px; display: flex; flex-direction: column; gap: 10px; }
.imp-resell-body h2 { margin: 4px 0 0; font-size: 21px; line-height: 1.3; color: var(--imp-ice); }
.imp-resell-body p { margin: 0; color: #C9D3E6; font-size: 14.5px; line-height: 1.6; }
.imp-resell-btn {
  display: flex !important; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; margin-top: 6px; border-radius: 14px !important;
  background: linear-gradient(180deg, #37AEE2, #1E96C8) !important;
  border: 1px solid rgba(255, 255, 255, .35) !important;
  color: #fff !important; font-size: 16px; font-weight: 800;
  box-shadow: 0 8px 22px rgba(30, 150, 200, .4);
}
.imp-resell-btn svg { width: 22px; height: 22px; }
.imp-resell-btn:hover { filter: brightness(1.08); }
.imp-resell-soon { color: var(--imp-muted) !important; font-style: italic; }
@media (min-width: 992px) {
  .imp-resell-card { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; }
}

/* ---------- PIX FastDePix (janela do QR Code) ------------------------------- */

.imp-pix-qr { display: flex; justify-content: center; margin: 4px auto 14px; padding: 12px; width: max-content; max-width: 100%; border-radius: 14px; background: #fff; }
.imp-pix-qr img, .imp-pix-qr canvas { display: block; width: 240px; max-width: 100%; height: auto; }
.imp-pix-label { margin: 0 0 6px; font-weight: 700; }
.imp-pix-code { width: 100%; height: 70px !important; font-size: 12px !important; font-family: ui-monospace, Consolas, monospace; resize: none; }
.imp-pix-copy { width: 100%; min-height: 46px; margin-top: 10px; font-weight: 800; }
.imp-pix-tips { margin: 14px 0 8px; padding-left: 18px; text-align: left; font-size: 13px; line-height: 1.5; }
.imp-pix-info { display: block; color: var(--imp-muted, #8FA3C4); }
.imp-pix-status { margin-bottom: 12px; padding: 10px; border-radius: 10px; background: rgba(46, 204, 113, .16); border: 1px solid rgba(46, 204, 113, .6); color: #7CF0A8; font-weight: 700; }