:root{
    --auth-ink:#123524;
    --auth-ink-soft:#1b4332;
    --auth-alarm:#d7263d;
    --auth-amber:#f0c020;
    --auth-paper:#fbf3d6;
    --auth-paper-white:#fffdf6;
    --auth-line:rgba(18,53,36,.12);
}

body{
    background:
        radial-gradient(circle at top left, rgba(215,38,61,.12), transparent 34%),
        radial-gradient(circle at bottom right, rgba(46,139,79,.12), transparent 32%),
        linear-gradient(180deg, #f7f0d1 0%, #fffdf6 46%, #edf5ec 100%);
}

.login-shell,
.register-shell{
    min-height: calc(100vh - 140px);
    padding: 36px 0 56px;
    display:flex;
    align-items:center;
}

.login-card,
.register-card{
    position:relative;
    overflow:hidden;
    border:1px solid rgba(18,53,36,.12);
    border-radius:22px;
    background:rgba(255,253,246,.88);
    box-shadow:0 30px 80px rgba(18,53,36,.16);
    backdrop-filter: blur(10px);
}

.login-card::before,
.register-card::before{
    content:"";
    position:absolute;
    inset:0 0 auto 0;
    height:8px;
    background:linear-gradient(to right, var(--auth-alarm) 0 33.33%, var(--auth-amber) 33.33% 66.66%, #2e8b4f 66.66% 100%);
}

.login-grid,
.register-grid{
    display:grid;
    min-height: 640px;
}

.login-grid{
    grid-template-columns: 1.05fr .95fr;
}

.register-grid{
    grid-template-columns: .95fr 1.05fr;
    min-height: 700px;
}

.login-visual,
.register-visual{
    padding:44px;
    background:
        linear-gradient(145deg, rgba(18,53,36,.97), rgba(27,67,50,.96)),
        url('../images/bg/page-title.jpg') center/cover;
    color:#fffdf6;
    position:relative;
    isolation:isolate;
}

.login-visual::after,
.register-visual::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 20% 18%, rgba(240,192,32,.22), transparent 26%),
        radial-gradient(circle at 86% 16%, rgba(215,38,61,.18), transparent 24%),
        radial-gradient(circle at 70% 84%, rgba(255,255,255,.08), transparent 28%);
    pointer-events:none;
    z-index:-1;
}

.login-kicker,
.register-kicker{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:7px 13px;
    border:1px solid rgba(240,192,32,.36);
    border-radius:999px;
    background:rgba(255,255,255,.06);
    color:var(--auth-amber);
    font-size:12px;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    margin-bottom:22px;
}

.login-title,
.register-title{
    font-family:'Teko', sans-serif;
    font-size:clamp(44px, 6vw, 74px);
    line-height:.92;
    letter-spacing:.01em;
    margin-bottom:18px;
}

.login-title span,
.register-title span{
    color:var(--auth-amber);
}

.login-copy,
.register-copy{
    max-width:520px;
    font-size:16px;
    line-height:1.8;
    color:rgba(255,253,246,.82);
    margin-bottom:28px;
}

.login-points,
.register-points{
    display:grid;
    gap:14px;
    margin-top:28px;
}

.login-point,
.register-point{
    display:flex;
    gap:12px;
    align-items:flex-start;
    padding:14px 16px;
    border-radius:14px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.09);
}

.login-point svg,
.register-point svg{
    width:18px;
    height:18px;
    margin-top:2px;
    flex-shrink:0;
    stroke:var(--auth-amber);
}

.login-point strong,
.register-point strong{
    display:block;
    font-size:14px;
    color:#fffdf6;
    margin-bottom:2px;
}

.login-point span,
.register-point span{
    display:block;
    font-size:13px;
    color:rgba(255,253,246,.72);
    line-height:1.5;
}

.login-badges,
.register-badges{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:28px;
}

.login-badge,
.register-badge{
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    letter-spacing:.03em;
    color:var(--auth-ink);
    background:rgba(255,255,255,.72);
    border:1px solid rgba(18,53,36,.1);
    padding:8px 12px;
    border-radius:999px;
}

