/* ==========================================================================
   PAINEL TURBO — MOTION & POLISH LAYER
   Camada puramente visual. Nenhuma regra de negocio depende deste arquivo.
   Carregado por ultimo: sobrepoe app.css e app-claudio.css.
   Keyframes com prefixo ptm* para nao colidir com app-claudio.css.
   ========================================================================== */

:root {
  /* Duracao */
  --mo-micro: 140ms;
  --mo-fast: 190ms;
  --mo-base: 260ms;
  --mo-page: 320ms;
  --mo-modal: 380ms;

  /* Easing */
  --ease-out-premium: cubic-bezier(.22, 1, .36, 1);
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-in-quick: cubic-bezier(.4, 0, 1, 1);

  /* Elevacao */
  --elev-1: 0 1px 2px rgba(0,0,0,.28);
  --elev-2: 0 8px 24px rgba(0,0,0,.34);
  --elev-3: 0 18px 48px rgba(0,0,0,.46);

  /* Superficies (hierarquia) */
  --lift-1: rgba(255,255,255,.022);
  --lift-2: rgba(255,255,255,.038);
  --line-soft: rgba(168,139,250,.14);
  --line-strong: rgba(168,139,250,.30);

  /* Foco acessivel */
  --focus-ring: 0 0 0 2px #070814, 0 0 0 4px rgba(168,85,247,.62);

  --z-toast: 900;
}

/* ==========================================================================
   1. TRANSICAO DE ROTA
   ========================================================================== */

.view.active {
  animation: ptmViewIn 200ms var(--ease-out-premium) both;
}

@keyframes ptmViewIn {
  from { opacity: 0; transform: translate3d(8px, 0, 0); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   2. SIDEBAR — indicador deslizante (shared active indicator)
   ========================================================================== */

.side-nav { position: relative; }

.nav-glide {
  position: absolute;
  left: 0;
  width: 100%;
  border-radius: var(--radius-sm, 14px);
  background: var(--gradient);
  box-shadow: 0 8px 24px rgba(168,85,247,.38);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transform: translate3d(0, var(--glide-y, 0px), 0);
  height: var(--glide-h, 42px);
  transition:
    transform var(--mo-base) var(--ease-out-premium),
    height var(--mo-base) var(--ease-out-premium),
    opacity var(--mo-fast) var(--ease-standard);
}

.nav-glide.ready { opacity: 1; }

.nav-glide::after {
  content: '';
  position: absolute;
  left: -14px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 21px;
  border-radius: 0 3px 3px 0;
  background: #ec4899;
  box-shadow: 0 0 14px 1px rgba(236,72,153,.9);
}

/* o link ativo perde o fundo: quem pinta agora e o glide */
.side-nav .nav-glide ~ .side-link { position: relative; z-index: 1; }

.side-nav:has(.nav-glide.ready) .side-link.active {
  background: transparent;
  box-shadow: none;
  color: #fff;
}

.side-nav:has(.nav-glide.ready) .side-link.active::before { display: none; }

.side-link {
  transition:
    color var(--mo-fast) var(--ease-standard),
    background-color var(--mo-fast) var(--ease-standard),
    transform var(--mo-fast) var(--ease-out-premium);
}

.side-link svg {
  transition: transform var(--mo-base) var(--ease-out-premium), opacity var(--mo-fast) linear;
}

@media (hover: hover) and (pointer: fine) {
  .side-link:not(.active):hover {
    background: rgba(168,85,247,.07);
    transform: translate3d(2px, 0, 0);
  }
  .side-link:not(.active):hover svg { opacity: 1; transform: scale(1.06); }
}

.side-link.active svg { opacity: 1; transform: scale(1.08); }

.side-link:focus-visible,
.bottom-link:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ==========================================================================
   3. SEGMENTED CONTROL — 7D / 30D / 3M / 12M
   ========================================================================== */

.period-tabs, .period-strip { position: relative; }

.seg-glide {
  position: absolute;
  top: var(--seg-y, 0px);
  left: 0;
  height: var(--seg-h, 26px);
  width: var(--seg-w, 40px);
  border-radius: 999px;
  background: var(--gradient);
  box-shadow: 0 4px 14px rgba(168,85,247,.35);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transform: translate3d(var(--seg-x, 0px), 0, 0);
  transition:
    transform var(--mo-base) var(--ease-out-premium),
    width var(--mo-base) var(--ease-out-premium),
    opacity var(--mo-fast) linear;
}

.seg-glide.ready { opacity: 1; }

.period-btn { position: relative; z-index: 1; }

.period-tabs:has(.seg-glide.ready) .period-btn.active,
.period-strip:has(.seg-glide.ready) .period-btn.active {
  background: transparent;
  box-shadow: none;
  border-color: transparent;
  color: #fff;
}

.period-btn { transition: color var(--mo-fast) var(--ease-standard); }

.period-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ==========================================================================
   4. CARDS — hierarquia, hover e spotlight
   ========================================================================== */

.hero-card,
.kpi-card,
.rail-card,
.panel.glass,
.house-card {
  transition:
    transform var(--mo-base) var(--ease-out-premium),
    box-shadow var(--mo-base) var(--ease-out-premium),
    border-color var(--mo-base) var(--ease-standard),
    background-color var(--mo-base) var(--ease-standard);
}

/* nivel 1 — saldo principal */
.hero-card {
  border-color: var(--line-strong);
  box-shadow: var(--elev-3), inset 0 1px 0 rgba(255,255,255,.055);
}

/* nivel 2/3 */
.kpi-card, .panel.glass, .house-card {
  box-shadow: var(--elev-2), inset 0 1px 0 rgba(255,255,255,.035);
}

@media (hover: hover) and (pointer: fine) {
  .hero-card:hover {
    transform: translate3d(0, -2px, 0);
    box-shadow: var(--elev-3), 0 0 46px rgba(168,85,247,.26);
    border-color: rgba(168,139,250,.36);
  }
  .panel.glass:hover,
  .house-card:hover {
    transform: translate3d(0, -2px, 0);
    border-color: rgba(168,139,250,.26);
    box-shadow: var(--elev-2), 0 0 26px rgba(168,85,247,.16);
  }
}

/* spotlight pointer — luz radial discreta seguindo o mouse */
.pt-spot { position: relative; isolation: isolate; }

.pt-spot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  background: radial-gradient(
    360px circle at var(--sx, 50%) var(--sy, 50%),
    rgba(168,85,247,.13),
    transparent 62%
  );
  transition: opacity var(--mo-base) var(--ease-standard);
}

@media (hover: hover) and (pointer: fine) {
  .pt-spot.pt-spot-on::after { opacity: 1; }
}

.pt-spot > * { position: relative; z-index: 1; }

/* linhas de tabela / listas */
.house-row, .history-item {
  transition:
    background-color var(--mo-fast) var(--ease-standard),
    transform var(--mo-fast) var(--ease-out-premium);
  border-radius: 12px;
}

@media (hover: hover) and (pointer: fine) {
  .house-row:hover, .history-item:hover {
    background: var(--lift-1);
    transform: translate3d(2px, 0, 0);
  }
}

/* ==========================================================================
   5. BOTOES
   ========================================================================== */

.btn, .util-btn, .icon-btn, .link-btn, .max-btn, .pix-type {
  transition:
    transform var(--mo-micro) var(--ease-out-premium),
    box-shadow var(--mo-fast) var(--ease-standard),
    background-color var(--mo-fast) var(--ease-standard),
    border-color var(--mo-fast) var(--ease-standard),
    color var(--mo-fast) var(--ease-standard),
    filter var(--mo-fast) var(--ease-standard);
}

.btn.gradient {
  background: var(--gradient);
  background-size: 160% 160%;
  background-position: 0% 50%;
  transition:
    transform var(--mo-micro) var(--ease-out-premium),
    box-shadow var(--mo-fast) var(--ease-standard),
    background-position var(--mo-base) var(--ease-standard),
    filter var(--mo-fast) var(--ease-standard);
}

@media (hover: hover) and (pointer: fine) {
  .btn.gradient:hover:not(:disabled) {
    transform: translate3d(0, -1px, 0);
    background-position: 100% 50%;
    box-shadow: 0 10px 30px rgba(124,58,237,.5), 0 0 22px rgba(236,72,153,.22);
    filter: brightness(1.04);
  }
  .btn.outline:hover:not(:disabled),
  .btn.ghost:hover:not(:disabled) {
    background: var(--lift-1);
    border-color: var(--line-strong);
  }
  .icon-btn:hover { background: var(--lift-2); border-color: var(--line-strong); }
  .util-btn:hover { background: var(--lift-1); }
}

.btn:active:not(:disabled),
.util-btn:active,
.icon-btn:active { transform: scale(.985); }

.btn:focus-visible,
.icon-btn:focus-visible,
.util-btn:focus-visible,
.link-btn:focus-visible,
.max-btn:focus-visible,
.pix-type:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.btn:disabled { filter: grayscale(.3); }

/* estado de carregamento — largura estavel */
.btn.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.btn.is-loading::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.32);
  border-top-color: #fff;
  animation: ptmSpin .7s linear infinite;
}

