/* ============================================================
   APEX — Página de auth, páginas legales y lightbox del gráfico
   Extraído de index.html sin cambios de estilo. El ORDEN de
   carga de las hojas (ver <link> en index.html) es significativo:
   las reglas posteriores refinan a las anteriores.
   ============================================================ */

/* ---- Auth page (login / crear cuenta) — página completa propia
   (/login, /signup), no modal/popup. Reutiliza el mismo lenguaje
   visual que el resto de APEX (radios, sombras, tipografía, campos,
   botones) con su propio namespace (authm- / authpage-) para no
   interferir con otras vistas. #authView es hermana de #landingView
   y #appShell, y se muestra/oculta igual que ellas. ---- */
#authView{display:none;min-height:100vh;background:var(--bg);}
#authView.is-active{display:block;}
.authpage-topbar{max-width:1160px;margin:0 auto;padding:var(--space-5) var(--space-6);}
.authpage-back{display:inline-flex;align-items:center;gap:7px;color:var(--muted);text-decoration:none;font-size:var(--text-body-sm-size);font-weight:560;background:none;border:none;padding:0;cursor:pointer;font-family:var(--font-body);width:auto;}
.authpage-back:hover{color:var(--text);}
/* La página de auth ya no es una tarjeta flotando sobre un fondo vacío:
   es contenido centrado directamente sobre el fondo de APEX (mismo
   lenguaje que ChatGPT/Apple/Stripe/Linear), sin borde ni sombra de
   "modal". El espacio en blanco alrededor es intencional. */
.authpage-wrap{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 78px);padding:var(--space-7) var(--space-6) var(--space-11);}
.authpage-card{width:100%;max-width:392px;background:transparent;border:none;box-shadow:none;padding:0;}
.authpage-brand{display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:var(--space-8);}
.authpage-brand img{width:28px;height:28px;object-fit:contain;}
.authpage-brand span{font-family:var(--font-display);font-weight:700;font-size:16px;letter-spacing:-0.01em;}
.authpage-terms{display:flex;align-items:flex-start;gap:9px;margin:var(--space-5) 0 0;font-size:var(--text-caption-size);color:var(--muted);line-height:1.5;}
.authpage-terms input{width:auto;margin-top:2px;flex-shrink:0;accent-color:var(--blue);}
.authpage-terms a{color:var(--text);text-decoration:underline;}
.authm-legal-note{margin:var(--space-4) 0 0;font-size:var(--text-caption-size);color:var(--muted);line-height:1.5;text-align:center;}
.authm-legal-note a{color:var(--text);text-decoration:underline;}
.authm-legal-note a:hover,.authpage-terms a:hover{color:var(--blue);}
.authpage-callout{margin-top:var(--space-5);padding:12px 13px;border-radius:var(--r-sm);background:var(--surface2);border:1px solid var(--border-soft);font-size:var(--text-body-sm-size);color:var(--text);line-height:1.5;display:none;}
.authpage-callout.is-visible{display:block;}
.authpage-callout button{display:block;margin-top:8px;background:none;border:none;padding:0;color:var(--blue);font-weight:600;cursor:pointer;font-family:var(--font-body);font-size:inherit;width:auto;}
.authpage-callout button:hover{text-decoration:underline;}
.authm-head{display:flex;align-items:center;justify-content:center;}
.authm-head h2{margin:0;font-family:var(--font-display);font-size:19px;font-weight:650;letter-spacing:-0.01em;text-align:center;}
.authm-sub{margin:5px 0 0;color:var(--muted);font-size:var(--text-body-sm-size);line-height:1.5;text-align:center;}
.authm-body{padding:var(--space-5) 0 0;}
.authm-body .field-label:first-child{margin-top:0;}
.authm-body .row2 .field-label:first-child{margin-top:0;}
.authm-submit{margin-top:var(--space-6);}
.authm-error{margin-top:var(--space-5);padding:10px 13px;border-radius:var(--r-sm);background:var(--red-soft);border:1px solid var(--red-soft-border);color:var(--red);font-size:var(--text-body-sm-size);display:none;}
.authm-error.is-visible{display:block;}
.authm-forgot{display:block;text-align:right;margin:var(--space-2) 0 0;font-size:var(--text-caption-size);color:var(--muted);text-decoration:none;background:none;border:none;padding:0;cursor:pointer;font-family:var(--font-body);width:auto;}
.authm-forgot:hover{color:var(--blue);text-decoration:underline;}
.authm-divider{display:flex;align-items:center;gap:10px;margin:var(--space-5) 0;color:var(--muted2);font-size:var(--text-caption-size);}
.authm-divider::before,.authm-divider::after{content:"";flex:1;height:1px;background:var(--border-soft);}
.authm-google-btn{display:flex;align-items:center;justify-content:center;gap:10px;}
.authm-foot{text-align:center;margin:var(--space-6) 0 0;font-size:var(--text-body-sm-size);color:var(--muted);}
.authm-foot button{background:none;border:none;padding:0;color:var(--blue);font-weight:600;cursor:pointer;font-family:var(--font-body);font-size:inherit;width:auto;}
.authm-foot button:hover{text-decoration:underline;}
.authpage-card[data-mode="login"] .authm-only-register,
.authpage-card[data-mode="register"] .authm-only-login{display:none;}

