/*  ============================================================
    Mercado Monkey · Hosting Panel
    Tema para CyberPanel 3.x  ·  v2
    ------------------------------------------------------------
    Paleta y tipografía tomadas de mercadomonkey.com/styles.css
      oscuro: --ink #010101 · --ink-2 #16181a · --paper #f4eef6
      claro : --ink #faf7fb · --ink-2 #efe9f3 · --paper #16101a
      marca : --pink #f036e1 · --violet #9149ff

    NOTA DE RENDIMIENTO (v2)
    La v1 usaba background-attachment:fixed junto con
    backdrop-filter:blur() en tarjetas, cabecera y barra lateral.
    Esa combinación obliga a recalcular el desenfoque en CADA
    fotograma del scroll y provoca tirones y repintados visibles.
    Ahora el fondo vive en una capa fija (body::before) que el
    compositor dibuja una sola vez, y no queda ningún
    backdrop-filter. El aspecto se mantiene; el scroll es fluido.
    ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300..700&family=Poppins:wght@600;700&display=swap');

/* ---------- 1 · Marca ---------- */
:root {
    --mm-pink:    #f036e1;
    --mm-violet:  #9149ff;
    --mm-gradient: linear-gradient(135deg, var(--mm-violet) 0%, var(--mm-pink) 100%);
    --mm-sans:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mm-display: 'Poppins', var(--mm-sans);

    /* superficies — modo claro por defecto */
    --mm-bg:       #faf7fb;
    --mm-bg-2:     #ffffff;
    --mm-surface:  rgba(255, 255, 255, 0.72);
    --mm-surface-2:rgba(255, 255, 255, 0.92);
    --mm-text:     #16101a;
    --mm-text-dim: rgba(22, 16, 26, 0.66);
    --mm-text-faint:rgba(22, 16, 26, 0.44);
    --mm-line:     rgba(22, 16, 26, 0.10);
    --mm-line-2:   rgba(22, 16, 26, 0.18);
    --mm-shadow:   rgba(22, 16, 26, 0.10);
}

[data-theme="dark"] {
    --mm-bg:       #010101;
    --mm-bg-2:     #16181a;
    --mm-surface:  rgba(255, 255, 255, 0.045);
    --mm-surface-2:rgba(255, 255, 255, 0.075);
    --mm-text:     #f4eef6;
    --mm-text-dim: rgba(244, 238, 246, 0.62);
    --mm-text-faint:rgba(244, 238, 246, 0.42);
    --mm-line:     rgba(255, 255, 255, 0.08);
    --mm-line-2:   rgba(255, 255, 255, 0.16);
    --mm-shadow:   rgba(0, 0, 0, 0.55);
}

/* ---------- 2 · Tokens de CyberPanel ---------- */
:root:not([data-theme="dark"]),
[data-theme="dark"] {
    --bg-primary:      var(--mm-bg);
    --bg-secondary:    var(--mm-bg-2);
    --bg-sidebar:      var(--mm-bg);
    --bg-sidebar-item: var(--mm-surface);
    --bg-hover:        var(--mm-surface-2);
    --bg-muted:        var(--mm-surface);
    --bg-code:         var(--mm-surface);

    --text-primary:    var(--mm-text);
    --text-secondary:  var(--mm-text-dim);
    --text-heading:    var(--mm-text);
    --text-on-accent:  #ffffff;

    --border-color:    var(--mm-line);
    --border-soft:     var(--mm-line);
    --shadow-color:    var(--mm-shadow);

    --accent-color:    var(--mm-violet);
    --accent-hover:    var(--mm-pink);
    --accent-primary:  var(--mm-violet);
    --accent-soft-bg:  rgba(145, 73, 255, 0.14);
    --focus-ring:      var(--mm-violet);

    --btn-primary:       var(--mm-violet);
    --btn-primary-hover: var(--mm-pink);
    --table-head-text:   var(--mm-text);
}

:root:not([data-theme="dark"]) {
    --table-head-bg: linear-gradient(135deg, rgba(145,73,255,0.10) 0%, rgba(240,54,225,0.08) 100%);
}
[data-theme="dark"] {
    --table-head-bg: linear-gradient(135deg, rgba(145,73,255,0.20) 0%, rgba(240,54,225,0.16) 100%);
}