@keyframes ptmSpin { to { transform: rotate(360deg); } }

/* icone girando no "Atualizar dados" */
.util-btn.is-refreshing svg { animation: ptmSpin .8s linear infinite; }

/* ==========================================================================
   6. INPUTS
   ========================================================================== */

.field input, .field select, .field textarea {
  transition:
    border-color var(--mo-fast) var(--ease-standard),
    box-shadow var(--mo-fast) var(--ease-standard),
    background-color var(--mo-fast) var(--ease-standard);
}

.field input:hover:not(:focus),
.field select:hover:not(:focus) { border-color: rgba(168,139,250,.24); }

.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(168,85,247,.17), 0 0 22px rgba(168,85,247,.10);
}

.field.is-error input { border-color: #f87171; box-shadow: 0 0 0 3px rgba(248,113,113,.14); }
.field.is-ok input { border-color: var(--green); box-shadow: 0 0 0 3px rgba(52,211,153,.13); }

.password-toggle {
  transition: opacity var(--mo-fast) var(--ease-standard),
              transform var(--mo-micro) var(--ease-out-premium);
}
.password-toggle:active { transform: scale(.9); }

/* ==========================================================================
   7. TOAST
   ========================================================================== */

.toast {
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  gap: .6rem;
  max-width: min(92vw, 460px);
  padding: .8rem 1.1rem;
  background: rgba(16,16,28,.94);
  border: 1px solid var(--line-soft);
  box-shadow: var(--elev-3);
  backdrop-filter: blur(18px);
  line-height: 1.4;
  animation: ptmToastIn var(--mo-base) var(--ease-out-premium) both;
}

@keyframes ptmToastIn {
  from { opacity: 0; transform: translate(-50%, 12px) scale(.98); }
  to   { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

.toast::before {
  content: '';
  flex: 0 0 auto;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--purple);
  box-shadow: 0 0 12px currentColor;
}

.toast.t-success::before { background: var(--green); box-shadow: 0 0 12px rgba(52,211,153,.9); }
.toast.t-error::before   { background: #f87171; box-shadow: 0 0 12px rgba(248,113,113,.9); }
.toast.t-warn::before    { background: var(--orange); box-shadow: 0 0 12px rgba(251,146,60,.9); }
.toast.t-info::before    { background: var(--cyan); box-shadow: 0 0 12px rgba(56,189,248,.9); }

.toast.t-loading::before {
  background: transparent;
  width: 14px; height: 14px;
  border: 2px solid rgba(168,85,247,.3);
  border-top-color: var(--purple);
  box-shadow: none;
  animation: ptmSpin .7s linear infinite;
}

.toast.t-success { border-color: rgba(52,211,153,.28); }
.toast.t-error   { border-color: rgba(248,113,113,.30); }

/* ==========================================================================
   8. SKELETONS
   ========================================================================== */

.sk {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(255,255,255,.045);
  color: transparent !important;
  pointer-events: none;
}

.sk::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent);
  animation: ptmShimmer 1.35s ease-in-out infinite;
}

@keyframes ptmShimmer { to { transform: translateX(100%); } }

.pt-sk {
  display: grid;
  gap: .55rem;
  padding: 1rem;
  border-radius: 16px;
  background: var(--lift-1);
  border: 1px solid var(--line-soft);
  pointer-events: none;
}

.pt-sk-row {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .65rem .2rem;
  background: none;
  border: none;
  list-style: none;
}

.pt-sk .sk-logo {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: block;
}

.pt-sk .sk-logo.sm { width: 28px; height: 28px; }

.pt-sk .sk-line {
  display: block;
  height: 10px;
  width: 100%;
}

.pt-sk .sk-line.w25 { width: 25%; }
.pt-sk .sk-line.w30 { width: 30%; }
.pt-sk .sk-line.w45 { width: 45%; }
.pt-sk .sk-line.w55 { width: 55%; }
.pt-sk .sk-line.w60 { width: 60%; }
.pt-sk .sk-line.w70 { width: 70%; }
.pt-sk .sk-line.w80 { width: 80%; }
.pt-sk .sk-line.w90 { width: 90%; }
.pt-sk .sk-line.w95 { width: 95%; }

.pt-sk .sk-btn {
  display: block;
  height: 36px;
  width: 100%;
  border-radius: 12px;
  margin-top: .35rem;
}

#heroBalance.sk, #railBalance.sk, .kpi-body strong.sk {
  min-width: 5.5ch;
  display: inline-block;
  border-radius: 8px;
}

