/* ═══════════════════════════════════════════════════════════════════════
 * dgym-auth.css — signin + signup shared styling
 *
 * Two-column layout (desktop):
 *   LEFT  45%  — white form pane
 *   RIGHT 55%  — full-bleed aurora canvas hosting the d3 feature graph
 *
 * Mobile (< 992px):
 *   graph pane hides; form fills the viewport. A small "feature
 *   highlights" strip appears below the form so mobile users still
 *   see the product story.
 *
 * Only rules Bootstrap utilities can't express cleanly live here:
 *   · two-pane layout
 *   · logo positioning + glow
 *   · form card entrance animation
 *   · input focus ring (blue glow)
 *   · gradient button with shimmer
 *   · d3 node hover affordance
 *   · pane-swap transition (signin ↔ forgot)
 *   · feature chip styling for mobile strip
 * ═══════════════════════════════════════════════════════════════════════ */

body.dgym-auth {
    min-height: 100vh;
    margin: 0;
    color: #0f172a;
    background: #ffffff;
    overflow-x: hidden;
    font-family: 'Open Sans', system-ui, -apple-system, sans-serif;
}

/* ────────── LAYOUT ────────── */
.auth-layout {
    display: flex;
    min-height: 100vh;
    position: relative;
}
.auth-pane-left {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #ffffff;
    position: relative;
    z-index: 2;
}
.auth-pane-right {
    display: none;
    flex: 1;
    position: relative;
    overflow: hidden;
    background: #f1f5f9;              /* fallback under the aurora */
}
@media (min-width: 992px) {
    .auth-pane-left  { flex: 0 0 45%; max-width: 45%; padding: 2rem 3rem; }
    .auth-pane-right { display: flex; align-items: center; justify-content: center; }
}

/* d3 graph SVG — fills the right pane. Aurora gradient is drawn
   INSIDE the SVG via <rect>, so this just needs to fill. */
.dgym-auth-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.dgym-auth-bg .dgym-node         { pointer-events: auto; cursor: grab; }
.dgym-auth-bg .dgym-node.fixed   { cursor: default; }
.dgym-auth-bg .dgym-node:hover .dgym-core { stroke-width: 3.5; }
.dgym-auth-bg .dgym-node:hover .dgym-halo { opacity: 0.45 !important; }