/* ---- Auth: pasos (bienvenida -> email -> login/registro) ----
   Un solo panel visible a la vez, controlado por data-step en
   .authpage-card. Namespace propio (authm-step-*) para no tocar
   el resto del CSS de auth ya existente. */
.authm-step{display:none;}
.authpage-card[data-step="welcome"] .authm-step[data-step-panel="welcome"],
.authpage-card[data-step="login"] .authm-step[data-step-panel="form"],
.authpage-card[data-step="register"] .authm-step[data-step-panel="form"],
.authpage-card[data-step="profile"] .authm-step[data-step-panel="profile"],
.authpage-card[data-step="privacy"] .authm-step[data-step-panel="privacy"],
.authpage-card[data-step="forgot"] .authm-step[data-step-panel="forgot"],
.authpage-card[data-step="reset"] .authm-step[data-step-panel="reset"]{display:block;}
.authpage-card[data-step="login"] .authm-only-register,
.authpage-card[data-step="register"] .authm-only-login{display:none;}
.authm-social-btn{display:flex;align-items:center;justify-content:center;gap:10px;margin:var(--space-3) auto 0;width:fit-content;min-width:240px;max-width:100%;}
.authm-social-btn:first-child{margin-top:0;}
@media(max-width:520px){.authm-social-btn{min-width:0;width:100%;}}
.authm-social-note{margin-top:8px;font-size:var(--text-caption-size);color:var(--muted);text-align:center;display:none;}
.authm-social-note.is-visible{display:block;}
.authm-email-recap{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 13px;border-radius:var(--r-sm);background:var(--surface2);border:1px solid var(--border-soft);font-size:var(--text-body-sm-size);color:var(--text);margin-bottom:var(--space-5);}
.authm-email-recap span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.authm-email-edit{flex-shrink:0;background:none;border:none;padding:0;color:var(--blue);font-weight:600;cursor:pointer;font-family:var(--font-body);font-size:inherit;width:auto;}
.authm-email-edit:hover{text-decoration:underline;}

/* ---- Privacy Gate — información previa al registro. Es un paso del
   flujo de auth existente, no un formulario ni una aceptación legal. ---- */