.pt-fade-in { animation: ptmFadeIn var(--mo-base) var(--ease-out-premium) both; }
@keyframes ptmFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ==========================================================================
   9. EMPTY STATES
   ========================================================================== */

.empty-state {
  display: grid;
  justify-items: center;
  gap: .55rem;
  padding: 2.6rem 1.25rem;
}

/* so desenha o bloco decorativo quando a tela nao traz o proprio icone */
.empty-state:not(:has(.empty-icon))::before {
  content: '';
  width: 54px; height: 54px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 40%, rgba(168,85,247,.22), transparent 70%),
    var(--lift-2);
  border: 1px solid var(--line-soft);
  box-shadow: inset 0 0 24px rgba(168,85,247,.14);
  margin-bottom: .3rem;
}

/* ==========================================================================
   10. STAGGER REVEAL
   ========================================================================== */

.pt-stagger > * {
  animation: ptmRise 240ms var(--ease-out-premium) both;
  animation-delay: calc(var(--i, 0) * 28ms);
}

@keyframes ptmRise {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   11. NUMEROS / METRICAS
   ========================================================================== */

.hero-value, .rail-big, .rail-balance, .kpi-body strong, .house-balance {
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   12. GRAFICOS
   ========================================================================== */

.area-chart.pt-reveal, .donut-chart.pt-reveal, .kpi-spark.pt-reveal,
.bar-chart.pt-reveal, .wave-chart.pt-reveal {
  animation: ptmChartReveal 720ms var(--ease-out-premium) both;
}

@keyframes ptmChartReveal {
  from { opacity: 0; clip-path: inset(0 100% 0 0); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); }
}

/* ==========================================================================
   13. MODAIS / SHEETS / DROPDOWNS
   ========================================================================== */

.sheet-card, .tutorial-card {
  animation: ptmSheetUp var(--mo-modal) var(--ease-out-premium) both;
}

@keyframes ptmSheetUp {
  from { opacity: 0; transform: translate3d(0, 26px, 0); }
  to   { opacity: 1; transform: none; }
}

.modal-card, .agents-modal-card {
  animation: ptmModalIn var(--mo-modal) var(--ease-out-premium) both;
}

@keyframes ptmModalIn {
  from { opacity: 0; transform: translate3d(0, 6px, 0) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   14. STEPPER DE SAQUE
   ========================================================================== */

.withdraw-steps .step-dot { transition: color var(--mo-base) var(--ease-standard); }

.withdraw-steps .step-dot i {
  transition:
    background-color var(--mo-base) var(--ease-standard),
    color var(--mo-base) var(--ease-standard),
    box-shadow var(--mo-base) var(--ease-standard),
    transform var(--mo-base) var(--ease-out-premium);
}

.withdraw-steps .step-dot.active i {
  transform: scale(1.08);
  box-shadow: 0 0 0 4px rgba(168,85,247,.14);
}

.withdraw-step-panel.active {
  animation: ptmStepIn var(--mo-base) var(--ease-out-premium) both;
}

@keyframes ptmStepIn {
  from { opacity: 0; transform: translate3d(10px, 0, 0); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   15. HEADER
   ========================================================================== */

.app-header {
  transition: background-color var(--mo-base) var(--ease-standard),
              box-shadow var(--mo-base) var(--ease-standard),
              border-color var(--mo-base) var(--ease-standard);
}

.app-header.scrolled {
  background: rgba(7,8,20,.93);
  box-shadow: 0 8px 26px rgba(0,0,0,.34);
  border-bottom-color: var(--line-strong);
}

.profile-chip {
  border-radius: 12px;
  padding: .25rem .4rem;
  transition: background-color var(--mo-fast) var(--ease-standard);
}

@media (hover: hover) and (pointer: fine) {
  .profile-chip:hover { background: var(--lift-1); }
}

/* ==========================================================================
   16. LOGIN CINEMATOGRAFICO
   ========================================================================== */

.auth-screen.cinematic {
  padding: 0;
  background: #04050c;
  display: block;
}

/* --- z-index 0: poster + video (injetado por JS) --- */
.auth-screen.cinematic .bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background-color: #07050c;
  background-image: url(/videos/login-poster.jpg?v=20260926gemini);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.auth-screen.cinematic .bg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity 800ms ease;
}

.auth-screen.cinematic .bg video.is-ready {
  opacity: 1;
}

body.no-video .auth-screen.cinematic .bg::after {
  content: '';
  position: absolute;
  inset: -18%;
  pointer-events: none;
  background:
    radial-gradient(ellipse 48% 42% at 28% 38%, rgba(124, 58, 237, .48), transparent 62%),
    radial-gradient(ellipse 44% 50% at 78% 58%, rgba(217, 70, 239, .32), transparent 64%),
    linear-gradient(125deg, rgba(88, 28, 135, .38), transparent 48%, rgba(124, 58, 237, .28));
    animation: loginVisionWash 22s ease-in-out infinite alternate;
}

@keyframes loginVisionWash {
  from { transform: translate3d(-4%, -3%, 0) scale(1.04); }
  to   { transform: translate3d(5%, 4%, 0) scale(1.14); }
}

/* --- z-index 1: quatro scrims (nao misturar com o video nem com o card) --- */
.auth-screen.cinematic .scrim {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.auth-screen.cinematic .scrim:nth-of-type(2) {
  background: rgba(7, 5, 12, .55);
}

.auth-screen.cinematic .scrim:nth-of-type(3) {
  background: radial-gradient(ellipse 72% 90% at 86% 48%, rgba(7, 5, 12, .82) 0%, rgba(7, 5, 12, .42) 38%, transparent 68%);
}

.auth-screen.cinematic .scrim:nth-of-type(4) {
  box-shadow: inset 0 0 180px 56px rgba(2, 1, 8, .78);
}

.auth-screen.cinematic .scrim:nth-of-type(5) {
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.auth-screen.cinematic :is(button, input, a, .btn, .link-btn, .auth-back, .password-toggle):focus-visible {
  outline: 2px solid #D946EF;
  outline-offset: 3px;
  box-shadow: none;
}

/* --- z-index 10: card de login --- */
.auth-stage {
  position: relative;
  z-index: 10;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr minmax(360px, 460px);
  align-items: center;
  padding: 2rem clamp(1rem, 4vw, 3.5rem);
  gap: 2rem;
}

.auth-stage-spacer { display: block; }

.auth-cards { width: 100%; min-width: 0; }

.kpi-card, .house-card, .rail-card {
  contain: layout style;
}

.auth-screen.cinematic .auth-card {
  position: relative;
  z-index: 10;
  max-width: 100%;
  border-radius: 20px;
  animation: ptmAuthCardIn 640ms var(--ease-out-premium) 180ms both;
  background: rgba(18, 10, 31, .72);
  border: 1px solid rgba(167, 139, 250, .22);
  backdrop-filter: blur(22px) saturate(1.15);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  box-shadow:
    0 28px 80px rgba(0,0,0,.62),
    0 0 60px rgba(124,58,237,.18),
    inset 0 1px 0 rgba(255,255,255,.06);
}

@keyframes ptmAuthCardIn {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}

/* stagger interno do card */
.auth-screen.cinematic .auth-card .auth-brand { animation: ptmRise 460ms var(--ease-out-premium) 300ms both; }
.auth-screen.cinematic .auth-card .auth-intro-lead { animation: ptmRise 460ms var(--ease-out-premium) 360ms both; }
.auth-screen.cinematic .auth-card .field:nth-of-type(1) { animation: ptmRise 460ms var(--ease-out-premium) 400ms both; }
.auth-screen.cinematic .auth-card .field:nth-of-type(2) { animation: ptmRise 460ms var(--ease-out-premium) 450ms both; }
.auth-screen.cinematic .auth-card .auth-feature-item:nth-child(1) { animation: ptmRise 460ms var(--ease-out-premium) 400ms both; }
.auth-screen.cinematic .auth-card .auth-feature-item:nth-child(2) { animation: ptmRise 460ms var(--ease-out-premium) 450ms both; }
.auth-screen.cinematic .auth-card .auth-feature-item:nth-child(3) { animation: ptmRise 460ms var(--ease-out-premium) 500ms both; }
.auth-screen.cinematic .auth-card form .btn { animation: ptmRise 460ms var(--ease-out-premium) 540ms both; }
.auth-screen.cinematic .auth-card > .btn { animation: ptmRise 460ms var(--ease-out-premium) 540ms both; }
.auth-screen.cinematic .auth-security-note { animation: ptmRise 460ms var(--ease-out-premium) 600ms both; }

/* passo 2 (login) e uma troca, nao uma abertura: tempos bem mais curtos */
.auth-screen.cinematic #authLogin { animation-delay: 0ms; animation-duration: 380ms; }
.auth-screen.cinematic #authLogin .auth-brand { animation-delay: 70ms; }
.auth-screen.cinematic #authLogin .field:nth-of-type(1) { animation-delay: 120ms; }
.auth-screen.cinematic #authLogin .field:nth-of-type(2) { animation-delay: 165ms; }
.auth-screen.cinematic #authLogin .auth-remember-row { animation: ptmRise 460ms var(--ease-out-premium) 190ms both; }
.auth-screen.cinematic #authLogin form .btn { animation-delay: 210ms; }
.auth-screen.cinematic #authLogin .auth-security-note { animation-delay: 250ms; }

.auth-screen.cinematic .auth-card input {
  background: rgba(2,3,10,.52);
  border-color: rgba(255,255,255,.10);
}

.auth-screen.cinematic .auth-card input:focus {
  background: rgba(2,3,10,.66);
  border-color: var(--purple);
}

/* shake apenas no formulario */
.auth-screen.cinematic .auth-card.pt-shake {
  animation: ptmShake 380ms var(--ease-standard) both;
}

@keyframes ptmShake {
  0%, 100% { transform: translateX(0); }
  22%      { transform: translateX(-5px); }
  44%      { transform: translateX(4px); }
  68%      { transform: translateX(-3px); }
  86%      { transform: translateX(2px); }
}

/* Entrada do painel apos autenticar.
   .app-shell abriga .sidebar e .bottom-nav com position:fixed — aplicar
   transform ou filter nela criaria um containing block e deslocaria as duas.
   Por isso a shell so recebe opacidade; o movimento fica no .main-col. */
.app-shell.pt-app-in { animation: ptmAppFade 280ms var(--ease-standard) both; }

@keyframes ptmAppFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.app-shell.pt-app-in .main-col {
  animation: ptmAppRise 380ms var(--ease-out-premium) 40ms both;
}

@keyframes ptmAppRise {
  from { opacity: 0; transform: translate3d(0, 14px, 0) scale(.992); }
  to   { opacity: 1; transform: none; }
}

/* sidebar entrando item a item */
.sidebar.pt-boot .side-link {
  animation: ptmSideIn 520ms var(--ease-out-premium) both;
  animation-delay: calc(var(--si, 0) * 45ms + 220ms);
}

@keyframes ptmSideIn {
  from { opacity: 0; transform: translate3d(-16px, 0, 0); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   17. RESPONSIVO — LOGIN
   ========================================================================== */

@media (max-width: 1024px) {
  .auth-stage { grid-template-columns: 1fr minmax(320px, 420px); }
}

@media (max-width: 860px) {
  .auth-stage {
    grid-template-columns: 1fr;
    place-items: center;
    align-items: center;
    justify-items: center;
    padding: 1.25rem 1rem calc(1.5rem + env(safe-area-inset-bottom));
    gap: 0;
  }
  .auth-stage-spacer { display: none; }
  .auth-screen.cinematic .auth-card { max-width: 460px; margin: 0 auto; }
  .auth-screen.cinematic .scrim:nth-of-type(3) {
    background: radial-gradient(ellipse 90% 70% at 50% 50%, rgba(7, 5, 12, .38), transparent 72%);
  }

  /* Splash mobile — fundo visível, logo flutuando, sem card pesado */
  body.auth-mobile-splash .auth-screen.cinematic .scrim:nth-of-type(2) {
    background: rgba(7, 5, 12, .22);
  }
  body.auth-mobile-splash .auth-screen.cinematic .scrim:nth-of-type(3) {
    background: radial-gradient(ellipse 95% 80% at 50% 42%, rgba(7, 5, 12, .32), transparent 74%);
  }
  body.auth-mobile-splash .auth-screen.cinematic .scrim:nth-of-type(4) {
    box-shadow: inset 0 0 100px 36px rgba(2, 1, 8, .28);
  }
  body.auth-mobile-splash .auth-stage {
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
    padding: max(1rem, env(safe-area-inset-top)) 1rem calc(1.5rem + env(safe-area-inset-bottom));
  }
  .auth-mobile-splash {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
    max-width: min(92vw, 420px) !important;
    overflow: visible !important;
  }
  .auth-mobile-splash::before,
  .auth-mobile-splash::after { display: none !important; }
  .auth-mobile-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: .55rem;
    min-height: min(76dvh, 620px);
    padding: .5rem .35rem 1.5rem;
  }
  .auth-float-logo {
    width: min(52vw, 210px);
    height: auto;
    display: block;
    background: transparent;
    animation: ptmLogoFloat 5.2s ease-in-out infinite;
    filter:
      drop-shadow(0 16px 40px rgba(124, 58, 237, .72))
      drop-shadow(0 0 28px rgba(236, 72, 153, .42));
  }
  .auth-mobile-hero h2 {
    margin: .35rem 0 0;
    font: 700 1.72rem "Space Grotesk", Inter, sans-serif;
    letter-spacing: -.02em;
    text-shadow: 0 4px 24px rgba(0, 0, 0, .45);
  }
  .auth-mobile-tagline {
    margin: 0 0 1.35rem;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(245, 240, 255, .82);
  }
  .auth-mobile-hero .btn.gradient {
    min-width: min(88vw, 320px);
    max-width: 360px;
  }
  body.auth-mobile-login .auth-screen.cinematic .auth-card {
    max-width: min(92vw, 460px);
  }
}

@media (min-width: 861px) {
  #authMobileSplash { display: none !important; }
}

@media (max-width: 430px) {
  .auth-screen.cinematic .auth-card { padding: 1.25rem 1.15rem; }
}

/* mantem utilizavel em telas baixas */
@media (max-height: 700px) and (min-width: 861px) {
  .auth-stage { align-items: center; padding-block: 1.25rem; }
  .auth-screen.cinematic .auth-card { max-height: 92dvh; overflow-y: auto; }
}

/* ==========================================================================
   18. COMMAND PALETTE (Ctrl/Cmd + K)
   ========================================================================== */

.pt-cmd {
  position: fixed;
  inset: 0;
  z-index: 950;
  display: grid;
  place-items: start center;
  padding-top: 14vh;
}

.pt-cmd-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3,4,12,.62);
  backdrop-filter: blur(4px);
  animation: ptmFadeIn var(--mo-fast) var(--ease-standard) both;
}

.pt-cmd-card {
  position: relative;
  width: min(92vw, 460px);
  padding: .55rem;
  border-radius: 16px;
  background: rgba(14,16,32,.96);
  border: 1px solid var(--line-strong);
  box-shadow: var(--elev-3), 0 0 46px rgba(124,58,237,.2);
  animation: ptmModalIn var(--mo-base) var(--ease-out-premium) both;
}

.pt-cmd-input {
  width: 100%;
  padding: .7rem .85rem;
  border-radius: 12px;
  border: 1px solid var(--line-soft);
  background: rgba(0,0,0,.34);
  color: var(--text);
  font: inherit;
  outline: none;
}

.pt-cmd-input:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(168,85,247,.16); }

.pt-cmd-list { list-style: none; margin: .45rem 0 0; padding: 0; max-height: 44vh; overflow: auto; }

.pt-cmd-item {
  padding: .6rem .85rem;
  border-radius: 10px;
  font-size: .88rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color var(--mo-micro) var(--ease-standard),
              color var(--mo-micro) var(--ease-standard);
}

.pt-cmd-item:hover, .pt-cmd-item.sel { background: rgba(168,85,247,.16); color: #fff; }

.pt-cmd-empty { padding: .8rem .85rem; font-size: .84rem; color: var(--text-dim); }

/* ==========================================================================
   19. AMBIENTE VIVO — LOGIN
   Movimento continuo e de baixa frequencia. Tudo em transform/opacity para
   rodar na GPU e nao disparar layout.
   ========================================================================== */

@property --ptm-ang {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* --- deriva lenta da cena (ken burns) ------------------------------------ */
.auth-hero-img.pt-parallax {
  animation: ptmKenBurns 30s ease-in-out infinite alternate;
  transition: none;
  filter: saturate(1.05);
}

@keyframes ptmKenBurns {
  from {
    transform: scale(1.04)
      translate3d(calc(var(--px, 0px) + 1%), calc(var(--py, 0px) - 0.7%), 0);
  }
  to {
    transform: scale(1.105)
      translate3d(calc(var(--px, 0px) - 1.4%), calc(var(--py, 0px) + 0.9%), 0);
  }
}

/* --- aurora atras do formulario ----------------------------------------- */
.auth-aurora {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  filter: blur(64px);
}

.auth-aurora i {
  position: absolute;
  display: block;
  border-radius: 50%;
  mix-blend-mode: screen;
}

.auth-aurora i:nth-child(1) {
  width: 50vw; height: 50vw;
  right: -8%; top: 4%;
  background: radial-gradient(circle, rgba(124,58,237,.38), transparent 68%);
  animation: ptmAuroraA 21s ease-in-out infinite alternate;
}

.auth-aurora i:nth-child(2) {
  width: 42vw; height: 42vw;
  right: 16%; bottom: -16%;
  background: radial-gradient(circle, rgba(236,72,153,.26), transparent 68%);
  animation: ptmAuroraB 26s ease-in-out infinite alternate;
}

.auth-aurora i:nth-child(3) {
  width: 34vw; height: 34vw;
  left: 4%; top: 30%;
  background: radial-gradient(circle, rgba(56,189,248,.16), transparent 68%);
  animation: ptmAuroraC 31s ease-in-out infinite alternate;
}

@keyframes ptmAuroraA {
  from { transform: translate3d(0, 0, 0) scale(1); opacity: .75; }
  to   { transform: translate3d(-7%, 9%, 0) scale(1.16); opacity: 1; }
}

@keyframes ptmAuroraB {
  from { transform: translate3d(0, 0, 0) scale(1.1); opacity: .55; }
  to   { transform: translate3d(9%, -11%, 0) scale(.9); opacity: .95; }
}

@keyframes ptmAuroraC {
  from { transform: translate3d(0, 0, 0) scale(.95); opacity: .35; }
  to   { transform: translate3d(11%, -7%, 0) scale(1.2); opacity: .7; }
}

/* --- feixe de luz atravessando a cena ------------------------------------ */
.auth-sweep {
  position: absolute;
  inset: -25% -45%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    102deg,
    transparent 44%,
    rgba(196,160,255,.09) 48.5%,
    rgba(255,255,255,.07) 50%,
    rgba(196,160,255,.09) 51.5%,
    transparent 56%
  );
  opacity: 0;
  animation: ptmSweep 13s ease-in-out 3s infinite;
}

@keyframes ptmSweep {
  0%   { transform: translate3d(-72%, 0, 0); opacity: 0; }
  10%  { opacity: 1; }
  38%  { opacity: 1; }
  50%  { transform: translate3d(72%, 0, 0); opacity: 0; }
  100% { transform: translate3d(72%, 0, 0); opacity: 0; }
}

/* --- particulas subindo --------------------------------------------------- */
.auth-particles {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.auth-particles span {
  position: absolute;
  bottom: -4%;
  left: var(--x, 50%);
  width: var(--s, 3px);
  height: var(--s, 3px);
  border-radius: 50%;
  background: rgba(206,178,255,.9);
  box-shadow: 0 0 9px 1px rgba(168,85,247,.55);
  opacity: 0;
  animation: ptmFloatUp var(--d, 18s) linear var(--delay, 0s) infinite;
}

@keyframes ptmFloatUp {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) scale(.5); }
  12%  { opacity: var(--o, .5); }
  80%  { opacity: var(--o, .5); }
  100% { opacity: 0; transform: translate3d(var(--dx, 24px), -108vh, 0) scale(1); }
}

/* --- borda viva no card -------------------------------------------------- */
.auth-screen.cinematic .auth-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  opacity: .9;
  background: conic-gradient(
    from var(--ptm-ang),
    transparent 0deg,
    rgba(168,85,247,.9) 55deg,
    rgba(236,72,153,.75) 105deg,
    transparent 165deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: ptmBorderSpin 7s linear infinite;
}

@keyframes ptmBorderSpin { to { --ptm-ang: 360deg; } }

/* --- logo respirando ------------------------------------------------------ */
.auth-screen.cinematic .brand-logo.lg {
  animation: ptmLogoFloat 6s ease-in-out infinite;
  filter: drop-shadow(0 8px 22px rgba(124,58,237,.55));
}

@keyframes ptmLogoFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-7px) rotate(-1.4deg); }
}

/* --- numeros 01/02/03 com brilho passando -------------------------------- */
.auth-feature-num {
  position: relative;
  overflow: hidden;
}

.auth-feature-num::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 40%, rgba(255,255,255,.5) 50%, transparent 60%);
  transform: translateX(-120%);
  animation: ptmNumShine 4.5s ease-in-out infinite;
  animation-delay: var(--shine-delay, 0s);
}