/* ────────── FORM CARD ────────── */
.auth-form {
    width: 100%;
    max-width: 440px;
    animation: dgym-card-rise 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.auth-form.wide { max-width: 640px; }
@keyframes dgym-card-rise {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* ────────── LOGO ──────────
   Real PNG asset: assets/img/logo-main-min.png. If missing, a
   gradient "D" glyph takes its place. */
.auth-logo-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}
.auth-logo {
    height: 72px;
    width: auto;
    max-width: 240px;
    object-fit: contain;
}
.auth-logo-fallback {
    width: 72px; height: 72px;
    border-radius: 18px;
    background: linear-gradient(135deg, #2152ff 0%, #21d4fd 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    font-size: 2rem;
    color: #ffffff;
    letter-spacing: -0.03em;
    box-shadow: 0 10px 28px rgba(33, 82, 255, 0.32),
                0 0 0 1px rgba(255, 255, 255, 0.25) inset;
}

/* ────────── TYPOGRAPHY ────────── */
.auth-form h3 {
    font-weight: 800;
    font-size: 1.85rem;
    margin-bottom: 0.35rem;
    color: #0f172a;
    letter-spacing: -0.02em;
}
.auth-form .auth-sub {
    color: #64748b;
    font-size: 0.92rem;
    margin-bottom: 0;
}

/* ────────── INPUTS ────────── */
.auth-form .form-control {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    color: #0f172a;
    font-size: 0.95rem;
    padding: 0.8rem 0.95rem;
    border-radius: 12px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.auth-form .form-control::placeholder { color: #94a3b8; }
.auth-form .form-control:focus {
    background: #ffffff;
    border-color: #4a9eff;
    box-shadow: 0 0 0 4px rgba(74, 158, 255, 0.14);
    outline: none;
}
.auth-form label,
.auth-form .form-label {
    color: #334155;
    font-weight: 600;
    font-size: 0.82rem;
    margin-bottom: 0.45rem;
}

/* ────────── BUTTONS ────────── */
.btn-dgym-primary {
    background: linear-gradient(95deg, #2152ff 0%, #4a9eff 55%, #21d4fd 100%);
    color: #ffffff;
    border: 0;
    border-radius: 12px;
    font-weight: 600;
    letter-spacing: 0.2px;
    padding: 0.82rem 1rem;
    position: relative;
    overflow: hidden;
    transition: transform 0.12s ease, box-shadow 0.18s ease, filter 0.18s ease;
    box-shadow: 0 8px 22px rgba(33, 82, 255, 0.32);
}
.btn-dgym-primary:hover:not(:disabled) {
    filter: brightness(1.08);
    transform: translateY(-1px);
    color: #ffffff;
    box-shadow: 0 12px 28px rgba(33, 82, 255, 0.44);
}
.btn-dgym-primary:active:not(:disabled) { transform: translateY(0); }
.btn-dgym-primary::after {
    content: '';
    position: absolute; top: 0; left: -60%;
    width: 40%; height: 100%;
    background: linear-gradient(110deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-20deg);
    transition: left 0.55s ease;
}
.btn-dgym-primary:hover::after { left: 120%; }
.btn-dgym-primary:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-dgym-outline {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    color: #334155;
    border-radius: 12px;
    font-weight: 500;
    padding: 0.76rem 1rem;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}
.btn-dgym-outline:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #0f172a;
    box-shadow: 0 4px 14px rgba(71, 85, 105, 0.08);
    transform: translateY(-1px);
}

/* ────────── LINKS + UI BITS ────────── */
.auth-form a.link-accent {
    color: #2563eb;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.12s;
}
.auth-form a.link-accent:hover { color: #1d4ed8; text-decoration: underline; }

.pwd-toggle {
    position: absolute;
    right: 12px; top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    cursor: pointer;
    transition: color 0.12s ease;
    z-index: 3;
}
.pwd-toggle:hover { color: #334155; }

.auth-subpane { transition: opacity 0.25s ease, transform 0.25s ease; }
.auth-subpane.hidden { display: none; }

/* ────────── OTP cells (signup modal) ────────── */
.otp-cell {
    width: 54px; height: 60px;
    text-align: center;
    font-size: 1.45rem; font-weight: 700;
    background: #f8fafc;
    border: 1.5px solid #cbd5e1;
    color: #0f172a;
    border-radius: 12px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.otp-cell:focus {
    border-color: #4a9eff;
    box-shadow: 0 0 0 4px rgba(74, 158, 255, 0.18);
    outline: none;
}

/* ────────── MOBILE FEATURE STRIP ──────────
   Only shown below the form on narrow viewports where the full
   d3 graph is hidden. Compact pills with icon + label — gives
   mobile visitors the product story that desktop gets from the graph. */
.mobile-features {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: center;
    margin-top: 1.5rem;
    padding: 0 1rem;
}
@media (min-width: 992px) {
    .mobile-features { display: none; }
}
.feat-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    white-space: nowrap;
}
.feat-chip i { font-size: 0.8rem; color: #2563eb; }

/* ────────── DESKTOP TRUST STRIP ──────────
   Tiny row under the form with icon+text trust signals
   (security, uptime, payments). Appears only on desktop where
   the form has breathing room; hidden on mobile to avoid crowding. */
.desktop-trust {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 1.4rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #f1f5f9;
    font-size: 0.72rem;
    color: #64748b;
}
@media (min-width: 992px) {
    .desktop-trust { display: flex; }
}
.desktop-trust .trust-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.desktop-trust .trust-item i { color: #10b981; font-size: 0.8rem; }

/* ═══════════════════════════════════════════════════════════════════════
   Numeric input fields — kill default browser spinner arrows on
   type="number" and inputmode="numeric" inputs. Matches the rule shipped
   in dgym-navbar.css so behavior stays consistent between authed and
   anonymous (auth) pages. Webkit hides the spinner element; Firefox
   uses -moz-appearance / appearance: textfield.
   ═══════════════════════════════════════════════════════════════════════ */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button,
input[inputmode="numeric"]::-webkit-outer-spin-button,
input[inputmode="numeric"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"],
input[inputmode="numeric"] {
    -moz-appearance: textfield;
    appearance: textfield;
}