:root {
    --wk-auth-bg: linear-gradient(180deg, rgba(248, 255, 251, 0.96), rgba(239, 247, 243, 0.99));
    --wk-auth-surface: rgba(255, 255, 255, 0.88);
    --wk-auth-border: rgba(81, 167, 118, 0.16);
    --wk-auth-border-strong: rgba(59, 145, 97, 0.26);
    --wk-auth-shadow: 0 24px 52px rgba(16, 48, 28, 0.08);
    --wk-auth-title: #153124;
    --wk-auth-text: #4e6359;
    --wk-auth-muted: #728579;
    --wk-auth-accent: #279766;
    --wk-auth-accent-strong: #17784f;
    --wk-auth-accent-soft: rgba(60, 183, 122, 0.1);
}

body.dark {
    --wk-auth-bg: linear-gradient(180deg, rgba(14, 30, 22, 0.97), rgba(9, 20, 15, 0.99));
    --wk-auth-surface: rgba(255, 255, 255, 0.05);
    --wk-auth-border: rgba(105, 223, 162, 0.12);
    --wk-auth-border-strong: rgba(105, 223, 162, 0.22);
    --wk-auth-shadow: 0 26px 58px rgba(0, 0, 0, 0.34);
    --wk-auth-title: #effff4;
    --wk-auth-text: rgba(223, 245, 231, 0.9);
    --wk-auth-muted: rgba(194, 223, 204, 0.72);
    --wk-auth-accent: #6fdb9c;
    --wk-auth-accent-strong: #42b378;
    --wk-auth-accent-soft: rgba(111, 219, 156, 0.12);
}

#login,
#register,
#forgot-password,
#change-password,
#tfa,
#complete-signup,
#authme-email {
    padding: 1.25rem !important;
    border-radius: 26px !important;
    border: 1px solid var(--wk-auth-border) !important;
    background: var(--wk-auth-bg) !important;
    box-shadow: var(--wk-auth-shadow);
}

#login .ui.header,
#register .ui.header,
#forgot-password .ui.header,
#change-password .ui.header,
#tfa .ui.header,
#complete-signup .ui.header,
#authme-email .ui.header,
h2.ui.header {
    color: var(--wk-auth-title) !important;
}

#login .sub.header,
#register .sub.header,
#forgot-password .sub.header,
#change-password .sub.header,
#tfa .sub.header,
#complete-signup .sub.header,
#authme-email .sub.header,
#login label,
#register label,
#forgot-password label,
#change-password label,
#tfa label,
#complete-signup label,
#authme-email label {
    color: var(--wk-auth-text) !important;
}

#login .ui.form input:not(.button),
#register .ui.form input:not(.button),
#register .ui.form textarea,
#register .ui.form .ui.selection.dropdown,
#forgot-password .ui.form input:not(.button),
#change-password .ui.form input:not(.button),
#tfa .ui.form input:not(.button),
#complete-signup .ui.form input:not(.button),
#authme-email .ui.form input:not(.button),
#authme-email .ui.form textarea,
#authme-email .ui.form .ui.selection.dropdown {
    border-radius: 16px !important;
    border-color: var(--wk-auth-border) !important;
    background: var(--wk-auth-surface) !important;
    color: var(--wk-auth-title) !important;
    box-shadow: none !important;
}

#login .ui.form input:not(.button):focus,
#register .ui.form input:not(.button):focus,
#register .ui.form textarea:focus,
#register .ui.form .ui.selection.dropdown.active,
#register .ui.form .ui.selection.dropdown.visible,
#forgot-password .ui.form input:not(.button):focus,
#change-password .ui.form input:not(.button):focus,
#tfa .ui.form input:not(.button):focus,
#complete-signup .ui.form input:not(.button):focus,
#authme-email .ui.form input:not(.button):focus,
#authme-email .ui.form textarea:focus,
#authme-email .ui.form .ui.selection.dropdown.active,
#authme-email .ui.form .ui.selection.dropdown.visible {
    border-color: var(--wk-auth-border-strong) !important;
    box-shadow: 0 0 0 3px rgba(60, 183, 122, 0.1) !important;
}

#login .ui.primary.button,
#register .ui.primary.button,
#forgot-password .ui.primary.button,
#change-password .ui.primary.button,
#tfa .ui.primary.button,
#complete-signup .ui.primary.button,
#authme-email .ui.primary.button,
#login .ui.large.positive.button,
#register .ui.large.positive.button {
    background: linear-gradient(135deg, var(--wk-auth-accent), var(--wk-auth-accent-strong)) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 14px !important;
}

#login .ui.negative.button,
#register .ui.button:not(.primary):not(.positive),
#complete-signup .ui.button:not(.primary),
#authme-email .ui.button:not(.primary) {
    border-radius: 14px !important;
}

#login .ui.horizontal.divider,
#register .ui.horizontal.divider {
    color: var(--wk-auth-muted);
}

#login .ui.equal.width.grid .button,
#register .ui.equal.width.grid .button,
#register .ui.equal.width.two.column.grid .button,
#login .ui.equal.width.two.column.grid .button {
    min-height: 48px;
    border-radius: 16px !important;
}

@media only screen and (max-width: 767px) {
    #login,
    #register,
    #forgot-password,
    #change-password,
    #tfa,
    #complete-signup,
    #authme-email {
        padding: 1rem !important;
        border-radius: 22px !important;
    }
}