@keyframes ptmNumShine {
  0%, 55%, 100% { transform: translateX(-120%); }
  75%           { transform: translateX(120%); }
}

/* --- brilho percorrendo o botao principal -------------------------------- */
.auth-screen.cinematic .btn.gradient {
  position: relative;
  overflow: hidden;
}

.auth-screen.cinematic .btn.gradient::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 42%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform: translateX(-180%) skewX(-14deg);
  animation: ptmBtnShine 4.2s ease-in-out 1.2s infinite;
  pointer-events: none;
}

@keyframes ptmBtnShine {
  0%, 62%, 100% { transform: translateX(-180%) skewX(-14deg); }
  85%           { transform: translateX(320%) skewX(-14deg); }
}

/* ==========================================================================
   20. AMBIENTE VIVO — PAINEL
   ========================================================================== */

/* aurora sutil atras do saldo principal */
.hero-card::after {
  content: '';
  position: absolute;
  z-index: 0;
  width: 62%;
  aspect-ratio: 1;
  right: -12%;
  top: -46%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(168,85,247,.30), transparent 66%);
  filter: blur(34px);
  animation: ptmHeroAurora 14s ease-in-out infinite alternate;
}

@keyframes ptmHeroAurora {
  from { transform: translate3d(0, 0, 0) scale(1); opacity: .55; }
  to   { transform: translate3d(-14%, 12%, 0) scale(1.22); opacity: .95; }
}

