:root {
    --bg: #07060b;
    --panel: #17101f;
    --purple: #8d43c8;
    --purple-light: #c481ef;
    --green: #91d746;
    --green-light: #d6ff8a;
    --orange: #f17b1c;
    --cream: #f7eddf;
    --muted: #c8b9ce;
    --line: rgba(141, 67, 200, .42);
    --shadow: 0 24px 65px rgba(0, 0, 0, .48);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at 10% 0%, rgba(100,55,145,.24), transparent 34rem),
        radial-gradient(circle at 92% 26%, rgba(73,127,76,.13), transparent 30rem),
        linear-gradient(180deg, #07060b, #0e0914 54%, #07060b);
    color: var(--cream);
    font-family: Arial, Helvetica, sans-serif;
}
a { color: inherit; }
button, input { font: inherit; }
.sx-login-header {
    position: relative;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 80px;
    padding: 12px clamp(18px, 4vw, 62px);
    border-bottom: 1px solid var(--line);
    background: rgba(7,6,11,.96);
}
.sx-login-brand { text-decoration: none; }
.sx-login-brand strong, .sx-login-brand span { display: block; }
.sx-login-brand strong { color: var(--green-light); font: 25px Georgia, serif; }
.sx-login-brand span { margin-top:3px; color:var(--purple-light); font-size:10px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.sx-login-header nav { display:flex; align-items:center; gap:19px; }
.sx-login-header nav a { color:#eee5f2; font-size:12px; font-weight:900; letter-spacing:.04em; text-decoration:none; text-transform:uppercase; }
.sx-header-button { border:1px solid rgba(145,215,70,.62); border-radius:999px; padding:11px 17px; background:linear-gradient(180deg,#a9e95e,#62a525); color:#122006!important; }
.sx-eyebrow { display:inline-flex; align-self:flex-start; color:var(--purple-light); font-size:11px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }

.sx-poster-hero {
    width: min(1480px, calc(100% - 34px));
    margin: 34px auto 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 30px 30px 0 0;
    background: #030205;
    box-shadow: var(--shadow);
}
.sx-poster-art { position:relative; min-height:760px; background:#030205; }
.sx-poster-art img { display:block; width:100%; height:760px; object-fit:contain; object-position:center; background:#030205; }
.sx-poster-art::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 56%,rgba(3,2,5,.84) 100%); pointer-events:none; }
.sx-poster-caption { position:absolute; z-index:3; right:clamp(24px,5vw,72px); bottom:clamp(24px,4vw,58px); left:clamp(24px,5vw,72px); display:flex; align-items:end; justify-content:space-between; gap:28px; }
.sx-poster-caption h1 { margin:8px 0 0; color:#fff; font:clamp(42px,5.6vw,82px)/.95 Georgia,serif; text-shadow:0 8px 30px rgba(0,0,0,.65); }
.sx-poster-caption h1 span { color:var(--green-light); }
.sx-scroll-button { display:inline-flex; flex:0 0 auto; align-items:center; gap:10px; border:1px solid rgba(145,215,70,.68); border-radius:999px; padding:15px 21px; background:linear-gradient(180deg,#adef61,#62a525); color:#132106; font-weight:900; text-decoration:none; }

.sx-login-section {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(390px,.82fr);
    gap:clamp(38px,6vw,88px);
    align-items:center;
    width:min(1480px,calc(100% - 34px));
    margin:0 auto 36px;
    border:1px solid var(--line);
    border-top:0;
    border-radius:0 0 30px 30px;
    padding:clamp(48px,7vw,92px);
    background:linear-gradient(145deg,#100b16,#07060b);
    box-shadow:var(--shadow);
}
.sx-login-editorial {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 470px;
    max-width: 720px;
    padding: clamp(12px, 2vw, 28px) 0;
}

.sx-login-editorial h2 {
    margin: 15px 0 26px;
    color: #fff;
    font: clamp(56px, 6vw, 88px)/.94 Georgia, serif;
    letter-spacing: -.035em;
}

.sx-login-editorial h2 span {
    display: block;
    margin-top: 8px;
    color: var(--green-light);
}

.sx-mouse-message {
    min-height: 74px;
    max-width: 680px;
    border-left: 4px solid var(--orange);
    padding: 8px 0 8px 22px;
    color: #f5e8d7;
    font: italic clamp(23px, 2.4vw, 34px)/1.35 Georgia, serif;
}

.sx-mouse-message span {
    display: block;
    opacity: 1;
    transform: translateY(0);
    transition: opacity .35s ease, transform .35s ease;
}

.sx-mouse-message span.is-changing {
    opacity: 0;
    transform: translateY(8px);
}

.sx-login-editorial blockquote {
    margin: 18px 0 0 26px;
    color: var(--purple-light);
    font-size: 14px;
    font-style: normal;
}

.sx-login-editorial blockquote strong {
    font-weight: 900;
}

.sx-login-card { border:1px solid rgba(196,129,239,.38); border-radius:24px; padding:clamp(27px,4vw,45px); background:radial-gradient(circle at 85% 10%,rgba(145,215,70,.10),transparent 13rem),linear-gradient(145deg,#21142d,#100b15); }
.sx-login-icon { display:flex; align-items:center; justify-content:center; width:62px; height:62px; margin-bottom:17px; border-radius:19px; background:linear-gradient(145deg,#a9e95e,#5f9f28); color:#162307; font-size:26px; }
.sx-login-card h2 { margin:8px 0; color:#fff; font:42px Georgia,serif; }
.sx-login-intro { margin:0; color:var(--muted); line-height:1.55; }
.sx-login-error { display:flex; gap:10px; margin-top:18px; border:1px solid rgba(255,99,99,.48); border-radius:14px; padding:13px 15px; background:rgba(111,25,34,.34); color:#ffd7d7; }
.sx-login-form { display:grid; gap:10px; margin-top:24px; }
.sx-login-form label { margin-top:7px; color:#eadfee; font-size:12px; font-weight:900; letter-spacing:.04em; text-transform:uppercase; }
.sx-input-wrap { position:relative; }
.sx-input-wrap > i { position:absolute; top:50%; left:16px; color:var(--purple-light); transform:translateY(-50%); }
.sx-input-wrap input { width:100%; border:1px solid rgba(196,129,239,.38); border-radius:15px; padding:15px 48px 15px 45px; outline:none; background:rgba(7,5,10,.80); color:#fff; }
.sx-input-wrap input:focus { border-color:var(--green); box-shadow:0 0 0 4px rgba(145,215,70,.10); }
.sx-password-toggle { position:absolute; top:50%; right:9px; width:38px; height:38px; border:0; border-radius:10px; background:transparent; color:#b9aabb; cursor:pointer; transform:translateY(-50%); }
.sx-login-submit,.sx-create-account { display:flex; align-items:center; justify-content:center; gap:9px; width:100%; border-radius:999px; padding:15px 20px; font-weight:900; text-decoration:none; }
.sx-login-submit { margin-top:10px; border:1px solid rgba(145,215,70,.70); background:linear-gradient(180deg,#adef61,#62a525); color:#132106; cursor:pointer; }
.sx-create-account { border:1px solid rgba(196,129,239,.62); background:linear-gradient(180deg,#67308e,#38194a); color:#fff; }
.sx-login-divider { position:relative; margin:25px 0 18px; color:#95889a; font-size:11px; font-weight:900; letter-spacing:.07em; text-align:center; text-transform:uppercase; }
.sx-login-divider::before { content:''; position:absolute; top:50%; right:0; left:0; height:1px; background:rgba(196,129,239,.20); }
.sx-login-divider span { position:relative; z-index:2; padding:0 12px; background:#160f1f; }
.sx-back-link { display:block; margin-top:18px; color:var(--green-light); font-size:12px; font-weight:900; text-align:center; text-decoration:none; }
.sx-login-footer { display:flex; align-items:center; justify-content:space-between; gap:22px; padding:31px clamp(20px,5vw,75px); border-top:1px solid var(--line); background:#050409; }
.sx-login-footer strong,.sx-login-footer span { display:block; }
.sx-login-footer strong { color:var(--green-light); }
.sx-login-footer span { margin-top:4px; color:var(--muted); font-size:12px; }
.sx-login-footer nav { display:flex; gap:19px; }
.sx-login-footer a { color:var(--muted); font-size:13px; text-decoration:none; }

@media(max-width:980px){
    .sx-poster-art,.sx-poster-art img { min-height:0; height:auto; }
    .sx-poster-caption { position:relative; right:auto; bottom:auto; left:auto; align-items:flex-start; flex-direction:column; padding:32px; background:linear-gradient(145deg,#17101f,#09070d); }
    .sx-poster-art::after { display:none; }
    .sx-login-section { grid-template-columns:1fr; border-top:1px solid var(--line); border-radius:30px; margin-top:22px; }
}
@media(max-width:650px){
    .sx-login-header { min-height:68px; padding:10px 14px; }
    .sx-login-brand strong { font-size:20px; }
    .sx-login-brand span,.sx-login-header nav>a:first-child { display:none; }
    .sx-header-button { padding:10px 13px; font-size:11px; }
    .sx-poster-hero,.sx-login-section { width:calc(100% - 18px); margin-right:auto; margin-left:auto; }
    .sx-poster-hero { margin-top:13px; border-radius:22px; }
    .sx-poster-caption { padding:26px 20px 30px; }
    .sx-poster-caption h1 { font-size:46px; }
    .sx-scroll-button { width:100%; justify-content:center; }
    .sx-login-section { padding:34px 20px; }
    .sx-login-editorial h2 { font-size:40px; }
    .sx-editorial-lead { font-size:16px; }
    .sx-login-card h2 { font-size:35px; }
    .sx-login-footer { align-items:flex-start; flex-direction:column; padding:27px 20px; }
}


/* v1.3 clean side-by-side editorial balance */
@media (min-width: 981px) {
    .sx-login-section {
        grid-template-columns: minmax(0, 1fr) minmax(420px, .82fr);
        align-items: stretch;
    }

    .sx-login-card {
        align-self: center;
    }
}

@media (max-width: 980px) {
    .sx-login-editorial {
        min-height: 0;
        text-align: center;
        align-items: center;
    }

    .sx-mouse-message {
        width: min(620px, 100%);
        border-left: 0;
        border-top: 3px solid var(--orange);
        padding: 20px 8px 0;
    }

    .sx-login-editorial blockquote {
        margin-left: 0;
    }
}

@media (max-width: 650px) {
    .sx-login-editorial h2 {
        font-size: clamp(48px, 14vw, 68px);
    }

    .sx-mouse-message {
        min-height: 86px;
        font-size: 23px;
    }
}