.privacy-gate-eyebrow{
  margin:0 0 var(--space-3); color:var(--blue); text-align:center;
  font:700 10px/1 var(--font-mono); letter-spacing:.12em; text-transform:uppercase;
}
.privacy-gate-scroll{
  max-height:min(46vh,430px); overflow-y:auto; overscroll-behavior:contain;
  margin-top:var(--space-6); padding:var(--space-2) var(--space-4) var(--space-3);
  border:1px solid var(--border-soft); border-radius:var(--r-lg);
  background:color-mix(in srgb,var(--surface) 72%,var(--surface2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
  scrollbar-width:thin;
}
.privacy-gate-scroll:focus{outline:none; box-shadow:var(--shadow-focus);}
.privacy-gate-section{padding:var(--space-4) 0;border-bottom:1px solid var(--border-soft);}
.privacy-gate-section:first-child{padding-top:var(--space-2);}
.privacy-gate-section:last-child{border-bottom:0;padding-bottom:var(--space-2);}
.privacy-gate-section h3{margin:0 0 6px;font:650 14px/1.25 var(--font-display);letter-spacing:-.01em;color:var(--text);}
.privacy-gate-section p{margin:0;color:var(--muted);font-size:var(--text-body-sm-size);line-height:1.6;}
.privacy-gate-section a{color:var(--text);text-decoration:underline;}
.privacy-gate-actions{position:relative;z-index:3001;padding-top:var(--space-4);text-align:center;}
.privacy-gate-scroll-hint{margin:0;color:var(--muted2);font-size:var(--text-caption-size);line-height:1.4;}
.privacy-gate-scroll-hint.is-ready{color:var(--green);}
.privacy-gate-actions .authm-submit{width:100%;margin-top:var(--space-3);}
.privacy-gate-actions .authm-submit:disabled{opacity:.48;cursor:not-allowed;}
.privacy-gate-close{margin:var(--space-4) auto 0;border:0;background:none;color:var(--muted);font:600 var(--text-body-sm-size)/1.4 var(--font-body);cursor:pointer;}
.privacy-gate-close:hover{color:var(--text);text-decoration:underline;}
@media(max-width:520px){.privacy-gate-scroll{max-height:48vh;margin-top:var(--space-5);padding-inline:var(--space-3);}.privacy-gate-section p{font-size:var(--text-caption-size);}}
/* ---- Ojo mostrar/ocultar contraseña — botón absoluto dentro del
   mismo campo, sin alterar el ancho ni el estilo del input. ---- */
.authm-pw-field{position:relative;}
.authm-pw-field input[type="password"],.authm-pw-field input[type="text"]{padding-right:40px;}
.authm-pw-toggle{position:absolute;top:0;right:0;bottom:0;width:40px;display:flex;align-items:center;justify-content:center;background:none;border:none;padding:0;margin:0;color:var(--muted);cursor:pointer;font-family:var(--font-body);}
.authm-pw-toggle:hover{color:var(--text);}
.authm-pw-toggle svg{display:block;}
/* .landing-signup-btn vivía aquí, pero auth.css se carga DESPUÉS de
   landing.css: con la misma especificidad, esta regla ganaba a los
   ajustes responsive de .landing-login-btn,.landing-signup-btn de
   landing.css (media queries no suman especificidad). Resultado: en
   móvil "Crear cuenta" conservaba el padding y el tamaño de texto de
   escritorio mientras "Iniciar sesión" sí encogía, dejando los dos
   botones de la topbar descuadrados. La regla base ahora vive junto a
   la de su pareja, en landing.css. */
@media(max-width:520px){.authpage-wrap{align-items:flex-start;padding:var(--space-6) var(--space-4) var(--space-9);}.authpage-brand{margin-bottom:var(--space-6);}}

/* ---- Páginas legales (/terms, /privacy) — mismo sistema visual que
   el resto de APEX (auth-page incluida): header con volver, título
   grande, ancho de lectura cómodo, secciones bien separadas. Es
   hermana de #landingView/#appShell/#authView y se muestra/oculta
   igual que ellas (ver JS: showLegalPage). ---- */
#legalView{display:none;min-height:100vh;background:var(--bg);}
#legalView.is-active{display:block;}
.legal-topbar{max-width:1160px;margin:0 auto;padding:var(--space-5) var(--space-6);}
.legal-wrap{max-width:720px;margin:0 auto;padding:var(--space-4) var(--space-6) var(--space-11);}
.legal-doc{display:none;}
#legalView[data-doc="terms"] .legal-doc[data-doc="terms"]{display:block;}
#legalView[data-doc="privacy"] .legal-doc[data-doc="privacy"]{display:block;}
#legalView[data-doc="cookies"] .legal-doc[data-doc="cookies"]{display:block;}
.legal-doc h1{font-family:var(--font-display);font-size:var(--text-display-size);font-weight:var(--text-display-weight);line-height:var(--text-display-lh);letter-spacing:var(--text-display-ls);margin:0 0 var(--space-2);}
.legal-updated{color:var(--muted);font-size:var(--text-body-sm-size);margin:0 0 var(--space-9);}
.legal-body h2{font-family:var(--font-display);font-size:var(--text-h3-size);font-weight:var(--text-h3-weight);letter-spacing:var(--text-h3-ls);margin:var(--space-9) 0 var(--space-3);padding-top:var(--space-7);border-top:1px solid var(--border-soft);}
.legal-body h2:first-child{margin-top:0;padding-top:0;border-top:none;}
.legal-body p{font-size:var(--text-body-size);line-height:var(--text-body-lh);color:var(--text);margin:0 0 var(--space-4);}
.legal-body ul{margin:0 0 var(--space-4);padding-left:1.25em;color:var(--text);font-size:var(--text-body-size);line-height:var(--text-body-lh);}
.legal-body li{margin-bottom:7px;}
.legal-body li:last-child{margin-bottom:0;}
.legal-body strong{font-weight:650;}
/* El token es --surface2, sin guion: escrito como --surface-2 nunca
   resolvía y los <code> de la Política de Cookies caían siempre al gris
   de respaldo, que en modo oscuro se veía como un parche apagado en
   vez de la superficie del tema. */
.legal-body code{font-family:var(--font-mono);font-size:.92em;background:var(--surface2);border:1px solid var(--border-soft);padding:.1em .35em;border-radius:var(--r-2xs);}
.legal-table{width:100%;border-collapse:collapse;margin:0 0 var(--space-4);font-size:var(--text-body-sm-size);display:block;overflow-x:auto;}
.legal-table th,.legal-table td{text-align:left;vertical-align:top;padding:var(--space-3) var(--space-3);border-bottom:1px solid var(--border-soft);color:var(--text);}
.legal-table th{color:var(--muted);font-weight:650;white-space:nowrap;}
.legal-placeholder{color:var(--muted2);font-style:italic;}
.legal-footer{margin-top:var(--space-9);}
@media(max-width:640px){.legal-wrap{padding:var(--space-2) var(--space-4) var(--space-9);}.legal-body h2{margin-top:var(--space-7);padding-top:var(--space-6);}}

/* ---- Lightbox del gráfico en Historial: mismo backdrop y misma
   animación que los modales de Trade Tracker (.tt-modal-backdrop),
   solo que en vez de un panel con formulario centra la imagen a
   tamaño grande. ---- */
.img-lightbox-backdrop{position:fixed;inset:0;background:rgba(20,12,6,.72);backdrop-filter:blur(2px);z-index:90;opacity:0;pointer-events:none;transition:opacity var(--dur-med) var(--ease-out);display:flex;align-items:center;justify-content:center;padding:24px;}
.img-lightbox-backdrop.is-open{opacity:1;pointer-events:auto;}
.img-lightbox-inner{position:relative;max-width:min(920px,94vw);max-height:88vh;opacity:0;transform:scale(.97);transition:opacity var(--dur-med) var(--ease-out),transform var(--dur-med) var(--ease-out);}
.img-lightbox-backdrop.is-open .img-lightbox-inner{opacity:1;transform:scale(1);}
.img-lightbox-inner img{display:block;width:100%;height:100%;max-height:88vh;object-fit:contain;border-radius:var(--r-md);box-shadow:var(--shadow-lg);background:var(--surface);}
.img-lightbox-close{position:absolute;top:-14px;right:-14px;width:36px;height:36px;border-radius:50%;border:1px solid var(--border-soft);background:var(--surface);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-md);}
.img-lightbox-close:hover{background:var(--surface2);}
@media(max-width:520px){.img-lightbox-close{top:-40px;right:0;background:rgba(255,255,255,.9);}}
.doc-image-card img{cursor:zoom-in;}

/* Campo Capital invertido en USD: prefijo "$" dentro del input,
   reutiliza el mismo input base (borde/fondo), solo agrega espacio
   a la izquierda para el símbolo. */
.tt-usd-input{position:relative;}
.tt-usd-input .tt-usd-prefix{position:absolute;left:var(--space-3);top:50%;transform:translateY(-50%);color:var(--muted2);font-family:var(--font-mono);font-size:var(--text-body-sm-size);pointer-events:none;}
.tt-usd-input input{padding-left:20px;}

/* Ganancia/Pérdida potencial y Risk-Reward: ahora son de solo
   lectura y se recalculan en tiempo real, reutiliza .stat-box. */
.tt-calc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);margin:var(--space-2) 0 var(--space-3);}
@media(max-width:520px){.tt-calc-grid{grid-template-columns:1fr 1fr;}}
.tt-calc-grid .stat-box .sv{font-family:var(--font-display);font-size:16px;font-variant-numeric:tabular-nums;}
.tt-calc-hint{font-size:var(--text-caption-size);color:var(--muted2);margin:-2px 0 var(--space-2);}
body.tt-modal-open{overflow:hidden;}
#ttMoveLevelField{margin:var(--space-3) 0 var(--space-4);}

