.porteiro-body {
    margin: 0;
    min-height: 100vh;
    background: var(--porteiro-background-color, #000000);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.porteiro-background {
    position: fixed;
    inset: 0;
    background-image: var(--porteiro-background-image);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    filter: grayscale(var(--porteiro-background-image-grayscale, 100%));
    opacity: calc(var(--porteiro-background-image-opacity, 45) / 100);
    pointer-events: none;
}

.porteiro-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

.porteiro-form {
    width: min(720px, 100%);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

.porteiro-title,
.porteiro-label,
.porteiro-input,
.porteiro-button,
.porteiro-error {
    font-family: "EB Garamond", serif;
}

.porteiro-title {
    font-size: 2rem;
    text-align: center;
    font-style: italic;
    font-weight: 600;
}

.porteiro-form .porteiro-label {
    display: block;
    width: min(100%, var(--porteiro-password-field-width, 420px));
    text-align: center;
    color: var(--porteiro-label-color, #bdbdbd) !important;
    font-size: var(--porteiro-accent-font-size, 18px) !important;
    font-weight: var(--porteiro-label-font-weight, 400) !important;
    line-height: 1.2;
}

.porteiro-form .porteiro-input {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: var(--porteiro-password-field-height, 54px);
    padding: 0 3.25rem 0 1rem;
    background-color: var(--porteiro-password-field-fill-color, #111111) !important;
    color: var(--porteiro-password-field-text-color, #ffffff) !important;
    -webkit-text-fill-color: var(--porteiro-password-field-text-color, #ffffff);
    border: var(--porteiro-password-field-border-thickness, 1px) solid var(--porteiro-password-field-border-color, #2d2d2d) !important;
    border-radius: var(--porteiro-password-field-border-radius, 12px);
    box-sizing: border-box;
    font-size: var(--porteiro-accent-font-size, 18px);
    line-height: 1.2;
}

.porteiro-password-field {
    position: relative;
    width: min(100%, var(--porteiro-password-field-width, 420px));
}

.porteiro-password-toggle {
    appearance: none;
    -webkit-appearance: none;
    position: absolute;
    top: 50%;
    right: 0.75rem;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--porteiro-password-field-text-color, #ffffff) !important;
    cursor: pointer;
    opacity: 0.6;
}

.porteiro-password-toggle-icon {
    width: 1.35rem;
    height: 1.35rem;
    display: block;
}

.porteiro-password-toggle[aria-pressed="false"] .porteiro-password-toggle-slash {
    display: none;
}

.porteiro-form .porteiro-button {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    width: min(100%, var(--porteiro-button-width, 420px));
    height: var(--porteiro-button-height, 54px);
    padding: 0 1rem;
    background-color: var(--porteiro-button-color, #ffffff) !important;
    background-image: none !important;
    color: var(--porteiro-button-text-color, #000000) !important;
    border: 0;
    cursor: pointer;
    font-size: var(--porteiro-accent-font-size, 18px) !important;
    font-weight: var(--porteiro-button-font-weight, 400) !important;
    line-height: 1.2;
    text-align: center;
}

.porteiro-error {
    width: min(100%, var(--porteiro-password-field-width, 420px));
    text-align: center;
    color: #b3b3b3;
}

.porteiro-form .porteiro-button:hover,
.porteiro-form .porteiro-button:focus,
.porteiro-form .porteiro-button:active {
    background-color: var(--porteiro-button-color, #ffffff) !important;
    background-image: none !important;
    color: var(--porteiro-button-text-color, #000000) !important;
}