:root {
    --bg: #070916;
    --panel: #101326;
    --line: rgba(255,255,255,.085);
    --text: #f7f8fc;
    --muted: #8e95ab;
    --mint: #33e6b0;
    --violet: #8b43ff;
    --danger: #ff7189;
}

* {
    box-sizing: border-box;
}

html,
body {
    min-width: 320px;
    min-height: 100%;
    margin: 0;
}

body {
    color: var(--text);
    background: var(--bg);
    font-family: "Cairo", "Segoe UI", Tahoma, sans-serif;
    -webkit-font-smoothing: antialiased;
}

button,
input {
    font: inherit;
}

svg {
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.login-page {
    position: relative;
    display: grid;
    min-height: 100vh;
    padding: 26px;
    overflow: hidden;
    background:
        radial-gradient(circle at 14% 8%, rgba(139,67,255,.15), transparent 30rem),
        radial-gradient(circle at 88% 92%, rgba(51,230,176,.12), transparent 30rem),
        linear-gradient(145deg, #080a18, #050711);
    place-items: center;
}

.login-page::before {
    position: absolute;
    inset: 0;
    content: "";
    opacity: .32;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(circle at center, #000, transparent 76%);
}

.login-orb {
    position: absolute;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
}

.login-orb--mint {
    right: -100px;
    bottom: -80px;
    background: rgba(51,230,176,.2);
}

.login-orb--violet {
    top: -90px;
    left: -80px;
    background: rgba(139,67,255,.25);
}

.login-shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr);
    width: min(100%, 1040px);
    min-height: 650px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 30px;
    background: rgba(15,18,35,.86);
    box-shadow: 0 42px 100px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.04);
    backdrop-filter: blur(18px);
}

.login-visual {
    position: relative;
    display: flex;
    min-height: 650px;
    padding: 42px;
    overflow: hidden;
    flex-direction: column;
    background:
        radial-gradient(circle at 15% 12%, rgba(66,244,187,.18), transparent 18rem),
        linear-gradient(145deg, rgba(17,103,85,.68), rgba(11,42,47,.9) 55%, rgba(12,19,34,.96));
}

.login-visual::before {
    position: absolute;
    right: -190px;
    bottom: -160px;
    width: 480px;
    height: 480px;
    border: 54px solid rgba(255,255,255,.035);
    border-radius: 46% 54% 38% 62%;
    content: "";
    transform: rotate(-24deg);
}

