/* =====================================================================================
   Gym Keyper sign-in pages - "pro" look (loaded after mg-auth.css + mg-theme.css by _AuthHead).
   Adds, without changing the layout: aurora background, glass card with a gradient accent, glowing inputs,
   shining primary button, compact language picker, animated brand art. Light + Dark.
   Staff (body.mg-auth--staff) = indigo / violet.   Members (body.mg-auth--member) = teal / emerald.
   Respects "reduce motion".
   ===================================================================================== */

body.mg-auth {
    --pro-a: #4f46e5; --pro-b: #7c3aed; --pro-c: #2563eb;          /* staff accent */
    --pro-glow: 79, 70, 229;
    --accent: #6366f1; --accent-dark: #4f46e5;
    --accent-gradient: linear-gradient(135deg, var(--pro-c), var(--pro-a) 45%, var(--pro-b));
    position: relative; isolation: isolate; overflow-x: hidden;
}
body.mg-auth.mg-auth--member {
    --pro-a: #0d9488; --pro-b: #10b981; --pro-c: #0891b2;          /* member accent */
    --pro-glow: 13, 148, 136;
    --accent: #14b8a6; --accent-dark: #0d9488;
}

/* ---------- aurora background (two soft moving glows + faint dot grid) ---------- */
body.mg-auth::before, body.mg-auth::after {
    content: ""; position: fixed; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(60px); opacity: .55;
}
body.mg-auth::before { width: 52vmax; height: 52vmax; left: -14vmax; top: -18vmax;
    background: radial-gradient(circle, rgba(var(--pro-glow), .55), transparent 65%); animation: proDrift1 18s ease-in-out infinite alternate; }
body.mg-auth::after { width: 46vmax; height: 46vmax; right: -14vmax; bottom: -16vmax;
    background: radial-gradient(circle, rgba(124, 58, 237, .38), rgba(14, 165, 233, .18) 45%, transparent 68%); animation: proDrift2 22s ease-in-out infinite alternate; }
body.mg-auth.mg-auth--member::after { background: radial-gradient(circle, rgba(16, 185, 129, .4), rgba(14, 165, 233, .2) 45%, transparent 68%); }
.mg-shell { position: relative; }
.mg-shell::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background-image: radial-gradient(rgba(15, 23, 42, .07) 1px, transparent 1.2px); background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); }
@keyframes proDrift1 { to { transform: translate(8vmax, 6vmax) scale(1.08); } }
@keyframes proDrift2 { to { transform: translate(-7vmax, -5vmax) scale(1.1); } }

/* ---------- the form card: glass + gradient accent line on top ---------- */
.mg-auth .mg-card {
    position: relative; overflow: hidden; border-radius: 24px;
    background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, .9);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 24px 60px -24px rgba(var(--pro-glow), .35), 0 10px 30px -18px rgba(15, 23, 42, .25);
    animation: proIn .45s cubic-bezier(.2, .8, .2, 1) both;
}
.mg-auth .mg-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--accent-gradient); }
@keyframes proIn { from { opacity: 0; transform: translateY(14px) scale(.985); } }

.mg-auth .mg-h1 { font-size: clamp(1.6rem, 2.2vw, 2rem); letter-spacing: -.02em; }
.mg-auth .mg-lead { font-size: .95rem; }

/* ---------- top bar: language picker (left) + Light / Dark (right) ---------- */
.mg-theme-row.mg-topbar { justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: -4px 0 18px; }
.mg-lang { position: relative; display: inline-flex; align-items: center; min-height: 40px; border-radius: 12px; cursor: pointer;
           background: rgba(241, 245, 249, .9); border: 1px solid #e2e8f0; color: #334155; transition: border-color .2s, box-shadow .2s; }
.mg-lang:hover { border-color: rgba(var(--pro-glow), .45); }
.mg-lang:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(var(--pro-glow), .16); }
.mg-lang > .fa-globe { position: absolute; left: 12px; color: var(--accent-dark); pointer-events: none; }
.mg-lang select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: inherit; cursor: pointer;
                  font: inherit; font-size: .86rem; font-weight: 700; min-height: 40px; padding: 0 34px 0 36px; border-radius: 12px; max-width: 200px; }
