:root{
  --bg-1:#050A14;
  --bg-2:#071A33;
  --bg-3:#0A0F1C;

  --card-1:#081A33;
  --card-2:#07162B;
  --card-3:#050E1D;

  --az-1:#2B7CFF;
  --az-2:#2AD4FF;

  --gold-1:#F7D36A;
  --gold-2:#D6A94E;
  --gold-3:#FFF1B8;

  --text:#EAF1FF;
  --muted: rgba(233,238,247,.70);

  --shadow: 0 18px 60px rgba(0,0,0,.54);
}

/* Fundo padrão de todas as telas */
body.mcm-bg{
  min-height:100vh;
  color: var(--text);
  background:
    radial-gradient(1200px 700px at 18% 12%, rgba(43,124,255,.18), transparent 60%),
    radial-gradient(900px 650px at 85% 14%, rgba(42,212,255,.10), transparent 55%),
    radial-gradient(900px 700px at 65% 88%, rgba(247,211,106,.08), transparent 55%),
    linear-gradient(160deg, var(--bg-1) 0%, var(--bg-2) 52%, var(--bg-3) 100%);
  overflow-x:hidden;
}

/* Container “padrão” */
.mcm-wrap{ max-width: 560px; }

/* =========================================================
   CARD PADRÃO: azul + borda dourada + faixa passando
   ========================================================= */
.mcm-card{
  border-radius:24px;
  position:relative;
  overflow:hidden;
  box-shadow: var(--shadow);

  background:
    radial-gradient(900px 520px at 20% 0%, rgba(43,124,255,.22), transparent 60%),
    radial-gradient(700px 520px at 90% 20%, rgba(42,212,255,.12), transparent 62%),
    linear-gradient(180deg, var(--card-1) 0%, var(--card-2) 55%, var(--card-3) 100%);

  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* borda dourada */
.mcm-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:24px;
  padding: 1.5px;
  pointer-events:none;
  z-index: 2;

  background: linear-gradient(135deg,
      rgba(214,169,78,.95),
      rgba(255,241,184,.35),
      rgba(247,211,106,.95)
  );

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;

  opacity: .95;
}

/* faixa dourada passando */
.mcm-card::before{
  content:"";
  position:absolute;
  inset:-60%;
  pointer-events:none;
  z-index: 1;

  background: linear-gradient(120deg,
      rgba(247,211,106,0) 44%,
      rgba(255,241,184,.30) 49%,
      rgba(247,211,106,.65) 50%,
      rgba(255,241,184,.30) 51%,
      rgba(247,211,106,0) 56%
  );

  transform: translateX(-60%) rotate(10deg);
  opacity: 0;
  mix-blend-mode: screen;
  animation: mcmCardSweep 6.8s ease-in-out infinite;
}

.mcm-card > *{ position:relative; z-index:3; }

@keyframes mcmCardSweep{
  0%, 65% { opacity:0; transform: translateX(-60%) rotate(10deg); }
  70%     { opacity:.95; }
  86%     { opacity:.25; transform: translateX(60%) rotate(10deg); }
  100%    { opacity:0; transform: translateX(60%) rotate(10deg); }
}

/* Inputs padrão */
.mcm-label{
  color: rgba(233,238,247,.88);
  font-weight:700;
  letter-spacing:.2px;
}
.mcm-input{
  background: rgba(5,10,20,.42);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--text);
  border-radius:14px;
  padding:.82rem .95rem;
}
.mcm-input::placeholder{ color: rgba(233,238,247,.46); }
.mcm-input:focus{
  background: rgba(5,10,20,.52);
  color: var(--text);
  border-color: rgba(247,211,106,.40);
  box-shadow: 0 0 0 .25rem rgba(247,211,106,.10);
}

/* Botão primário (Entrar/Salvar/Continuar) */
.mcm-btn-primary{
  position:relative;
  border-radius:14px;
  padding:.92rem 1rem;
  font-weight:900;
  letter-spacing:.2px;
  color:#061022;

  border: 1px solid rgba(214,169,78,.80);
  outline: 1px solid rgba(255,241,184,.12);
  outline-offset: 2px;

  background: linear-gradient(135deg, var(--az-1), var(--az-2));
  box-shadow: 0 16px 36px rgba(0,0,0,.25), 0 0 18px rgba(214,169,78,.12);
  overflow:hidden;
  transition: transform .12s ease, filter .12s ease;
}
.mcm-btn-primary:hover{ transform: translateY(-1px); filter: brightness(1.03); }
.mcm-btn-primary:active{ transform: translateY(0); }

.mcm-btn-primary .mcm-btn-sweep{
  position:absolute;
  inset:-60%;
  background: linear-gradient(120deg,
    rgba(247,211,106,0) 45%,
    rgba(255,241,184,.30) 50%,
    rgba(247,211,106,0) 56%
  );
  transform: translateX(-55%) rotate(10deg);
  opacity:0;
  pointer-events:none;
  animation: mcmBtnSweep 7.8s ease-in-out infinite;
  mix-blend-mode: soft-light;
}
@keyframes mcmBtnSweep{
  0%, 70% { opacity:0; transform: translateX(-55%) rotate(10deg); }
  74%     { opacity:.9; }
  84%     { opacity:.25; transform: translateX(55%) rotate(10deg); }
  100%    { opacity:0; transform: translateX(55%) rotate(10deg); }
}

/* Botão secundário “soft” */
.mcm-btn-soft{
  border-radius:14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: rgba(233,238,247,.92);
  font-weight:800;
  padding:.78rem 1rem;
}
.mcm-btn-soft:hover{ background: rgba(255,255,255,.08); }

/* Alert padrão */
.mcm-alert-danger{
  border-radius:14px;
  border: 1px solid rgba(255,99,132,.35);
  background: rgba(255,99,132,.10);
  color: #ffe6ee;
}

/* Respeitar acessibilidade */
@media (prefers-reduced-motion: reduce){
  .mcm-card::before,
  .mcm-btn-primary .mcm-btn-sweep{
    animation:none !important;
  }
  .mcm-btn-primary{ transition:none !important; }
}