:root {
    --primary-color: #c215d7;
    --secondary-color: #ff7a21;
    --theme-dark: #130016;
    --panel-dark: #310044;
    --panel-mid: #5a006a;
    --primary-bg: #170018;
    --primary-text: #fff8ff;
    --secondary-text: #ddc8e5;
    --soft-text: #b794c0;
    --border-color: rgba(255, 255, 255, .13);
    --success-color: #41c978;
    --danger-color: #ff6a54;
    --white-color: #ffffff;
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
    margin: 0;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    color: var(--primary-text);
    background: var(--primary-bg);
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
}

.auth-page {
    min-height: 100vh;
    overflow: hidden;
    background:
        linear-gradient(120deg, rgba(255, 122, 33, .95) 0 7%, transparent 7% 100%) 18% 100% / 360px 180px no-repeat,
        linear-gradient(120deg, transparent 0 78%, rgba(255, 122, 33, .95) 78% 84%, transparent 84% 100%) 58% 0 / 480px 170px no-repeat,
        radial-gradient(ellipse at 27% 7%, rgba(210, 0, 190, .78), transparent 36%),
        linear-gradient(135deg, #520052 0%, #210021 44%, #080008 100%);
}

/* Company-configurable login page */
.auth-page{background-color:var(--login-bg,var(--primary-bg));background-image:var(--login-bg-image,none),linear-gradient(135deg,var(--login-bg,#520052),#080008)}
.auth-form-panel{background:linear-gradient(180deg,color-mix(in srgb,var(--login-panel,#5a006a) 82%,transparent),var(--login-panel,#310044));color:var(--login-text,#fff)}
.auth-highlight{color:var(--login-text,#fff)}
.primary-button,.check-icon{background:var(--login-accent,var(--primary-color));border-color:var(--login-accent,var(--primary-color))}
.auth-card.login-layout2{display:block;width:min(520px,100%);min-height:0}.login-layout2 .auth-form-panel{min-height:580px}.login-layout2 .auth-highlight{display:none}
.auth-card.login-layout3{grid-template-columns:1fr minmax(330px,430px)}.login-layout3 .auth-highlight{order:-1}.login-layout3 .auth-form-panel{order:2}
.auth-card.login-layout4{display:block;width:min(500px,100%);min-height:0;background:#fff}.login-layout4 .auth-form-panel{min-height:560px;background:#fff;color:#321536}.login-layout4 .auth-highlight{display:none}.login-layout4 .field-group label,.login-layout4 .remember-row{color:#321536}.login-layout4 .custom-input-field{border-color:#d9c9dc}.login-layout4 .auth-links{color:#76577a}
.auth-card.login-layout5{background:rgba(35,0,42,.48);backdrop-filter:blur(18px)}.login-layout5 .auth-form-panel,.login-layout5 .auth-highlight{background:rgba(60,0,70,.48);backdrop-filter:blur(12px)}

.auth-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 32px;
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 48px 48px;
}

.auth-card {
    position: relative;
    width: min(1180px, 100%);
    min-height: 600px;
    display: grid;
    grid-template-columns: minmax(330px, 430px) 1fr;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .11);
    background: rgba(34, 0, 42, .92);
    box-shadow: 0 34px 90px rgba(0, 0, 0, .52);
}

.auth-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
    background-size: 42px 42px;
    opacity: .8;
    pointer-events: none;
    z-index: 0;
}

.signup-card {
    width: min(1240px, 100%);
    grid-template-columns: minmax(420px, 570px) 1fr;
}

.auth-form-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 44px;
    color: var(--white-color);
    background:
        linear-gradient(180deg, rgba(118, 0, 124, .72), rgba(44, 0, 66, .9)),
        rgba(47, 0, 61, .94);
    z-index: 1;
}

.signup-form-panel {
    padding: 28px 44px;
}

.auth-form-title {
    position: relative;
    z-index: 1;
    margin: 0 0 8px;
    color: var(--white-color);
    font-size: 24px;
    line-height: 1.2;
}

.auth-form-copy {
    position: relative;
    z-index: 1;
    margin: 0 0 18px;
    color: rgba(255, 255, 255, .72);
    font-size: 14px;
    line-height: 1.5;
}

.signup-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
}

.auth-form-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .08), transparent 34%),
        linear-gradient(25deg, rgba(194, 21, 215, .25), transparent 55%);
    pointer-events: none;
}

.auth-form-panel > * {
    position: relative;
    z-index: 1;
}

.form-logo {
    min-height: 48px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
}

.form-logo img {
    max-width: 158px;
    max-height: 48px;
    display: block;
}

.field-group {
    width: 100%;
    margin-bottom: 10px;
}

.field-group label {
    display: block;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, .88);
    font-size: 13px;
    font-weight: 600;
}

.custom-input-field {
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, .38);
    border-radius: 4px;
    background: rgba(255, 255, 255, .78);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.custom-input-field:focus-within {
    border-color: rgba(255, 122, 33, .96);
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 0 0 4px rgba(255, 122, 33, .17);
}

.login-input {
    width: 100%;
    min-height: 42px;
    border: 0;
    outline: 0;
    padding: 0 15px;
    color: #301035;
    background: transparent;
    font: inherit;
}

.login-input::placeholder {
    color: rgba(48, 16, 53, .62);
}

.remember-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0 22px;
    color: rgba(255, 255, 255, .9);
    font-size: 14px;
    font-weight: 600;
}

.remember-row input {
    width: 18px;
    height: 18px;
    accent-color: var(--primary-color);
}

.primary-button {
    width: 100%;
    min-height: 44px;
    border: 1px solid rgba(255, 54, 221, .72);
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--white-color);
    background: linear-gradient(90deg, #bf13d4, #8f00b7);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.primary-button:hover {
    background: linear-gradient(90deg, #d91eed, #a800ce);
    box-shadow: 0 14px 30px rgba(194, 21, 215, .34);
    transform: translateY(-1px);
}

.auth-links {
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    color: rgba(255, 255, 255, .62);
    font-size: 13px;
}

.auth-links a:hover {
    color: var(--white-color);
}

.auth-highlight {
    position: relative;
    padding: 56px 68px 28px;
    overflow: hidden;
    color: var(--white-color);
    background:
        linear-gradient(90deg, rgba(25, 0, 30, .55), rgba(35, 0, 34, .12)),
        linear-gradient(145deg, rgba(55, 0, 68, .72), rgba(92, 7, 63, .45));
    z-index: 1;
}

.auth-highlight::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
    background-size: 42px 42px;
    pointer-events: none;
}

.auth-highlight > * {
    position: relative;
    z-index: 1;
}

.auth-highlight h1 {
    max-width: 680px;
    margin: 0 0 12px;
    color: var(--white-color);
    font-size: clamp(32px, 4vw, 54px);
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: 0;
}

.auth-highlight h1 span {
    color: #d2a468;
    font-weight: 400;
}

.auth-highlight p {
    max-width: 560px;
    margin: 0 0 18px;
    color: rgba(255, 255, 255, .75);
    font-size: 15px;
    line-height: 1.7;
}

.feature-label {
    display: inline-flex;
    margin: 14px 0 10px;
    color: #d2a468;
    font-size: 15px;
    font-weight: 800;
}

.feature-list {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 20px;
    max-width: 680px;
    padding: 0;
    margin: 0 0 26px;
    list-style: none;
}

.feature-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: rgba(255, 255, 255, .9);
    font-size: 14px;
    font-weight: 600;
}