@media(max-width:640px){
  .tt-head{flex-direction:column;align-items:stretch;}
  .tt-new-btn{width:100%;justify-content:center;}
  .tt-card-levels{grid-template-columns:1fr 1fr;row-gap:8px;}
  .tt-summary-grid{grid-template-columns:1fr 1fr;}
  .tt-modal{border-radius:var(--r-md);}
}

/* ============================================================
   PLAN POPOVER — en el menú de cuenta
   ============================================================ */
.acct-profile-plan-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 4px 8px;
  border-radius: var(--r-pill);
  font-size: var(--text-label-size);
  font-weight: 600;
  cursor: pointer;
  color: inherit;
  transition: background var(--dur-fast), color var(--dur-fast);
  font-family: var(--font-body);
}
.acct-profile-plan-btn:hover{ background: var(--surface2); }
.acct-profile-plan-btn:focus-visible{ outline: none; box-shadow: var(--shadow-focus); }
.acct-profile-plan-btn.is-pro{ color: var(--blue); }
.acct-profile-plan-btn.is-max{ color: var(--violet); }
.acct-profile-plan-btn svg{ flex-shrink: 0; transition: transform var(--dur-fast); }
.acct-profile-plan-btn[aria-expanded="true"] svg{ transform: rotate(180deg); }