/* ---------- 3 · Tipografía ---------- */
body, button, input, select, textarea, .btn, .form-control { font-family: var(--mm-sans); }
h1,h2,h3,h4,h5,h6,.section-title,.card-title { font-family: var(--mm-sans); font-weight: 700; letter-spacing: -0.02em; }
code, pre, kbd, samp { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ---------- 4 · Fondo en capa fija (clave del rendimiento) ---------- */
:root { background: var(--mm-bg); }
body { background: transparent; color: var(--mm-text); position: relative; }

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    transform: translateZ(0);   /* al compositor: se dibuja una vez */
}

:root:not([data-theme="dark"]) body::before {
    background:
        radial-gradient(720px 720px at 12% 16%, rgba(240, 54, 225, 0.07), transparent 62%),
        radial-gradient(860px 860px at 88% 46%, rgba(145, 73, 255, 0.08), transparent 62%),
        linear-gradient(180deg, #faf7fb 0%, #f3edf6 42%, #ece4f2 100%);
}

[data-theme="dark"] body::before {
    background:
        radial-gradient(720px 720px at 12% 16%, rgba(240, 54, 225, 0.10), transparent 62%),
        radial-gradient(860px 860px at 88% 46%, rgba(145, 73, 255, 0.13), transparent 62%),
        radial-gradient(620px 620px at 50% 108%, rgba(240, 54, 225, 0.07), transparent 65%),
        linear-gradient(180deg, #0a0713 0%, #0d0a17 45%, #16181a 100%);
}

#main-content, .main-content, #content-wrapper { background: transparent; }

/* ---------- 5 · Superficies (sin backdrop-filter) ---------- */
.card, .panel, .content-box, .cp-card, .well, .modal-content, .dropdown-menu {
    background: var(--mm-surface);
    border: 1px solid var(--mm-line);
    border-radius: 16px;
    box-shadow: 0 18px 40px -28px var(--mm-shadow);
}

.card:hover, .cp-card:hover { border-color: var(--mm-line-2); }
.panel-heading, .card-header { background: transparent; border-bottom: 1px solid var(--mm-line); }

/* Cabecera y barra lateral: opacas, para que el scroll no las repinte */
#header, .navbar, header#header {
    background: var(--mm-bg);
    border-bottom: 1px solid var(--mm-line);
}
#sidebar, .sidebar {
    background: var(--mm-bg);
    border-right: 1px solid var(--mm-line);
}
[data-theme="dark"] #header,
[data-theme="dark"] #sidebar { background: #050408; }

/* ---------- 6 · Botones ---------- */
.btn-primary, button.btn-primary, .btn.btn-primary {
    background: var(--mm-gradient);
    border: none;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #fff;
    transition: filter .16s ease, box-shadow .16s ease;
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--mm-gradient);
    filter: brightness(1.10);
    box-shadow: 0 8px 22px -10px rgba(240, 54, 225, 0.55);
    color: #fff;
}
.btn:not(.btn-primary) { border-radius: 999px; }

.btn-default, .btn-secondary {
    background: var(--mm-surface-2);
    border: 1px solid var(--mm-line-2);
    color: var(--mm-text);
}
.btn-default:hover, .btn-secondary:hover { border-color: var(--mm-violet); color: var(--mm-text); }

/* ---------- 7 · Formularios ---------- */
.form-control, input[type="text"], input[type="password"], input[type="email"],
input[type="number"], select, textarea {
    background: var(--mm-surface-2);
    border: 1px solid var(--mm-line);
    border-radius: 12px;
    color: var(--mm-text);
}
.form-control:focus, select:focus, textarea:focus {
    border-color: var(--mm-violet);
    box-shadow: 0 0 0 3px rgba(145, 73, 255, 0.20);
    outline: none;
}
::placeholder { color: var(--mm-text-faint); }

/* ---------- 8 · Navegación lateral ---------- */
#sidebar a, .sidebar a { color: var(--mm-text-dim); border-radius: 12px; }
#sidebar a:hover, .sidebar a:hover { color: var(--mm-text); background: var(--mm-surface-2); }

#sidebar .active > a, #sidebar a.active, .sidebar .active > a {
    position: relative;
    background: var(--accent-soft-bg);
    color: var(--mm-text);
    font-weight: 600;
}
#sidebar .active > a::before, #sidebar a.active::before {
    content: "";
    position: absolute;
    left: 0; top: 18%; bottom: 18%;
    width: 3px;
    border-radius: 999px;
    background: var(--mm-gradient);
}

/* ---------- 9 · Logotipo ---------- */
/* En escritorio la barra lateral ya muestra la marca: la de la
   cabecera es redundante. Se conserva solo cuando la lateral se
   oculta (móvil), para no dejar la cabecera sin identidad.       */
@media (min-width: 992px) {
    #header .logo { display: none; }
}

