body.mail-auth-page {
    font-family: "Ubuntu", sans-serif;
    background:
        radial-gradient(circle at 18% 18%, rgba(255, 179, 0, 0.16), transparent 22%),
        radial-gradient(circle at 82% 12%, rgba(255, 77, 109, 0.14), transparent 26%),
        radial-gradient(circle at 50% 80%, rgba(0, 229, 255, 0.08), transparent 24%),
        linear-gradient(160deg, #05070d 0%, #090c14 42%, #0d1119 100%);
    color: #f8fafc;
}

body.mail-auth-page .logo-container,
body.mail-auth-page .site-header,
body.mail-auth-page .site-footer {
    display: none;
}

body.mail-auth-page .container {
    width: 100%;
    max-width: none;
    padding: 0;
    margin: 0;
    background: transparent;
}

.mail-page-heading {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}

.portal-wordmark,
.mail-page-heading .portal-wordmark {
    font-family: 'Orbitron', 'Ubuntu', sans-serif;
    text-transform: uppercase;
    letter-spacing: .11em;
    color: #ffd43b;
    text-shadow: 0 0 7px rgba(255, 212, 59, .92), 0 0 20px rgba(255, 123, 0, .35);
}

.portal-wordmark__system {
    color: #ffb703;
    font-weight: 700;
}

.mail-auth-wrapper {
    min-height: calc(100vh - 60px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px 64px;
}

.mail-auth-wrapper .auth-panel {
    width: min(520px, 100%);
    background: linear-gradient(180deg, rgba(17, 20, 30, 0.94), rgba(10, 12, 20, 0.9)) !important;
    border: 1px solid rgba(255, 183, 3, 0.16) !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,.02) inset, 0 0 28px rgba(255, 123, 0, .07) !important;
    padding: 34px;
    display: grid;
    gap: 24px;
    clip-path: polygon(0 0, 97% 0, 100% 10%, 100% 100%, 3% 100%, 0 90%);
}

.mail-auth-wrapper .auth-panel__header {
    display: grid;
    gap: 12px;
}

.mail-auth-wrapper .auth-panel__header h1 {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 500;
    color: #ffd43b !important;
    font-family: 'Orbitron', 'Ubuntu', sans-serif;
    text-transform: uppercase;
    letter-spacing: .05em;
    text-shadow: 0 0 8px rgba(255, 212, 59, .85), 0 0 22px rgba(255, 123, 0, .35) !important;
}

.mail-auth-wrapper .auth-panel__header .auth-subtitle,
.mail-auth-wrapper .auth-hints,
.mail-auth-wrapper .auth-hints p {
    margin: 0;
    color: #b7c2d0 !important;
    font-size: 0.95rem;
    line-height: 1.6;
}

.mail-auth-wrapper .flash {
    padding: 16px 18px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
    font-size: 0.92rem;
    color: #f8fafc;
}

.mail-auth-wrapper .flash.error {
    border-color: rgba(255, 77, 109, .35);
    background: rgba(127, 29, 29, 0.22);
    color: #ffe0e6;
}

.mail-auth-wrapper .flash.success {
    border-color: rgba(255, 212, 59, .22);
    background: rgba(92, 60, 0, 0.22);
    color: #fff2b8;
}

.mail-auth-wrapper .flash.info {
    border-color: rgba(0,229,255,.18);
    background: rgba(16, 22, 32, .6);
    color: #f8fafc;
}

.mail-auth-wrapper .auth-form {
    display: grid;
    gap: 18px;
}

.mail-auth-wrapper .input-group {
    display: grid;
    gap: 8px;
}

.mail-auth-wrapper .input-group span {
    font-weight: 500;
    color: #ffd43b;
    text-transform: uppercase;
    letter-spacing: .08em;
    text-shadow: 0 0 4px rgba(255,244,140,.9), 0 0 10px rgba(255,183,3,.78), 0 0 18px rgba(255,123,0,.4);
}

.mail-auth-wrapper .input-group input,
.mail-auth-wrapper .input-group select,
.mail-auth-wrapper .input-group textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(255, 183, 3, 0.14);
    background: linear-gradient(180deg, rgba(20, 23, 34, .95), rgba(12, 15, 24, .9));
    color: #f8fafc;
    clip-path: polygon(0 0, 98% 0, 100% 18%, 100% 100%, 2% 100%, 0 82%);
}

.mail-auth-wrapper .input-group input:focus,
.mail-auth-wrapper .input-group select:focus,
.mail-auth-wrapper .input-group textarea:focus {
    border-color: rgba(255, 183, 3, 0.45);
    box-shadow: 0 0 0 1px rgba(255, 212, 59, 0.08), 0 0 18px rgba(255, 123, 0, 0.12);
    outline: none;
}

.mail-auth-wrapper .action-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.mail-auth-wrapper .action-row .btn-primary,
.mail-auth-wrapper .action-row .btn-secondary,
.mail-auth-wrapper .auth-form .btn-primary,
.mail-auth-wrapper .back-link {
    flex: 1 1 180px;
    justify-content: center;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    clip-path: polygon(0 0, 94% 0, 100% 30%, 100% 100%, 6% 100%, 0 70%);
    border-radius: 0;
}

.mail-auth-wrapper .action-row .btn-primary,
.mail-auth-wrapper .auth-form .btn-primary {
    background: linear-gradient(135deg, #2b1d00, #7c4f00) !important;
    color: #fff6bf !important;
    border: 1px solid rgba(255, 212, 59, .28) !important;
    box-shadow: 0 0 16px rgba(255, 183, 3, .16), inset 0 0 10px rgba(255, 212, 59, .08) !important;
}

.mail-auth-wrapper .action-row .btn-secondary,
.mail-auth-wrapper .back-link {
    background: rgba(16, 22, 32, .88) !important;
    color: #f8fafc !important;
    border: 1px solid rgba(0,229,255,.2) !important;
}

.mail-auth-wrapper .action-row .btn-primary:hover,
.mail-auth-wrapper .action-row .btn-secondary:hover,
.mail-auth-wrapper .auth-form .btn-primary:hover,
.mail-auth-wrapper .back-link:hover {
    background: linear-gradient(135deg, rgba(255, 183, 3, .14), rgba(255, 123, 0, .18)) !important;
    border-color: rgba(255, 183, 3, 0.28) !important;
    color: #fff !important;
    box-shadow: 0 0 18px rgba(255,123,0,.14) !important;
}

.mail-auth-wrapper .with-icon {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.mail-auth-wrapper .with-icon svg {
    width: 1.6em;
    height: 1.6em;
    color: #ffd43b;
}

@media (max-width: 640px) {
    .mail-auth-wrapper {
        padding: 24px 16px 40px;
    }

    .mail-auth-wrapper .auth-panel {
        padding: 26px 22px;
    }
}