:root {
        --header: #ff00b2;
        --bg: #374992;
        --field: #011341;
        --stroke: rgba(255, 255, 255, .08);
        --text: rgba(255, 255, 255, .92);
        --muted: rgba(255, 255, 255, .65);
        --muted2: rgba(255, 255, 255, .35);
        --cyan: #61a9ff;
        --cyan2: #61a9ff;
        --cyanText: #61a9ff;
        --btnOff: #3D4863;
        --btnOffText: #92A8E3;
        --text_color_L1: #E3EFFF;
        --text_color_L2: #92A8E3;
        --text_color_L3: #6F80A4;
        --text_color_L4: #05012B;
        --bg_color_L1: #05012B;
        --bg_color_L2: #011341;
        --bg_color_L3: #001C54;
    }

    * {
        box-sizing: border-box
    }

    html,
    body {
        height: 100%
    }
    

    body {
        margin: 0;
        background: #22275b;
        display: grid;
        place-items: center;
        font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Segoe UI", Arial, Roboto, "PingFang SC", miui, "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
        /* requested stack */
        font-size: 16px;
        font-weight: 400;
        font-style: normal;
        font-variant: normal;
        font-kerning: auto;
        font-optical-sizing: auto;
        font-stretch: 100%;
        font-feature-settings: normal;
        font-variation-settings: normal;
        color: var(--text);
    }

    .app {
        width: 412px;
        height: 871px;
        overflow: hidden;
        background:
            radial-gradient(120% 80% at 50% 82%, rgba(255, 215, 120, .06) 0%, rgba(0, 0, 0, 0) 58%),
            linear-gradient(180deg, #134ec4 0%, #003cff 100%) box-shadow: 0 30px 90px rgb(206 143 143 / 65%);
        position: relative;
    }

    /* TOP HEADER BAR (use page background color) */
    .topbar {
        height: 66px;
        padding: 10px 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: var(--bg);
        /* changed to match page background */
    }

    .back {
        width: 34px;
        height: 34px;
        display: grid;
        place-items: center;
        border-radius: 10px;
        color: rgba(255, 255, 255, .9);
        user-select: none;
    }

    .logoWrap {
        width: 220px;
        display: flex;
        justify-content: center;
        align-items: center;
        transform: translateX(-6px);
    }

    .logoWrap img {
        height: 44px;
        /* increased logo size */
        width: auto;
        display: block;
        filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .30));
    }

    .lang {
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--cyan);
        font-weight: 800;
        user-select: none;
    }

    .flag {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        overflow: hidden;
        box-shadow: 0 0 0 1px rgba(255, 255, 255, .10);
        position: relative;
        background:
            linear-gradient(#B22234 0 14%, #fff 14% 28%, #B22234 28% 42%, #fff 42% 56%, #B22234 56% 70%, #fff 70% 84%, #B22234 84% 100%);
    }

    .flag:before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 52%;
        height: 56%;
        background: #1960b8;
    }

    /* HEADER CONTENT BLOCK - only the title/description uses the darker header color */
    .headerBlock {
        background: var(--bg);
        padding: 0 0 0;
    }

    .headerContent {
        background: #374992;
        /* changed to requested color */
        padding: 14px 18px 12px;
        border-bottom: 1px solid rgb(185 49 49 / 4%);
    }

    h1 {
        margin: 6px 0 6px;
        font-size: 20px;
        /* slightly smaller */
        font-weight: 900;
        letter-spacing: .01em;
        color: rgba(255, 255, 255, .92);
    }

    .sub {
        margin: 0 0 14px;
        font-size: 12px;
        line-height: 1.35;
        color: #ffffff;
        /* pure white */
        max-width: 330px;
    }

    /* tabs (icon top, label bottom) */
    .tabs {
        margin-top: 8px;
        padding: 10px 6px 0;
        display: flex;
        border-bottom: 1px solid rgb(153 39 39 / 10%);
    }

    .tab {
        flex: 1;
        padding: 6px 6px 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        user-select: none;
        position: relative;
        color: rgba(255, 255, 255, .45);
        font-weight: 800;
    }

    .tab svg {
        opacity: .85;
    }

    .tab.active {
        color: var(--cyan);
    }

    .tab.active svg {
        opacity: 1;
    }

    .tab.active::after {
        content: "";
        position: absolute;
        left: 16%;
        right: 16%;
        bottom: -1px;
        height: 3px;
        background: var(--cyan);
        border-radius: 999px;
        box-shadow: 0 0 18px rgb(191 159 56 / 18%);
    }

    /* BODY CONTENT */
    .content {
        padding: 14px 18px 0;
        background: transparent;
    }

    .form {
        padding: 16px 2px;
    }

    .label {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 10px 0 10px 2px;
        font-weight: 500;
        color: #fde4bc;
    }

    .label .ico {
        width: 22px;
        height: 22px;
        color: var(--cyan);
        display: grid;
        place-items: center;
        flex: 0 0 auto;
    }

    .row {
        display: grid;
        grid-template-columns: 94px 1fr;
        gap: 10px;
        align-items: center;
    }

    .field {
        height: 46px;
        border-radius: 12px;
        background: #2b3270;
        color: #E3EFFF;
        /*border: 1px solid rgba(255,255,255,.06);*/
        display: flex;
        align-items: center;
        padding: 0 12px;
        position: relative;
    }

    input {
        width: 100%;
        border: 0;
        outline: 0;
        background: transparent;
        color: #fde4bc;
        font-size: 14px;
    }

    input::placeholder {
        color: rgb(255 255 255 / 34%);
    }

    .country {
        justify-content: space-between;
        cursor: pointer;
        padding-right: 10px;
    }

    .cc {
        font-weight: 500;
        color: #fde4bc:
    }

    .chev {
        width: 18px;
        height: 18px;
        opacity: .8;
    }

    /* dropdown */
    .dropdown {
        position: absolute;
        left: 0;
        top: 52px;
        width: 320px;
        max-width: calc(412px - 36px);
        background: #ff00ff;
        border: 1px solid rgba(255, 255, 255, .10);
        border-radius: 14px;
        box-shadow: 0 22px 60px rgb(213 41 41 / 70%);
        padding: 8px 0;
        display: none;
        z-index: 99;
        max-height: 260px;
        overflow: auto;
    }

    .dropdown.open {
        display: block;
    }

    .dd-item {
        padding: 12px 14px;
        display: flex;
        align-items: center;
        gap: 14px;
        cursor: pointer;
    }

    .dd-item:hover {
        background: rgb(247 35 35 / 5%);
    }

    .dd-code {
        min-width: 58px;
        font-weight: 900;
        color: rgba(255, 255, 255, .78);
    }

    .dd-name {
        font-weight: 700;
        font-size: 13px;
        color: rgba(255, 255, 255, .60);
    }

    /* password field + eye */
    .pw {
        padding-right: 46px;
    }

    .eye {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        width: 34px;
        height: 34px;
        border-radius: 10px;
        display: grid;
        place-items: center;
        cursor: pointer;
        color: rgba(255, 255, 255, .55);
    }

    .eye:hover {
        background: rgb(255 0 0 / 5%);
    }

    /* remember */
    .remember {
        margin: 12px 2px 18px;
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 12px;
        color: rgba(255, 255, 255, .42);
        user-select: none;
        cursor: pointer;
    }

    .remember input[type="checkbox"] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
        pointer-events: none;
        r
    }

    .remember .radio {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        border: 1.6px solid rgba(255, 255, 255, .34);
        box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .18);
        transition: background .15s, box-shadow .15s, border-color .15s;
        background: transparent;
        flex: 0 0 auto;
    }

    .remember input[type="checkbox"]:checked+.radio {
        background: var(--cyan);
        border-color: var(--cyan);
        box-shadow: 0 0 0 4px rgba(247, 209, 91, 0.06) inset;
    }

    .radio {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        border: 1.6px solid rgba(255, 255, 255, .34);
        box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .18);
    }

    /* buttons */
    .btn {
        height: 54px;
        border-radius: 999px;
        width: calc(100% - 36px);
        margin: 0 auto 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        user-select: none;
        font-weight: 900;
        font-size: 18px;
        cursor: pointer;
        letter-spacing: .10em;
    }

    .btn.login.disabled {
        background: var(--btnOff);
        color: var(--btnOffText);
        cursor: not-allowed;
        letter-spacing: .12em;
    }

    .btn.login.enabled {
        background: linear-gradient(180deg, #61a9ff, #61a9ff);
        color: var(--text_color_L4);
        box-shadow: 0 10px 26px rgba(247, 209, 91, .16);
    }

    .btn.register {
        background: transparent;
        border: 1.6px solid #4971dd;
        color: var(--cyan);
        letter-spacing: .22em;
        font-size: 16px;
        box-shadow: 0 0 0 1px rgb(252 212 88 / 10%) inset;
    }

    /* footer */
    .footer {
        margin-top: 6px;
        padding: 18px 26px 0;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    .footItem {
        width: 48%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        font-weight: 900;
        color: #E3EFFF;
        user-select: none;
    }

    .footIco {
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        border-radius: 999px;
        color: #61a9ff;
        filter: drop-shadow(0 8px 18px rgba(247, 209, 91, .12));
    }

    .emailField {
        width: 100%;
    }

    @media (max-width: 440px) {
        body {
            place-items: stretch;
        }

        .app {
            width: 100vw;
            height: 100vh;
        }

        .dropdown {
            width: calc(100vw - 36px);
        }
    }