.logo-icon img, .sidebar-logo .logo-icon img {
    max-height: 34px;
    width: auto;
}

.logo-text .brand, .sidebar-logo .logo-text .brand {
    font-family: var(--mm-display);
    font-weight: 700;
    letter-spacing: -0.045em;
    font-size: 17px;
    line-height: 1.15;
    background: var(--mm-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--mm-pink);
    white-space: nowrap;
}

.logo-text .tagline, .sidebar-logo .logo-text .tagline {
    font-family: var(--mm-sans);
    font-weight: 400;
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mm-text-faint);
    line-height: 1.2;
    margin-top: 1px;
}

/* ---------- 10 · Tablas ---------- */
.table, table { background: transparent; color: var(--mm-text); border-color: var(--mm-line); }
.table > thead > tr > th {
    background: var(--table-head-bg);
    color: var(--mm-text);
    border-bottom: 1px solid var(--mm-line-2);
    font-weight: 600;
    letter-spacing: -0.01em;
}
.table > tbody > tr > td { border-color: var(--mm-line); }
.table-hover > tbody > tr:hover { background: var(--mm-surface-2); }

/* ---------- 11 · Publicidad de CyberPanel ---------- */
/* Este panel es tuyo y lo ven tus clientes: fuera anuncios ajenos. */
.cp-build-card,
.menu-item-promo,
.badge-promo,
.login-changelogs { display: none !important; }

/* ---------- 12 · Barra de desplazamiento ---------- */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(145, 73, 255, 0.40);
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(240, 54, 225, 0.60); background-clip: padding-box; }
* { scrollbar-color: rgba(145, 73, 255, 0.45) transparent; scrollbar-width: thin; }

