:root {
    --app-primary: #c18a4b;
    --app-secondary: var(--app-primary);
    --login-bg: #111315;
    --login-bg-end: #0f1113;
    --login-text: #f4f1ec;
    --login-soft: #ddd6cb;
    --login-muted: #a5adb7;
    --login-border: rgba(255,255,255,.10);
    --login-border-strong: rgba(255,255,255,.16);
    --login-shadow: 0 30px 80px rgba(0,0,0,.45);
}

html.theme-light {
    --login-bg: #f7f9fc;
    --login-bg-end: #eef3f8;
    --login-text: #0f172a;
    --login-soft: #334155;
    --login-muted: #64748b;
    --login-border: rgba(15,23,42,.10);
    --login-border-strong: rgba(15,23,42,.16);
    --login-shadow: 0 30px 80px rgba(15,23,42,.12);
}

html.theme-dark {
    --login-bg: #111315;
    --login-bg-end: #0f1113;
    --login-text: #f4f1ec;
    --login-soft: #ddd6cb;
    --login-muted: #a5adb7;
    --login-border: rgba(255,255,255,.10);
    --login-border-strong: rgba(255,255,255,.16);
    --login-shadow: 0 30px 80px rgba(0,0,0,.45);
}

html.theme-default {
    --login-bg: #111315;
    --login-bg-end: #0f1113;
    --login-text: #f4f1ec;
    --login-soft: #ddd6cb;
    --login-muted: #a5adb7;
    --login-border: rgba(255,255,255,.10);
    --login-border-strong: rgba(255,255,255,.16);
    --login-shadow: 0 30px 80px rgba(0,0,0,.45);
    /* Bronze branding */

    --app-primary: #C18A4B;
    --app-secondary: #8A6338;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body.company-login-site {
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    color: var(--login-text);
    font-family: Manrope, "Plus Jakarta Sans", "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    background: linear-gradient(180deg, var(--login-bg) 0%, var(--login-bg-end) 100%);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.company-login-main {
    width: min(1180px, 100%);
    min-height: calc(100vh - 46px);
    display: grid;
    place-items: center;
    margin: 0 auto;
    padding: clamp(18px, 4vw, 48px);
}

.company-login-powered {
    position: fixed;
    left: 50%;
    bottom: 18px;
    z-index: 10;
    transform: translateX(-50%);
    color: var(--login-muted);
    font-size: .78rem;
    white-space: nowrap;
}

    .company-login-powered strong {
        color: var(--login-soft);
        font-weight: 620;
    }

body.company-login-site::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background: radial-gradient( circle at 15% 8%, color-mix(in srgb, var(--app-primary) 20%, transparent), transparent 30rem ), radial-gradient( circle at 88% 10%, color-mix(in srgb, var(--app-secondary) 12%, transparent), transparent 26rem );
}

body.company-login-site::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .16;
    background-image: linear-gradient( 115deg, transparent 0 48%, color-mix(in srgb, var(--app-primary) 16%, transparent) 48.15%, transparent 48.45% ), linear-gradient( 65deg, transparent 0 56%, color-mix(in srgb, var(--login-text) 7%, transparent) 56.15%, transparent 56.45% ), radial-gradient( circle at 20% 20%, color-mix(in srgb, var(--login-text) 7%, transparent) 0 1px, transparent 1px );
    background-size: 520px 520px, 620px 620px, 22px 22px;
    mask-image: linear-gradient(to bottom, black 0%, transparent 82%);
}

@media (max-width: 640px) {
    .company-login-powered {
        position: static;
        transform: none;
        text-align: center;
        padding: 0 16px 18px;
    }

    .company-login-main {
        min-height: auto;
        padding: 12px;
    }
}