.check-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--white-color);
    background: var(--success-color);
    font-size: 13px;
    font-weight: 800;
}

.feature-image {
    width: min(470px, 100%);
    display: block;
    margin: 10px auto 0;
    object-fit: contain;
}

.validation-summary,
.field-error {
    display: block;
    margin: 6px 0 10px;
    color: #ffd8d3;
    font-size: 13px;
    font-weight: 600;
}

.success-summary {
    display: block;
    margin: 6px 0 14px;
    padding: 10px 12px;
    border: 1px solid rgba(41, 214, 151, .4);
    border-radius: 4px;
    color: #c9ffea;
    background: rgba(41, 214, 151, .12);
    font-size: 13px;
    font-weight: 700;
}

.validation-summary:empty,
.field-error:empty,
.success-summary:empty {
    display: none;
    margin: 0;
    padding: 0;
    border: 0;
}

@media (max-width: 980px) {
    .auth-card {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .auth-highlight {
        display: none;
    }

    .auth-form-panel {
        min-height: calc(100vh - 64px);
    }

    .signup-card {
        grid-template-columns: 1fr;
    }

    .signup-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .auth-wrapper {
        padding: 0;
    }

    .auth-card {
        min-height: 100vh;
        border-radius: 0;
    }

    .auth-form-panel {
        padding: 28px 20px;
    }
}

/* Global light typography for login and signup */
body,
button,
input,
select,
textarea,
label,
span,
p,
a,
small,
em,
strong,
b,
li {
    font-weight: 400;
}

h1,
h2,
h3,
.auth-form-title,
.auth-highlight h1,
.feature-label,
.primary-button {
    font-weight: 500;
}

.auth-form-title {
    font-size: 22px;
}

.auth-form-copy,
.field-group label,
.remember-row,
.auth-links,
.feature-list,
.feature-label {
    font-size: 12px;
}

.auth-highlight h1 {
    font-size: clamp(28px, 3.4vw, 46px);
}

.auth-highlight p {
    font-size: 13px;
}

.validation-summary,
.field-error,
.success-summary {
    font-weight: 400;
}