.login-form-wrap,
.register-form-wrap{
    padding:44px;
    background:linear-gradient(180deg, rgba(255,253,246,.98), rgba(247,240,209,.88));
}

.login-form-head,
.register-form-head{
    margin-bottom:26px;
}

.login-form-head h2,
.register-form-head h2{
    font-size:32px;
    font-weight:900;
    color:var(--auth-ink);
    margin-bottom:8px;
}

.login-form-head p,
.register-form-head p{
    color:rgba(18,53,36,.75);
    font-size:15px;
    line-height:1.7;
}

.login-alert,
.register-alert{
    border:1px solid rgba(215,38,61,.2);
    background:rgba(215,38,61,.08);
    color:#a81d30;
    padding:12px 14px;
    border-radius:12px;
    margin-bottom:18px;
    font-size:14px;
}

.login-field,
.register-field{
    margin-bottom:18px;
}

.login-field label,
.register-field label{
    display:block;
    margin-bottom:8px;
    color:var(--auth-ink);
    font-weight:600;
    font-size:14px;
}

.login-field input,
.register-field input,
.register-field select,
.register-field textarea{
    width:100%;
    height:52px;
    border-radius:14px;
    border:1px solid var(--auth-line);
    background:#fff;
    padding:0 16px;
    font-size:15px;
    color:var(--auth-ink);
    transition:border-color .15s ease, box-shadow .15s ease;
}

.register-field textarea{
    height:auto;
    min-height:108px;
    padding:14px 16px;
    resize:vertical;
}

.login-field input:focus,
.register-field input:focus,
.register-field select:focus,
.register-field textarea:focus{
    outline:none;
    border-color:rgba(215,38,61,.55);
    box-shadow:0 0 0 4px rgba(215,38,61,.08);
}

.login-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin:8px 0 22px;
    flex-wrap:wrap;
}

.login-check{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:14px;
    color:rgba(18,53,36,.8);
}

.login-check input{
    width:16px;
    height:16px;
    accent-color:var(--auth-alarm);
}

.login-forgot{
    color:var(--auth-alarm);
    font-size:14px;
    font-weight:600;
}

.login-submit,
.register-submit{
    width:100%;
    border:none;
    border-radius:14px;
    min-height:54px;
    background:linear-gradient(135deg, var(--auth-alarm), #a81d30);
    color:#fff;
    font-weight:700;
    font-size:16px;
    letter-spacing:.02em;
    cursor:pointer;
    box-shadow:0 16px 28px rgba(215,38,61,.22);
    transition:transform .15s ease, box-shadow .15s ease;
    margin-top:6px;
}

.login-submit:hover,
.register-submit:hover{
    transform:translateY(-1px);
    box-shadow:0 20px 34px rgba(215,38,61,.26);
}

.login-foot,
.register-foot{
    margin-top:20px;
    padding-top:18px;
    border-top:1px solid rgba(18,53,36,.1);
    text-align:center;
    color:rgba(18,53,36,.76);
    font-size:14px;
}

.login-foot a,
.register-foot a{
    color:var(--auth-ink);
    font-weight:700;
}

.register-grid-2,
.register-password-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.register-password-note{
    font-size:12.5px;
    color:rgba(18,53,36,.68);
    margin-top:8px;
}

@media (max-width: 991px){
    .login-grid,
    .register-grid{
        grid-template-columns:1fr;
    }
    .login-visual,
    .register-visual{
        padding:32px;
        min-height:auto;
    }
    .login-form-wrap,
    .register-form-wrap{
        padding:32px;
    }
}

@media (max-width: 576px){
    .login-shell,
    .register-shell{
        padding:18px 0 32px;
    }
    .login-visual,
    .register-visual,
    .login-form-wrap,
    .register-form-wrap{
        padding:24px 18px;
    }
    .login-title,
    .register-title{
        font-size:46px;
    }
    .login-form-head h2,
    .register-form-head h2{
        font-size:26px;
    }
    .login-row{
        flex-direction:column;
        align-items:flex-start;
    }
    .register-grid-2,
    .register-password-grid{
        grid-template-columns:1fr;
    }
}