.acct-plan-popover{
  position: absolute;
  z-index: 100;
  display: none;
  min-width: 280px;
  max-width: 320px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out);
}
.acct-plan-popover.is-visible{
  opacity: 1;
  transform: translateY(0);
}
.acct-plan-popover-inner{ padding: var(--space-5); }
.acct-plan-popover-head{
  font-size: var(--text-body-sm-size);
  color: var(--muted);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-soft);
}
.acct-plan-popover-features{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.acct-plan-popover-features li{
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-body-sm-size);
  color: var(--text);
}
.acct-plan-popover-features .check{
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}
.acct-plan-popover-cta{ margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border-soft); }
.acct-plan-upgrade-btn{ width: 100%; }
@media (prefers-reduced-motion: reduce){
  .acct-plan-popover{ transition: none !important; }
}

/* ============================================================
   PANELES DEL MENÚ DE CUENTA — Perfil / Uso / Apariencia
   ============================================================ */
.auth-menu-pane{ padding: var(--space-3) var(--space-4) var(--space-4); }
.auth-menu-back{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 4px 2px;
  margin-bottom: var(--space-3);
  font-size: var(--text-label-size);
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font-body);
}
.auth-menu-back:hover{ color: var(--text); }

.acct-profile-row{ display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.acct-profile-avatar{
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface2); color: var(--text);
  font-weight: 700; font-size: 16px; flex-shrink: 0;
  object-fit: cover;
}
.acct-profile-id{ min-width: 0; }
.acct-profile-name{ font-weight: 600; font-size: var(--text-body-size); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-profile-email{ font-size: var(--text-label-size); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.acct-usage-row{
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: 8px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: var(--text-body-sm-size);
}
.acct-usage-row:last-child{ border-bottom: none; }
.acct-usage-row span{ color: var(--muted); }
.acct-usage-row strong{ color: var(--text); font-weight: 600; }
.acct-usage-row.acct-usage-warn strong{ color: var(--amber, #b45309); }

/* ============================================================
   PASSWORD STRENGTH METER
   ============================================================ */
.authm-pw-strength{
  margin-top: 6px;
  padding: 8px 10px;
  background: var(--surface2);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  animation: fadein .2s var(--ease-out);
}
.authm-pw-strength-bar{
  border-radius: var(--r-pill);
  overflow: hidden;
  height: 6px;
}
.authm-pw-strength-fill{
  height: 100%;
  border-radius: var(--r-pill);
  transition: width .3s var(--ease-out), background .3s var(--ease-out);
}
.authm-pw-strength-text{
  font-size: 11px;
  font-weight: 600;
}

/* ============================================================
   DELETE ACCOUNT MODAL
   ============================================================ */
.auth-delete-step{
  text-align: center;
  padding: var(--space-2) 0;
}
/* Círculo con el aviso — mismo lenguaje que .premium-overlay-icon (un
   icono real dentro de una insignia de color, nunca un emoji suelto,
   que se ve distinto según la plataforma/fuente del sistema). */
.auth-delete-icon{
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.auth-delete-icon.danger{ background: var(--red-soft); color: var(--red); }
.auth-delete-step h3{
  font-family: var(--font-display);
  font-size: var(--text-h3-size);
  font-weight: var(--text-h3-weight);
  margin: 0 0 var(--space-2);
}
.auth-delete-step p{
  font-size: var(--text-body-size);
  color: var(--text);
  line-height: 1.6;
  margin: 0 0 var(--space-5);
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}
/* Antes era una línea de texto rojo suelta, sin ningún contenedor —
   se veía como una frase perdida en vez de un aviso. Ahora es una
   cajita con su propio fondo/borde, igual que el resto de avisos de
   la app (ver .tt-modal-error). */
.auth-delete-warning{
  font-size: var(--text-body-sm-size);
  color: var(--red);
  font-weight: 650;
  background: var(--red-soft);
  border: 1px solid var(--red-soft-border);
  border-radius: var(--r-sm);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-6);
}
.auth-delete-actions{
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-6);
}
.auth-delete-actions .btn{ width: auto; flex: 1; min-width: 0; }
.auth-delete-step input{
  width: 100%;
  max-width: 280px;
  margin: 0 auto var(--space-3);
  padding: 10px 13px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-body-sm-size);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.auth-delete-step input:focus{
  outline: none;
  border-color: var(--muted2);
  box-shadow: var(--shadow-focus);
}