.hero-card > * { position: relative; z-index: 1; }

/* icone da sidebar dando um pulinho ao ativar */
.side-link.active svg { animation: ptmIconPop 520ms var(--ease-out-premium); }

@keyframes ptmIconPop {
  0%   { transform: scale(1) rotate(0deg); }
  45%  { transform: scale(1.28) rotate(-7deg); }
  100% { transform: scale(1.08) rotate(0deg); }
}

/* numero mudando de valor */
.pt-num-live { animation: ptmNumPulse 620ms var(--ease-out-premium); }

@keyframes ptmNumPulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.045); }
  100% { transform: scale(1); }
}

/* graficos desenhando a linha */
.pt-draw path {
  stroke-dasharray: var(--len, 1200);
  stroke-dashoffset: var(--len, 1200);
  animation: ptmDrawLine 1.05s var(--ease-out-premium) forwards;
}

@keyframes ptmDrawLine { to { stroke-dashoffset: 0; } }

/* item novo aparecendo numa lista */
.pt-enter { animation: ptmRise 460ms var(--ease-out-premium) both; }

/* ==========================================================================
   21. MERGULHO NA TELA — login para painel
   O overlay clona o frame do video (ou o poster) e faz o zoom. Nao depende
   mais da imagem do touro. Nada disso toca o fluxo de login.
   ========================================================================== */

.pt-warp {
  position: fixed;
  inset: 0;
  z-index: 940;
  pointer-events: none;
  overflow: hidden;
  background: #04050c;
  animation: ptmWarpOut 860ms var(--ease-in-quick) forwards;
}

.pt-warp .pt-warp-scene,
.pt-warp img {
  position: absolute;
  inset: -2%;
  width: 104%;
  height: 104%;
  object-fit: cover;
  object-position: 50% 42%;
  transform-origin: 50% 42%;
  animation: ptmWarpZoom 860ms cubic-bezier(.55, 0, .85, .35) forwards;
}

@keyframes ptmWarpZoom {
  from { transform: scale(1.05); filter: blur(0) brightness(1); }
  to   { transform: scale(3.4);  filter: blur(16px) brightness(1.55); }
}

@keyframes ptmWarpOut {
  0%   { opacity: 1; }
  55%  { opacity: .9; }
  100% { opacity: 0; }
}

/* estouro de luz no meio do mergulho */
.pt-warp::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 42%, rgba(214,190,255,.9), rgba(124,58,237,.35) 45%, transparent 72%);
  opacity: 0;
  animation: ptmWarpFlash 860ms ease-out forwards;
}

@keyframes ptmWarpFlash {
  0%, 40% { opacity: 0; }
  68%     { opacity: .5; }
  100%    { opacity: 0; }
}