.visual-grid {
    position: absolute;
    inset: 0;
    opacity: .16;
    background-image:
        linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: linear-gradient(to bottom, #000, transparent 90%);
}

.visual-brand {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    direction: ltr;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.visual-brand__mark,
.mobile-brand__mark {
    color: var(--mint);
}

.visual-brand__mark svg,
.mobile-brand__mark svg {
    width: 35px;
    stroke: none;
    fill: currentColor;
}

.visual-copy {
    position: relative;
    z-index: 1;
    margin-top: auto;
    margin-bottom: 54px;
}

.visual-kicker {
    color: var(--mint);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.visual-copy h2 {
    margin: 12px 0;
    font-size: clamp(35px, 4vw, 54px);
    font-weight: 800;
    letter-spacing: -1.5px;
    line-height: 1.27;
}

.visual-copy p {
    max-width: 410px;
    margin: 0;
    color: rgba(255,255,255,.64);
    font-size: 13px;
    line-height: 1.9;
}

.visual-market {
    position: relative;
    z-index: 1;
    padding: 16px 18px 10px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 18px;
    background: rgba(5,14,20,.35);
    backdrop-filter: blur(10px);
}

.visual-market__label {
    display: flex;
    align-items: center;
    gap: 7px;
    color: rgba(255,255,255,.7);
    font-size: 10px;
}

.visual-market__label i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mint);
    box-shadow: 0 0 12px var(--mint);
}

.visual-chart {
    height: 88px;
    margin-top: 8px;
}

.visual-chart svg {
    width: 100%;
    height: 100%;
}

.chart-area {
    fill: url(#chartFill);
    stroke: none;
}

.chart-line {
    fill: none;
    stroke: var(--mint);
    stroke-width: 2.2;
    filter: drop-shadow(0 0 5px rgba(51,230,176,.55));
}

.login-panel {
    display: flex;
    justify-content: center;
    padding: 58px 52px;
    flex-direction: column;
    background: linear-gradient(145deg, rgba(18,21,40,.98), rgba(11,14,28,.98));
}

.mobile-brand {
    display: none;
}

.login-heading__kicker {
    display: block;
    margin-bottom: 5px;
    color: var(--mint);
    font-size: 11px;
    font-weight: 700;
}

.login-heading h1 {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -.6px;
}

.login-heading p {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.8;
}

.login-form {
    margin-top: 30px;
}

.field-group {
    margin-bottom: 18px;
}

.field-group > label {
    display: block;
    margin-bottom: 8px;
    color: #cbd0de;
    font-size: 11px;
    font-weight: 600;
}

.input-shell {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    min-height: 54px;
    padding: 0 15px;
    border: 1px solid var(--line);
    border-radius: 15px;
    color: #747b91;
    background: rgba(255,255,255,.032);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.input-shell:focus-within {
    border-color: rgba(51,230,176,.55);
    background: rgba(51,230,176,.035);
    box-shadow: 0 0 0 4px rgba(51,230,176,.07);
}

.input-shell > svg {
    width: 19px;
}

.login-input {
    width: 100%;
    height: 52px;
    padding: 0 12px;
    border: 0;
    outline: 0;
    color: var(--text);
    background: transparent;
    font-size: 13px;
}

.login-input::placeholder {
    color: #5d6376;
}

.password-toggle {
    display: grid;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    color: #737a8e;
    background: transparent;
    cursor: pointer;
    place-items: center;
}

.password-toggle:hover {
    color: var(--mint);
    background: rgba(51,230,176,.07);
}

.password-toggle svg {
    width: 18px;
}

.field-error {
    display: block;
    min-height: 18px;
    padding-top: 4px;
    color: var(--danger);
    font-size: 9px;
}

.validation-summary {
    margin-bottom: 17px;
    padding: 10px 12px;
    border: 1px solid rgba(255,113,137,.18);
    border-radius: 11px;
    color: #ff9bad;
    background: rgba(255,113,137,.06);
    font-size: 10px;
}

.validation-summary:empty,
.validation-summary ul:empty {
    display: none;
}

.validation-summary ul {
    margin: 0;
    padding-right: 18px;
}

.login-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 54px;
    margin-top: 4px;
    border: 0;
    border-radius: 15px;
    color: #06110d;
    background: linear-gradient(135deg, #76ffd4, #27d9a3);
    box-shadow: 0 16px 30px rgba(39,217,163,.18);
    cursor: pointer;
    font-size: 13px;
    font-weight: 800;
    transition: transform .2s ease, box-shadow .2s ease;
}

.login-button:hover {
    box-shadow: 0 18px 34px rgba(39,217,163,.28);
    transform: translateY(-1px);
}

.login-button svg {
    width: 19px;
    transform: rotate(180deg);
}

.login-security {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 24px;
    color: #686f82;
    font-size: 9px;
}

.login-security svg {
    width: 15px;
    color: var(--mint);
}

button:focus-visible,
input:focus-visible {
    outline: 2px solid var(--mint);
    outline-offset: 3px;
}

@media (max-width: 820px) {
    .login-page {
        align-items: stretch;
        padding: 0;
    }

    .login-shell {
        display: block;
        width: 100%;
        min-height: 100vh;
        border: 0;
        border-radius: 0;
    }

    .login-visual {
        display: none;
    }

    .login-panel {
        min-height: 100vh;
        padding: max(34px, env(safe-area-inset-top)) 22px max(28px, env(safe-area-inset-bottom));
    }

    .mobile-brand {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-bottom: auto;
        direction: ltr;
        font-size: 17px;
        font-weight: 800;
        letter-spacing: 1.6px;
    }

    .mobile-brand__mark svg {
        width: 32px;
    }

    .login-heading,
    .login-form,
    .login-security {
        width: min(100%, 440px);
        margin-right: auto;
        margin-left: auto;
    }

    .login-heading {
        margin-top: 56px;
    }

    .login-heading h1 {
        font-size: 25px;
    }

    .login-security {
        margin-top: 22px;
        margin-bottom: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: .01ms !important;
    }
}