.mg-lang select:focus { outline: none; }
.mg-lang .mg-lang-caret { position: absolute; right: 12px; font-size: .7rem; color: #64748b; pointer-events: none; }
html[dir="rtl"] .mg-lang > .fa-globe { left: auto; right: 12px; }
html[dir="rtl"] .mg-lang .mg-lang-caret { right: auto; left: 12px; }
html[dir="rtl"] .mg-lang select { padding: 0 36px 0 34px; }

/* phones: language + Light / Dark stay on ONE row (the switch shows its icons only; the name stays as its tooltip) */
@media (max-width: 480px) {
    .mg-theme-row.mg-topbar { flex-wrap: nowrap; }
    .mg-topbar .mg-lang { flex: 1 1 auto; min-width: 0; }
    .mg-topbar .mg-lang select { width: 100%; max-width: none; }
    .mg-topbar .mg-theme-switch { flex: 0 0 auto; }
    .mg-topbar .mg-theme-switch button { min-width: 42px; padding: 0 10px; }
    .mg-topbar .mg-theme-switch button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------- inputs: soft fill, icon lights up, glowing focus ring ---------- */
.mg-auth .mg-input { min-height: 52px; border-radius: 14px; background: #f8fafc; border-color: #e2e8f0; transition: border-color .2s, box-shadow .2s, background .2s; }
.mg-auth .mg-input:hover { border-color: #cbd5e1; background: #fff; }
.mg-auth .mg-input:focus { background: #fff; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(var(--pro-glow), .16), 0 6px 18px -10px rgba(var(--pro-glow), .5); }
.mg-auth .mg-control > .ico { transition: color .2s, transform .2s; }
.mg-auth .mg-control:focus-within > .ico { color: var(--accent-dark); transform: translateY(-50%) scale(1.08); }
.mg-auth .mg-check input { accent-color: var(--accent-dark); }
.mg-auth a { color: var(--accent-dark); }

/* ---------- primary button: gradient, glow, a light sweep on hover ---------- */
.mg-auth .mg-btn-primary { position: relative; overflow: hidden; min-height: 54px; border-radius: 14px; font-size: 1rem; letter-spacing: .01em;
    background: var(--accent-gradient); background-size: 160% 160%;
    box-shadow: 0 10px 26px -10px rgba(var(--pro-glow), .75), inset 0 1px 0 rgba(255, 255, 255, .25); }
.mg-auth .mg-btn-primary::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-18deg); transition: left .6s ease; }
.mg-auth .mg-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 16px 34px -12px rgba(var(--pro-glow), .85), inset 0 1px 0 rgba(255, 255, 255, .25); }
.mg-auth .mg-btn-primary:hover::after { left: 120%; }
.mg-auth .mg-btn-primary .fa-arrow-right { transition: transform .2s; }
.mg-auth .mg-btn-primary:hover .fa-arrow-right { transform: translateX(3px); }
.mg-auth .mg-btn-ghost { border-radius: 14px; min-height: 50px; background: rgba(255, 255, 255, .7); }
.mg-auth .mg-btn-ghost:hover { border-color: var(--accent); color: var(--accent-dark) !important; background: #fff; }

/* ---------- phone / tablet banner + desktop brand panel ---------- */
.mg-auth .mg-banner, .mg-auth .mg-hero {
    background:
        radial-gradient(90% 70% at 100% 0%, rgba(var(--pro-glow), .55), transparent 60%),
        radial-gradient(80% 60% at 0% 100%, rgba(14, 165, 233, .28), transparent 60%),
        linear-gradient(160deg, #111827 0%, #0f172a 55%, #0b1120 100%);
}
.mg-auth--member .mg-banner, .mg-auth--member .mg-hero {
    background:
        radial-gradient(90% 70% at 100% 0%, rgba(16, 185, 129, .45), transparent 60%),
        radial-gradient(80% 60% at 0% 100%, rgba(8, 145, 178, .35), transparent 60%),
        linear-gradient(160deg, #0b1f24 0%, #0f172a 55%, #071018 100%);
}
.mg-auth .mg-tagline em, .mg-auth .mg-hero h2 em { background: linear-gradient(135deg, #a5b4fc, #c4b5fd 45%, #f0abfc); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mg-auth--member .mg-tagline em, .mg-auth--member .mg-hero h2 em { background: linear-gradient(135deg, #5eead4, #6ee7b7 50%, #a7f3d0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mg-auth .mg-logo.mg-logo--mark { background: var(--accent-gradient); }

/* animated brand art (desktop panel only) */
.mg-art { display: none; }
@media (min-width: 1024px) {
    .mg-auth .mg-hero { border-radius: 24px; animation: proIn .55s .08s cubic-bezier(.2, .8, .2, 1) both; }
    .mg-hero-body { display: grid; gap: 0; }
    .mg-art { display: block; position: relative; width: clamp(150px, 15vw, 200px); aspect-ratio: 1; margin: 0 0 clamp(14px, 2vh, 26px); }
    .mg-art .ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .14); }
    .mg-art .r1 { inset: 0; border-color: rgba(255, 255, 255, .10); animation: proSpin 26s linear infinite; border-top-color: rgba(var(--pro-glow), .9); }
    .mg-art .r2 { inset: 14%; border-color: rgba(255, 255, 255, .12); animation: proSpin 18s linear infinite reverse; border-right-color: rgba(167, 139, 250, .85); }
    .mg-auth--member .mg-art .r2 { border-right-color: rgba(52, 211, 153, .85); }
    .mg-art .r3 { inset: 28%; background: radial-gradient(circle, rgba(var(--pro-glow), .35), transparent 70%); border: 0; animation: proPulse 3.2s ease-in-out infinite; }
    .mg-art .core { position: absolute; inset: 34%; border-radius: 30%; display: grid; place-items: center; color: #fff; font-size: clamp(1.4rem, 1.7vw, 1.9rem);
                    background: var(--accent-gradient); box-shadow: 0 12px 30px -8px rgba(var(--pro-glow), .9), inset 0 1px 0 rgba(255, 255, 255, .35); }
    .mg-art .orb { position: absolute; width: 22%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; color: #fff;
                   font-size: clamp(.8rem, .95vw, 1rem); background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22);
                   -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .6); animation: proFloat 5s ease-in-out infinite; }
    .mg-art .o1 { top: -2%; left: 39%; } .mg-art .o2 { bottom: 6%; left: -4%; animation-delay: -1.6s; } .mg-art .o3 { bottom: 6%; right: -4%; animation-delay: -3.2s; }
    .mg-art .orb i { color: #c7d2fe; } .mg-auth--member .mg-art .orb i { color: #99f6e4; }
    .mg-auth .mg-badge { border-radius: 12px; background: rgba(255, 255, 255, .07); transition: background .2s, transform .2s; }
    .mg-auth .mg-badge:hover { background: rgba(255, 255, 255, .12); transform: translateY(-1px); }
    .mg-auth--member .mg-badge i { color: #5eead4; }
}
@keyframes proSpin { to { transform: rotate(360deg); } }
@keyframes proPulse { 50% { transform: scale(1.12); opacity: .7; } }
@keyframes proFloat { 50% { transform: translateY(-7px); } }

/* ---------- Dark ---------- */
/* (mg-theme.css styles the dark panel with html[data-theme] selectors - restate ours just as specifically) */
html[data-theme="dark"] .mg-auth .mg-banner, html[data-theme="dark"] .mg-auth .mg-hero {
    background:
        radial-gradient(90% 70% at 100% 0%, rgba(var(--pro-glow), .45), transparent 60%),
        radial-gradient(80% 60% at 0% 100%, rgba(14, 165, 233, .2), transparent 60%),
        linear-gradient(160deg, #0d1424 0%, #0a1120 55%, #060b16 100%);
}
html[data-theme="dark"] .mg-auth--member .mg-banner, html[data-theme="dark"] .mg-auth--member .mg-hero {
    background:
        radial-gradient(90% 70% at 100% 0%, rgba(16, 185, 129, .38), transparent 60%),
        radial-gradient(80% 60% at 0% 100%, rgba(8, 145, 178, .28), transparent 60%),
        linear-gradient(160deg, #081a1e 0%, #0a1120 55%, #050c12 100%);
}
html[data-theme="dark"] body.mg-auth::before { opacity: .45; }
html[data-theme="dark"] body.mg-auth::after { opacity: .4; }
html[data-theme="dark"] .mg-shell::before { background-image: radial-gradient(rgba(148, 163, 184, .09) 1px, transparent 1.2px); }
html[data-theme="dark"] .mg-auth .mg-card {
    background: rgba(15, 23, 42, .72); border-color: rgba(148, 163, 184, .16);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 30px 70px -28px rgba(0, 0, 0, .85), 0 0 0 1px rgba(var(--pro-glow), .08);
}
html[data-theme="dark"] .mg-lang { background: rgba(2, 6, 23, .55); border-color: rgba(148, 163, 184, .22); color: #e2e8f0; }
html[data-theme="dark"] .mg-lang > .fa-globe { color: #a5b4fc; }
html[data-theme="dark"] .mg-auth--member .mg-lang > .fa-globe { color: #5eead4; }
html[data-theme="dark"] .mg-lang .mg-lang-caret { color: #94a3b8; }
html[data-theme="dark"] .mg-lang select option { background: #131c2e; color: #e5edf7; }
html[data-theme="dark"] .mg-auth .mg-input { background: rgba(2, 6, 23, .5); border-color: rgba(148, 163, 184, .2); }
html[data-theme="dark"] .mg-auth .mg-input:hover { background: rgba(2, 6, 23, .62); border-color: rgba(148, 163, 184, .32); }
html[data-theme="dark"] .mg-auth .mg-input:focus { background: rgba(2, 6, 23, .7); border-color: var(--accent); box-shadow: 0 0 0 4px rgba(var(--pro-glow), .25); }
html[data-theme="dark"] .mg-auth .mg-control:focus-within > .ico { color: #a5b4fc; }
html[data-theme="dark"] .mg-auth--member .mg-control:focus-within > .ico { color: #5eead4; }
html[data-theme="dark"] .mg-auth a { color: #a5b4fc; }
html[data-theme="dark"] .mg-auth--member a { color: #5eead4; }
html[data-theme="dark"] .mg-auth .mg-btn-ghost { background: rgba(2, 6, 23, .4); }
html[data-theme="dark"] .mg-auth .mg-btn-ghost:hover { background: rgba(2, 6, 23, .6); color: #e2e8f0 !important; }

@media (prefers-reduced-motion: reduce) {
    body.mg-auth::before, body.mg-auth::after, .mg-art *, .mg-auth .mg-card, .mg-auth .mg-hero { animation: none !important; }
}