/* ==========================================================================
   22. TEXTO, TOQUE E SCROLL
   ========================================================================== */

/* --- revelacao caractere a caractere ------------------------------------- */
.pt-split > span {
  display: inline-block;
  white-space: pre;
  animation: ptmLetterIn 640ms var(--ease-out-premium) both;
  animation-delay: calc(var(--li, 0) * 34ms + var(--lb, 0ms));
}

@keyframes ptmLetterIn {
  from { opacity: 0; transform: translate3d(0, 18px, 0) rotateX(-62deg); }
  to   { opacity: 1; transform: none; }
}

/* --- grao com cintilacao de filme ---------------------------------------- */
.auth-grain { animation: ptmGrainShift 640ms steps(1) infinite; }

@keyframes ptmGrainShift {
  0%   { background-position: 0 0; }
  25%  { background-position: -42px 31px; }
  50%  { background-position: 58px -23px; }
  75%  { background-position: -27px -46px; }
  100% { background-position: 33px 17px; }
}

/* --- inclinacao 3D do card de login -------------------------------------- */
.auth-screen.cinematic .auth-cards { perspective: 1500px; }

.auth-screen.cinematic .auth-card.pt-tilt {
  animation: none;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 320ms cubic-bezier(.16, 1, .3, 1);
}