/* ---------- 13 · Detalles ---------- */
a { color: var(--mm-violet); }
a:hover { color: var(--mm-pink); }
[data-theme="dark"] a { color: #c9a6ff; }
[data-theme="dark"] a:hover { color: var(--mm-pink); }

.badge, .label { border-radius: 999px; font-weight: 600; }
.progress { background: var(--mm-surface-2); border-radius: 999px; }
.progress-bar { background: var(--mm-gradient); }
hr { border-color: var(--mm-line); }
::selection { background: rgba(240, 54, 225, 0.28); color: inherit; }

.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover {
    background: var(--mm-surface-2);
    border-color: var(--mm-line-2);
    color: var(--mm-text);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/*  ============================================================
    14 · Pantalla de acceso  (v3 · minimalista y centrada)
    Una sola columna. Bloque de marca: icono a la izquierda,
    nombre y bajada apilados a su derecha. Sin degradado en el
    nombre — el color lo pone el icono.
    Ojo con CyberPanel: el botón es .btn-success (no .btn-primary)
    y los inputs traen height:45px en línea.
    ============================================================ */

body.mm-login {
    background: #0a0713 !important;
    color: #f4eef6;
    font-family: var(--mm-sans);
    min-height: 100vh;
    overflow-x: hidden;
}

/*  ---- Fondo animado (aurora) ----------------------------------
    Vive en su propio <div class="mm-bg">, NO en body::before.
    Dos motivos, los dos comprobados en vivo con el navegador:

      1 · ESPECIFICIDAD. `:root:not([data-theme="dark"]) body::before`
          puntua (0,2,2) y `body.mm-login::before` solo (0,1,2), asi
          que el login estaba recibiendo el degradado del modo CLARO.

      2 · APILADO. `body` lleva position:relative, asi que su fondo
          opaco se pinta en el paso de descendientes posicionados,
          es decir POR ENCIMA de un pseudo-elemento con z-index
          negativo. El aurora quedaba tapado pasara lo que pasara.

    Resultado de ambos: la pantalla salia negro plano #010101.
    Con un div propio a z-index 0 no hay que pelear ninguna de las
    dos cosas, y sobran capas para el grano y la vineta.

    RENDIMIENTO: lo unico que se anima son transform y opacity, que
    resuelve el compositor sin repintar. Sin filter:blur (caro en
    superficies grandes): el desenfoque ya lo dan los propios
    radial-gradient. El bloque prefers-reduced-motion del final del
    archivo lo congela todo para quien lo pida.
    -------------------------------------------------------------- */

body.mm-login .mm-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: linear-gradient(168deg, #100a1e 0%, #0a0713 46%, #0d0918 100%);
}

/* Manchas de luz. Duraciones 27/34/41 s a proposito: no tienen
   multiplo comun a la vista, asi que la composicion nunca se repite. */
body.mm-login .mm-bg span {
    position: absolute;
    display: block;
    border-radius: 50%;
    will-change: transform;
}

body.mm-login .mm-bg-a {
    width: 84vmax; height: 84vmax;
    left: -24vmax; top: -30vmax;
    background: radial-gradient(circle at center,
        rgba(145, 73, 255, 0.33) 0%,
        rgba(145, 73, 255, 0.14) 36%,
        rgba(145, 73, 255, 0) 66%);
    animation: mm-drift-a 27s ease-in-out infinite alternate;
}

body.mm-login .mm-bg-b {
    width: 70vmax; height: 70vmax;
    right: -22vmax; bottom: -26vmax;
    background: radial-gradient(circle at center,
        rgba(240, 54, 225, 0.42) 0%,
        rgba(240, 54, 225, 0.11) 36%,
        rgba(240, 54, 225, 0) 66%);
    animation: mm-drift-b 34s ease-in-out infinite alternate;
}

body.mm-login .mm-bg-c {
    width: 58vmax; height: 58vmax;
    left: 50%; top: 42%;
    margin: -29vmax 0 0 -29vmax;
    background: radial-gradient(circle at center,
        rgba(91, 47, 214, 0.32) 0%,
        rgba(91, 47, 214, 0.09) 40%,
        rgba(91, 47, 214, 0) 68%);
    animation: mm-drift-c 41s ease-in-out infinite alternate;
}

@keyframes mm-drift-a {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(8vmax, 5vmax, 0) scale(1.11); }
}

@keyframes mm-drift-b {
    from { transform: translate3d(0, 0, 0) scale(1.12); }
    to   { transform: translate3d(-9vmax, -6vmax, 0) scale(1); }
}

@keyframes mm-drift-c {
    from { transform: translate3d(-4vmax, 3vmax, 0) scale(0.92); }
    to   { transform: translate3d(5vmax, -4vmax, 0) scale(1.15); }
}

/* Retícula tenue. La mascara la desvanece hacia los bordes: sin eso
   parece papel milimetrado, con eso parece profundidad. */
body.mm-login .mm-bg-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(244, 238, 246, 0.030) 1px, transparent 1px),
        linear-gradient(90deg, rgba(244, 238, 246, 0.030) 1px, transparent 1px);
    background-size: 58px 58px;
    -webkit-mask-image: radial-gradient(circle at 50% 44%, #000 0%, rgba(0,0,0,0.45) 38%, transparent 66%);
            mask-image: radial-gradient(circle at 50% 44%, #000 0%, rgba(0,0,0,0.45) 38%, transparent 66%);
}

/* Grano. Un degradado oscuro tan amplio siempre hace bandas; unos
   pocos puntos de ruido las rompen. Va como data URI, que el CSP del
   panel permite en img-src ('self' data: blob: https:). */
body.mm-login .mm-bg-grain {
    position: absolute;
    inset: 0;
    opacity: 0.18;
    mix-blend-mode: soft-light;
    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='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
    background-size: 140px 140px;
}

/* Vineta: oscurece los bordes para que el ojo caiga en el centro,
   que es justo donde esta el formulario. */
body.mm-login .mm-bg-vig {
    position: absolute;
    inset: 0;
    background: radial-gradient(118% 88% at 50% 44%,
        rgba(10, 7, 19, 0) 26%,
        rgba(7, 4, 14, 0.58) 70%,
        rgba(4, 2, 9, 0.88) 100%);
}

/* La pantalla de carga venia blanca con puntos #333: destello blanco
   de 300 ms antes del login oscuro. Se oscurece. */
body.mm-login #loading { background: #0a0713 !important; }
body.mm-login #loading .spinner > div { background-color: rgba(244, 238, 246, 0.5) !important; }

/* Entrada del formulario: sube 10 px y aparece. Nada se descoloca,
   sigue centrado; solo deja de aparecer de golpe. */
body.mm-login #loginForm {
    animation: mm-entra 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.15s;
}

