/* Front-door staging gate — a faithful copy of the Shareholder Directory (holders26)
   sign-in card: same Nerval logo, colors, radius, shadow, fonts and spacing. Values are
   lifted verbatim from that app's dark theme so the two gates read as one product.
   Everything is scoped under .supers-gate so it can't touch the rest of the page. */
.supers-gate {
    --sg-bg-primary: #0a0a0a;
    --sg-bg-card: #1a1a1a;
    --sg-bg-input: #1a1a1a;
    --sg-text-primary: #ffffff;
    --sg-text-secondary: #b0b0b0;
    --sg-text-muted: #666666;
    --sg-accent-gradient: linear-gradient(135deg, #2628ab 0%, #699bb8 100%);
    --sg-accent-glow: rgba(105, 155, 184, 0.15);
    --sg-border: #2a2a2a;
    --sg-border-focus: #699bb8;
    --sg-radius-md: 6px;
    --sg-radius-xl: 12px;
    --sg-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    --sg-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* = .login-body */
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sg-bg-primary);
    padding: 20px;
    font-family: var(--sg-font);
    color: var(--sg-text-primary);
}

.supers-gate * { box-sizing: border-box; }

.supers-gate .login-wrap { width: 100%; max-width: 380px; text-align: center; }

.supers-gate .login-card {
    background: var(--sg-bg-card);
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-radius-xl);
    padding: 38px 34px;
    box-shadow: var(--sg-shadow-lg);
}

.supers-gate .login-logo { margin-bottom: 22px; }
.supers-gate .login-logo img { height: 34px; }

.supers-gate .login-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--sg-text-primary);
    letter-spacing: -0.01em;
    margin: 0;
}

.supers-gate .login-sub {
    font-size: 12.5px;
    color: var(--sg-text-muted);
    margin-top: 5px;
    margin-bottom: 24px;
}

.supers-gate .login-error {
    background: rgba(231, 76, 60, 0.12);
    border: 1px solid rgba(231, 76, 60, 0.4);
    color: #e88;
    font-size: 13px;
    padding: 9px 12px;
    border-radius: var(--sg-radius-md);
    margin-bottom: 16px;
    text-align: left;
}

.supers-gate .field-label {
    display: block;
    font-size: 12px;
    color: var(--sg-text-secondary);
    margin-bottom: 6px;
    font-weight: 500;
    text-align: left;
}

.supers-gate .login-input {
    width: 100%;
    background: var(--sg-bg-input);
    border: 1px solid var(--sg-border);
    color: var(--sg-text-primary);
    padding: 11px 13px;
    border-radius: var(--sg-radius-md);
    font-family: var(--sg-font);
    font-size: 14px;
    margin-bottom: 16px;
}

.supers-gate .login-input:focus {
    border-color: var(--sg-border-focus);
    box-shadow: 0 0 0 3px var(--sg-accent-glow);
    outline: none;
}

.supers-gate .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 0.9rem;
    font-weight: 500;
    font-family: var(--sg-font);
    border-radius: var(--sg-radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    user-select: none;
    line-height: 1.4;
}

.supers-gate .btn-primary {
    background: var(--sg-accent-gradient);
    color: #fff;
    border: none;
    font-weight: 600;
}

.supers-gate .btn-primary:disabled { opacity: 0.6; cursor: default; }

.supers-gate .login-btn { width: 100%; padding: 12px; font-size: 14px; margin-top: 4px; }

.supers-gate .login-foot { margin-top: 18px; font-size: 11px; color: var(--sg-text-muted); }

/* While the gate is up, the page underneath must not scroll. */
html.supers-gate-locked,
body.supers-gate-locked { overflow: hidden !important; }