/* --- ondulacao no clique -------------------------------------------------- */
.btn { position: relative; overflow: hidden; }

.pt-ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.42), rgba(255,255,255,0) 70%);
  transform: translate(-50%, -50%) scale(0);
  animation: ptmRipple 640ms ease-out forwards;
}

@keyframes ptmRipple {
  to { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* --- botao atraido pelo cursor --------------------------------------------
   Precisa empatar em especificidade com `.btn.gradient:hover` da secao 5;
   como esta declarado depois, prevalece. */
.btn.gradient.pt-magnet {
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
  transition: transform 260ms cubic-bezier(.16, 1, .3, 1);
}

/* --- revelacao ao rolar --------------------------------------------------- */
.pt-so {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity 320ms var(--ease-out-premium),
    transform 320ms var(--ease-out-premium);
}

.pt-so.pt-so-in { opacity: 1; transform: none; }

/* --- titulo do cabecalho deslizando na troca de rota ---------------------- */
.header-title h1, .header-title p {
  transition:
    opacity var(--mo-fast) var(--ease-standard),
    transform var(--mo-fast) var(--ease-out-premium);
}

.header-title.pt-swap h1,
.header-title.pt-swap p {
  opacity: 0;
  transform: translate3d(-10px, 0, 0);
}

/* ==========================================================================
   23. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .auth-screen.cinematic .bg video {
    opacity: 1;
    animation: none !important;
    transition: none !important;
  }
  body.no-video .auth-screen.cinematic .bg::after {
    animation: none !important;
    transform: none;
  }
  .auth-screen.cinematic .scrim { opacity: 1; }
  .auth-sweep, .auth-particles { display: none; }
  .auth-aurora i { animation: none !important; }
  .auth-screen.cinematic .auth-card::after,
  .auth-feature-num::after,
  .auth-screen.cinematic .btn.gradient::after,
  .hero-card::after { display: none; }
  .auth-screen.cinematic .brand-logo.lg { animation: none !important; }
  .nav-glide, .seg-glide { transition: none; }
  .pt-spot::after { display: none; }
  .pt-warp, .pt-ripple { display: none; }
  .pt-split > span { animation: none !important; opacity: 1; }
  .pt-so { opacity: 1; transform: none; }
  .sidebar.pt-boot .side-link { animation: none !important; }
  .status-pill.pending { animation: none !important; }
}

/* no celular corta o que custa caro (blur grande + muitas camadas) */
@media (max-width: 860px) {
  .auth-sweep { display: none; }
  .auth-aurora { filter: blur(48px); }
  .auth-aurora i:nth-child(3) { display: none; }
}

/* ==========================================================================
   24. PAGINAS INTERNAS — hierarquia, densidade e contraste
   ========================================================================== */

.header-actions .period-tabs.pt-off { display: none; }

/* o rail de saque some quando ja estamos na tela de saque */
.app-shell:has(#view-withdraw.active) .withdraw-rail { display: none; }

/* botao "Sacar desta plataforma" — texto branco solido, sem clip do saldo */
.house-card .house-wd-btn {
  margin-top: .85rem;
  color: #fff;
  font-weight: 700;
  letter-spacing: .01em;
  background: var(--grad-brand, var(--gradient));
  background-size: 160% 100%;
  box-shadow: 0 12px 28px -10px rgba(168, 85, 247, .95);
  filter: none;
  -webkit-text-fill-color: #fff;
}

.house-card .house-balance {
  font-size: 1.45rem;
  letter-spacing: -.02em;
}

/* cards de plataforma ocupam a largura disponivel em vez de parar em 340px */
@media (min-width: 1024px) {
  .houses-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
  .help-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: stretch;
  }
  .help-list > :last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* header ja diz o nome da tela — o h2 interno so ocupava espaco */
  #view-withdraw .wd-heading { display: none; }
  #view-withdraw .withdraw-main > .label.accent { margin-bottom: .35rem; }
  #view-my-ids .my-ids-panel > .panel-head h3 {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  #view-my-ids .my-ids-panel > .panel-head { justify-content: flex-end; }
}

.help-list .panel { height: 100%; }
.help-list .panel h3 { margin-bottom: .4rem; }

.news-card .news-tags span {
  transition: background-color var(--mo-fast) var(--ease-standard),
              transform var(--mo-fast) var(--ease-out-premium);
}

.data-table tbody tr {
  transition: background-color var(--mo-fast) var(--ease-standard);
}

@media (hover: hover) and (pointer: fine) {
  .data-table tbody tr:hover { background: var(--lift-1); }
}

.status-pill.pending {
  animation: ptmPending 2.2s ease-in-out infinite;
}

@keyframes ptmPending {
  50% { box-shadow: 0 0 0 4px rgba(249, 115, 22, .16); }
}

/* chips PIX: o fundo ativo agora e o glide */
.pix-types { position: relative; }
.pix-types:has(.pix-glide.ready) .pix-type.active {
  background: transparent;
  box-shadow: none;
  color: #fff;
  border-color: transparent;
}
.pix-types .pix-type { position: relative; z-index: 1; }

.agents-badge.ok {
  animation: ptmRise 420ms var(--ease-out-premium) both;
}

/* contraste um pouco mais alto em texto auxiliar */
.muted, .field-hint, .header-title p, .system-status {
  color: #b4aed0;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -48px;
  z-index: 2000;
  padding: .55rem .9rem;
  border-radius: 10px;
  background: var(--grad-brand, var(--gradient));
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transition: top var(--mo-fast) var(--ease-out-premium);
}
.skip-link:focus {
  top: 12px;
  outline: none;
  box-shadow: var(--focus-ring);
}

body.auth-open .skip-link { display: none; }

.pt-mouse { display: none; }
@media (hover: hover) and (pointer: fine) {
  .pt-touch { display: none; }
  .pt-mouse { display: inline; }
}