@keyframes mm-entra {
    from { opacity: 0; transform: translate3d(0, 10px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Fuera la columna del hero */
body.mm-login .mm-oculto { display: none !important; }

/* Una sola columna, centrada vertical y horizontalmente */
body.mm-login .col-login-right {
    background: transparent !important;
    display: flex;
    position: relative;
    z-index: 1;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 32px 20px;
}
body.mm-login .login-wrapper { width: 100%; display: flex; justify-content: center; }
body.mm-login #loginForm {
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    float: none;
    padding: 0;
}

/* ---- Bloque de marca ---- */
body.mm-login .mm-lockup {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 34px;
}

body.mm-login .mm-mark {
    width: 52px;
    height: 52px;
    object-fit: contain;
    flex: none;
}

body.mm-login .mm-names { text-align: left; }

body.mm-login .mm-brand {
    font-family: var(--mm-display);
    font-weight: 600;
    letter-spacing: -0.045em;
    font-size: 26px;
    line-height: 1.1;
    color: #f4eef6;                 /* sin degradado */
    -webkit-text-fill-color: #f4eef6;
    background: none;
    text-transform: none;
    white-space: nowrap;
}

body.mm-login .mm-tagline {
    font-family: var(--mm-sans);
    font-weight: 400;
    font-size: 10px;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: rgba(244, 238, 246, 0.38);
    margin-top: 3px;
}

/* ---- Formulario, sin caja: minimalismo ---- */
body.mm-login .login-wrapper .content-box-wrapper {
    background: transparent !important;
    border: none !important;
    border-radius: 0;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}
body.mm-login .login-wrapper .mx-30,
body.mm-login .login-wrapper .my-10 { margin: 0 !important; }
body.mm-login .form-group { margin-bottom: 12px; }

body.mm-login .input-group { display: flex; width: 100%; }

body.mm-login .form-control {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    border-right: none !important;
    border-radius: 12px 0 0 12px !important;
    color: #f4eef6 !important;
    height: 50px !important;
    padding: 0 16px !important;
    font-size: 14.5px;
    box-shadow: none !important;
    transition: border-color .15s ease, background .15s ease;
}
body.mm-login .form-control::placeholder { color: rgba(244, 238, 246, 0.34) !important; }

body.mm-login .input-group-addon,
body.mm-login .input-group-addon.bg-blue {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    border-left: none !important;
    border-radius: 0 12px 12px 0 !important;
    color: rgba(244, 238, 246, 0.34) !important;
    width: 50px; min-width: 50px;
    display: flex; align-items: center; justify-content: center;
    transition: color .15s ease, border-color .15s ease;
}

body.mm-login .input-group:focus-within .form-control,
body.mm-login .input-group:focus-within .input-group-addon {
    border-color: rgba(145, 73, 255, 0.75) !important;
}
body.mm-login .input-group:focus-within .form-control { background: rgba(255, 255, 255, 0.075) !important; }
body.mm-login .input-group:focus-within .input-group-addon { color: var(--mm-violet) !important; }

/* Selector de idioma: fila completa */
body.mm-login select.form-control {
    border-right: 1px solid rgba(255, 255, 255, 0.09) !important;
    border-radius: 12px !important;
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23f4eef6' fill-opacity='.38' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    padding-right: 40px !important;
}
body.mm-login select.form-control option { background: #16181a; color: #f4eef6; }

/* ---- Botón ---- */
body.mm-login .btn-login,
body.mm-login .btn-success,
body.mm-login button[type="submit"] {
    background: var(--mm-gradient) !important;
    background-image: var(--mm-gradient) !important;
    border: none !important;
    border-radius: 12px !important;
    height: 50px;
    margin-top: 10px;
    width: 100%;
    font-family: var(--mm-sans);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -0.01em;
    color: #fff !important;
    box-shadow: none;
    transition: filter .15s ease;
}
body.mm-login .btn-login:hover, body.mm-login .btn-success:hover { filter: brightness(1.12); }
body.mm-login .btn-login:active { transform: translateY(1px); }

body.mm-login a { color: rgba(244, 238, 246, 0.55); font-size: 13px; }
body.mm-login a:hover { color: var(--mm-pink); }

/* Publicidad de CyberPanel fuera */
body.mm-login .login-changelogs,
body.mm-login .card.mb-3 { display: none !important; }

/*  El aviso de error venia de Bootstrap: rosa claro y a todo lo ancho
    de la ventana. Se ensanchaba porque .login-wrapper es un flex en
    columna y align-items vale stretch por defecto; centrarlo lo ata
    al ancho del formulario y deja de romper la composicion. */
body.mm-login .login-wrapper { align-items: center; }

body.mm-login .alert.alert-danger {
    width: 100%;
    max-width: 380px;
    margin: 18px 0 0 !important;
    padding: 12px 16px !important;
    background: rgba(240, 54, 225, 0.09) !important;
    border: 1px solid rgba(240, 54, 225, 0.30) !important;
    border-radius: 12px;
    color: #f6d6f1 !important;
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
    box-shadow: none !important;
}

body.mm-login .alert.alert-danger p { margin: 0; }

body.mm-login #verifyingLogin { margin-top: 10px; }