:root {
    --ox-green: #b8ff16; --ox-bg: #080d0b; --ox-field: #111815;
    --ox-line: #313b36; --ox-text: #f6f8f7; --ox-muted: #8f9994;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--ox-bg); }
body.orderx-login-page {
    /* The visual artboard is 1080px wide. */
    --ox-u: calc(min(100vw, 540px) / 1080);
    --u: calc(min(100vw, 540px) / 750);
    color: var(--ox-text);
    font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}
.orderx-login-shell {
    position: relative; width: min(100%, 540px); min-height: 100svh; margin: 0 auto;
    padding: 0 calc(var(--ox-u) * 54) calc(var(--ox-u) * 112 + env(safe-area-inset-bottom));
    overflow: hidden;
    background: radial-gradient(circle at 76% 20%, rgba(72,132,18,.08), transparent 29%), var(--ox-bg);
}
.orderx-login-shell .auth-language-link {
    position: absolute; z-index: 10; top: max(calc(var(--ox-u) * 42), env(safe-area-inset-top));
    right: calc(var(--ox-u) * 40); padding: calc(var(--ox-u) * 13) calc(var(--ox-u) * 24);
    border: 1px solid rgba(184,255,22,.35); border-radius: 999px;
    background: rgba(8,13,11,.72); color: var(--ox-green);
    font-size: max(11px, calc(var(--ox-u) * 24)); text-decoration: none; backdrop-filter: blur(12px);
}
.orderx-hero {
    position: relative; height: calc(var(--ox-u) * 830); margin: 0 calc(var(--ox-u) * -54);
    overflow: hidden; border-radius: 0 0 calc(var(--ox-u) * 62) calc(var(--ox-u) * 62);
    background: #080d0b url("login/hero.png") center / cover no-repeat;
}
.orderx-hero::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(4,9,7,.18), transparent 60%), linear-gradient(180deg, transparent 60%, rgba(5,10,8,.22));
    pointer-events: none;
}
.orderx-brand, .orderx-welcome { position: absolute; z-index: 1; left: calc(var(--ox-u) * 79); }
.orderx-brand { top: calc(var(--ox-u) * 194); }
.orderx-brand img { display: block; width: calc(var(--ox-u) * 380); height: auto; }
.orderx-brand p {
    margin: calc(var(--ox-u) * 25) 0 0; color: #9ca5a0;
    font-size: calc(var(--ox-u) * 29); letter-spacing: .07em; white-space: nowrap;
}
.orderx-welcome { top: calc(var(--ox-u) * 628); }
.orderx-welcome h1 {
    margin: 0; color: #fff; font-size: calc(var(--ox-u) * 58);
    line-height: 1.12; letter-spacing: -.035em;
}
.orderx-welcome p {
    margin: calc(var(--ox-u) * 25) 0 0; color: #a4ada8;
    font-size: calc(var(--ox-u) * 31); line-height: 1.25;
}
.orderx-login-panel {
    position: relative; z-index: 3; margin-top: calc(var(--ox-u) * 50);
    padding: calc(var(--ox-u) * 61) calc(var(--ox-u) * 31) calc(var(--ox-u) * 54);
    border: 1px solid #354039; border-radius: calc(var(--ox-u) * 57);
    background: linear-gradient(145deg, rgba(28,35,32,.99), rgba(16,22,19,.99));
    box-shadow: 0 calc(var(--ox-u) * 34) calc(var(--ox-u) * 72) rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.025);
}
.orderx-panel-heading h2 { margin: 0; font-size: calc(var(--ox-u) * 47); line-height: 1.2; }
.orderx-panel-heading p {
    margin: calc(var(--ox-u) * 43) 0 calc(var(--ox-u) * 70);
    color: var(--ox-muted); font-size: calc(var(--ox-u) * 31); line-height: 1.35;
}
.orderx-login-panel .auth-form { padding: 0; }
.orderx-field-label {
    display: block; margin: 0 calc(var(--ox-u) * 8) calc(var(--ox-u) * 21);
    color: #a8b0ac; font-size: calc(var(--ox-u) * 31); line-height: 1.25;
}
.orderx-field {
    position: relative; display: flex; align-items: center; height: calc(var(--ox-u) * 136);
    margin-bottom: calc(var(--ox-u) * 29); padding: 0 calc(var(--ox-u) * 28);
    border: 1px solid var(--ox-line); border-radius: calc(var(--ox-u) * 33);
    background: var(--ox-field); transition: border-color .2s, box-shadow .2s;
}
.orderx-field:focus-within { border-color: rgba(184,255,22,.72); box-shadow: 0 0 0 3px rgba(184,255,22,.08); }
.orderx-field > input {
    min-width: 0; width: 100%; border: 0; outline: 0; background: transparent;
    color: #fff; font: inherit; font-size: calc(var(--ox-u) * 33);
}
.orderx-field > input::placeholder { color: #59645f; opacity: 1; }
.orderx-phone-field { padding-left: calc(var(--ox-u) * 23); }
.orderx-phone-field .pcs {
    position: static; display: flex; flex: 0 0 auto; align-items: center; width: auto; height: 58%;
    margin-right: calc(var(--ox-u) * 25); padding-right: calc(var(--ox-u) * 22);
    border-right: 1px solid #344039;
}
.orderx-phone-field .pcs__trigger {
    display: flex; align-items: center; gap: calc(var(--ox-u) * 10); height: 100%; min-height: 0;
    padding: 0; border: 0; background: transparent; color: #d9dfdc;
    font: inherit; font-size: calc(var(--ox-u) * 29); cursor: pointer;
}
.orderx-phone-field .pcs__flag {
    width: calc(var(--ox-u) * 43); height: calc(var(--ox-u) * 31);
    border-radius: calc(var(--ox-u) * 5); object-fit: cover; box-shadow: 0 0 0 1px rgba(255,255,255,.2);
}
.orderx-phone-field .pcs__flag[hidden] { display: none; }
.orderx-phone-field .pcs__arrow {
    width: calc(var(--ox-u) * 20); height: calc(var(--ox-u) * 12); object-fit: contain;
    filter: hue-rotate(38deg) saturate(2.6) brightness(1.2);
}
/* Country-code controls use the same black-green visual system as the login page. */
.orderx-phone-field .pcs__panel {
    position: absolute; z-index: 60; top: calc(100% + var(--ox-u) * 18); left: 0;
    width: 100%; min-width: 0; padding: calc(var(--ox-u) * 18);
    border: 1px solid rgba(184,255,22,.38); border-radius: calc(var(--ox-u) * 32);
    background: linear-gradient(160deg, #18221d, #0c1310 74%);
    box-shadow: 0 0 calc(var(--ox-u) * 36) rgba(154,255,0,.12), 0 calc(var(--ox-u) * 30) calc(var(--ox-u) * 70) rgba(0,0,0,.72);
    overflow: hidden;
}
.orderx-phone-field .pcs__panel[hidden] { display: none; }
.orderx-phone-field .pcs__search {
    width: 100%; height: calc(var(--ox-u) * 86); margin: 0 0 calc(var(--ox-u) * 14);
    padding: 0 calc(var(--ox-u) * 25); border: 1px solid #35463d;
    border-radius: calc(var(--ox-u) * 21); outline: 0; background: #0d1511;
    color: #fff; font: inherit; font-size: calc(var(--ox-u) * 28);
    transition: border-color .2s, box-shadow .2s;
}
.orderx-phone-field .pcs__search:focus { border-color: var(--ox-green); box-shadow: 0 0 0 3px rgba(184,255,22,.08); }
.orderx-phone-field .pcs__search::placeholder { color: #69756f; }
.orderx-phone-field .pcs__list {
    max-height: min(calc(var(--ox-u) * 610), 46svh); margin: 0; padding: 0 calc(var(--ox-u) * 4) 0 0;
    overflow-y: auto; list-style: none; overscroll-behavior: contain;
    scrollbar-color: rgba(184,255,22,.55) transparent; scrollbar-width: thin;
}
.orderx-phone-field .pcs__list::-webkit-scrollbar { width: 5px; }
.orderx-phone-field .pcs__list::-webkit-scrollbar-thumb { border-radius: 5px; background: rgba(184,255,22,.55); }
.orderx-phone-field .pcs__item {
    display: flex; align-items: center; gap: calc(var(--ox-u) * 18);
    min-height: calc(var(--ox-u) * 82); padding: 0 calc(var(--ox-u) * 20);
    border: 1px solid transparent; border-radius: calc(var(--ox-u) * 20);
    color: #e8edea; font-size: calc(var(--ox-u) * 28); cursor: pointer;
}
.orderx-phone-field .pcs__item[hidden] { display: none; }
.orderx-phone-field .pcs__item:hover, .orderx-phone-field .pcs__item.is-selected {
    border-color: rgba(184,255,22,.17); background: rgba(184,255,22,.1);
}
.orderx-phone-field .pcs__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orderx-phone-field .pcs__dial { color: #9aa79f; font-weight: 600; }
.orderx-phone-field .pcs__item:hover .pcs__dial, .orderx-phone-field .pcs__item.is-selected .pcs__dial { color: var(--ox-green); }
.orderx-login-panel .password-toggle {
    position: relative; flex: 0 0 calc(var(--ox-u) * 68); width: calc(var(--ox-u) * 68);
    height: calc(var(--ox-u) * 68); margin-right: calc(var(--ox-u) * -12); border: 0; background: transparent;
}
.orderx-login-panel .password-toggle span {
    position: absolute; left: 50%; top: 50%; width: calc(var(--ox-u) * 37); height: calc(var(--ox-u) * 25);
    border: 1.5px solid #6d7872; border-radius: 50% 50% 45% 45%; transform: translate(-50%, -50%);
}
.orderx-login-panel .password-toggle span::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: calc(var(--ox-u) * 8); height: calc(var(--ox-u) * 8);
    border: 1.5px solid #6d7872; border-radius: 50%; transform: translate(-50%, -50%);
}
.orderx-login-panel .password-toggle .eye-off::before {
    content: ""; position: absolute; left: 50%; top: 50%; width: calc(var(--ox-u) * 46);
    height: 1.5px; background: #6d7872; transform: translate(-50%, -50%) rotate(38deg);
}
.orderx-login-panel .password-toggle .eye-on, .orderx-login-panel .password-toggle.is-showing .eye-off { display: none; }
.orderx-login-panel .password-toggle.is-showing .eye-on { display: block; }
.orderx-login-panel .auth-options {
    display: flex; justify-content: flex-end; min-height: calc(var(--ox-u) * 43);
    margin: calc(var(--ox-u) * 2) calc(var(--ox-u) * 13) calc(var(--ox-u) * 35);
    font-size: calc(var(--ox-u) * 27);
}
.orderx-login-panel .gold-link { color: var(--ox-green); text-decoration: none; }
.orderx-login-panel .bg-button--primary {
    display: flex; align-items: center; justify-content: center; width: 100%;
    height: calc(var(--ox-u) * 143); min-height: 0; border: 0;
    border-radius: calc(var(--ox-u) * 40); background: linear-gradient(105deg, #d5ff28, #9dff00);
    color: #091006; font-size: calc(var(--ox-u) * 42); font-weight: 800;
    letter-spacing: .12em; box-shadow: 0 calc(var(--ox-u) * 15) calc(var(--ox-u) * 40) rgba(151,255,0,.12);
    cursor: pointer;
}
.orderx-login-panel .bg-button--primary:disabled { opacity: .5; filter: saturate(.65); cursor: not-allowed; }
.orderx-register-prompt {
    margin: calc(var(--ox-u) * 46) 0 0; color: #d8ddda;
    text-align: center; font-size: calc(var(--ox-u) * 31);
}
.orderx-register-prompt a {
    margin-left: calc(var(--ox-u) * 11); color: #fff; font-weight: 700; text-decoration: none;
}
.orderx-legal {
    margin-top: calc(var(--ox-u) * 74); color: #757f7a;
    text-align: center; font-size: calc(var(--ox-u) * 26);
}
.orderx-legal p { margin: 0 0 calc(var(--ox-u) * 22); }
.orderx-legal div { display: flex; justify-content: center; gap: calc(var(--ox-u) * 29); }
.orderx-legal a { color: var(--ox-green); text-decoration: none; }
@media (max-width: 370px) {
    .orderx-phone-field > .pcs > .pcs__trigger > .pcs__flag { display: none; }
}
@media (min-width: 541px) {
    body.orderx-login-page { background: #050806; }
    .orderx-login-shell { box-shadow: 0 0 70px rgba(0,0,0,.72); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }