:root {
    --bg-black: #121210; --bg-surface: #171918; --bg-surface-soft: #211f1b;
    --gold: #c9ad79; --gold-bright: #ddc58f; --cyan: #8cbbc0;
    --text: #eae5d9; --text-muted: #959794; --line: #353632; --field-border: #444642;
    --radius-md: 14px; --content-width: 540px; --page-gutter: clamp(24px, 6.4vw, 35px);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color-scheme: dark;
}
/* H5 startup splash: the image fades away while the first page is ready. */
/* height: 100vh/100lvh (not just inset:0) so it also covers the area under a floating bottom toolbar (iOS Safari 26 and similar). */
html.h5-splash-active body::before { content:""; position:fixed; z-index:9999; top:0; left:0; right:0; height:100vh; height:100lvh; pointer-events:none; background:#0b0705 url("icons/splash-v2.png") center/cover no-repeat; animation:h5-splash-out 1.15s ease-out .15s forwards; }
@keyframes h5-splash-out { 0%,65% { opacity:1; } 100% { opacity:0; visibility:hidden; } }
/* The page underneath stays invisible while the splash is up (and the canvas is the same dark colour), so no strip of page can show
   in areas the fixed splash does not reach - e.g. under a floating browser toolbar on iPhone. It fades in as the splash fades out. */
html.h5-splash-active { background:#0b0705; }
html.h5-splash-active body > * { animation:h5-page-in 1.15s ease-out .15s both; }
@keyframes h5-page-in { 0%,65% { opacity:0; } 100% { opacity:1; } }
@media (min-width:541px) {
    html.h5-splash-active body::before { inset:0 auto 0 50%; width:min(100%,540px); transform:translateX(-50%); }
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; overflow-x: hidden; }
body { background: var(--bg-black); color: var(--text); -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
a { color: inherit; text-decoration: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.bg-page { min-height: 100svh; }
.auth-shell { position: relative; width: min(100%, var(--content-width)); min-height: 100svh; margin: 0 auto; overflow: hidden; background: var(--bg-black); }
.auth-language-link { position: absolute; z-index: 8; top: max(16px, env(safe-area-inset-top)); right: 18px; display: flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid rgba(201,173,121,.32); border-radius: 18px; background: rgba(18,18,16,.72); color: var(--gold-bright); font-size: 12px; text-decoration: none; backdrop-filter: blur(8px); }
.auth-language-link img { width: 18px; height: 18px; object-fit: contain; }
.auth-hero { position: absolute; inset: 0 0 auto; z-index: 0; height: clamp(405px, 53vw, 494px); background: url("images/login-hero.png") center top / 100% auto no-repeat; }
.auth-panel { position: relative; z-index: 1; padding: clamp(350px, 46vw, 432px) var(--page-gutter) 28px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid rgba(234,229,217,.16); }
.auth-tabs--single { grid-template-columns: 1fr; }
.auth-tab { position: relative; padding: 14px 4px 18px; color: var(--text-muted); text-align: center; font-size: clamp(21px,5vw,28px); line-height: 1.2; }
.auth-tab.is-active { color: var(--gold-bright); }
.auth-tab.is-active::after { content: ""; position: absolute; bottom: -2px; left: 50%; width: min(75px,72%); height: 4px; border-radius: 99px; background: var(--gold-bright); transform: translateX(-50%); }
.auth-form { padding-top: 32px; }
.bg-field { display: flex; align-items: center; width: 100%; min-height: 69px; margin-bottom: 17px; padding: 0 21px; border: 1px solid var(--field-border); border-radius: var(--radius-md); background: var(--bg-surface); transition: border-color .2s, box-shadow .2s; }
.bg-field:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,173,121,.1); }
.bg-field__icon { width: 28px; height: 28px; margin-right: 20px; fill: none; stroke: var(--text-muted); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.bg-field input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 20px; }
.bg-field input::placeholder { color: var(--text-muted); opacity: 1; }
.password-toggle { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; border: 0; background: transparent; cursor: pointer; }
.password-toggle img { width: 28px; height: auto; opacity: .96; }
.password-toggle.is-showing img { opacity: .55; }
.auth-options { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 27px 1px 31px; font-size: clamp(16px,3.7vw,19px); }
.remember-option { display: flex; align-items: center; gap: 14px; cursor: pointer; }
.remember-option input { position: absolute; opacity: 0; pointer-events: none; }
.remember-mark { position: relative; width: 23px; height: 23px; border: 2px solid var(--gold); border-radius: 50%; flex: 0 0 auto; }
.remember-option input:checked + .remember-mark { background: var(--gold); }
.remember-option input:checked + .remember-mark::after { content: ""; position: absolute; left: 6px; top: 3px; width: 7px; height: 11px; border: solid var(--bg-black); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.gold-link { color: var(--gold-bright); text-align: right; }
.gold-link:hover, .gold-link:focus-visible { text-decoration: underline; }
.bg-button { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 68px; border: 0; border-radius: var(--radius-md); cursor: pointer; font-size: 22px; transition: filter .2s, transform .15s; }
.bg-button:active { transform: translateY(1px); }
.bg-button--primary { background: var(--gold); color: var(--bg-black); font-weight: 700; }
.bg-button--primary:hover { filter: brightness(1.08); }
.bg-button--primary:disabled { cursor: wait; filter: saturate(.5); }
.auth-form .bg-button--primary:disabled { opacity: .42; cursor: not-allowed; filter: grayscale(.2); }
.service-link { display: flex; align-items: center; justify-content: center; gap: 19px; width: 100%; margin: 31px 0; padding: 0; border: 0; background: transparent; color: var(--cyan); font-size: clamp(17px,3.7vw,20px); cursor: pointer; }
.service-link img { width: 29px; height: 29px; object-fit: contain; }
.auth-divider { display: flex; align-items: center; gap: 24px; margin: 0 14px 27px; color: var(--text-muted); font-size: 17px; }
.auth-divider::before, .auth-divider::after { content: ""; height: 1px; background: var(--line); flex: 1; }
.bg-button--secondary { gap: 23px; background: var(--bg-surface-soft); color: var(--gold-bright); font-size: clamp(20px,4.3vw,24px); }
.bg-button--secondary:hover { filter: brightness(1.12); }
.bg-button--secondary img { width: 31px; max-height: 31px; object-fit: contain; }

/* Registration */
.register-shell { padding-bottom: 56px; }
.register-hero {
    position: relative;
    width: 100%;
    height: clamp(170px, 42vw, 220px);
    background: url("images/register-hero.png") center 38% / cover no-repeat;
}
.back-button {
    position: absolute;
    top: max(23px, env(safe-area-inset-top));
    left: 20px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    color: var(--gold-bright);
}
.back-button svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.register-panel { position: relative; z-index: 1; margin-top: -24px; padding: 10px var(--page-gutter) 0; }
.register-title { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; color: var(--text); font-size: clamp(26px,6.2vw,36px); line-height: 1.2; }
.register-title img { width: 34px; max-height: 34px; object-fit: contain; }
.register-form .bg-field { min-height: 62px; margin-bottom: 10px; }
.register-phone-field { padding-left: 18px; }
.country-code { width: 82px; min-width: 82px; height: 44px; padding: 0 25px 0 0; border: 0; outline: 0; background-color: transparent; color: var(--text); font-size: 18px; cursor: pointer; }
.country-code option { background: var(--bg-surface); color: var(--text); }
.field-separator { align-self: stretch; width: 1px; margin: 11px 20px 11px 0; background: var(--field-border); }
.verification-field { padding-right: 12px; }
.verification-button { flex: 0 1 138px; min-width: 0; min-height: 44px; padding: 6px 10px; border: 0; border-radius: 13px; background: var(--gold); color: var(--bg-black); font-size: clamp(11px,3vw,14px); font-weight: 700; line-height: 1.15; white-space: normal; overflow-wrap: anywhere; cursor: pointer; }
.register-submit { margin-top: 22px; }
.register-password-hint { margin: -2px 3px 10px; color: var(--text-muted); font-size: 12px; line-height: 1.4; }
.register-submit:disabled { opacity: .42; cursor: not-allowed; filter: grayscale(.2); }
.agreement-option { display: grid; grid-template-columns: 23px 1fr; align-items: start; gap: 14px; margin: 29px 1px 0; color: var(--text); font-size: clamp(14px,3.1vw,16px); line-height: 1.5; cursor: pointer; }
.agreement-option input { position: absolute; opacity: 0; pointer-events: none; }
.agreement-option a { color: var(--gold); border-bottom: 1px solid currentColor; }
.agreement-option input:checked + .remember-mark { background: var(--gold); }
.agreement-option input:checked + .remember-mark::after { content: ""; position: absolute; left: 50%; top: 46%; width: 7px; height: 11px; border: solid var(--bg-black); border-width: 0 3px 3px 0; transform: translate(-50%,-50%) rotate(45deg); transform-origin: center; }
.agreement-option input:not(:checked) + .remember-mark { background: transparent; }
.agreement-option input:not(:checked) + .remember-mark::after { display: none; }
.register-login-prompt { margin: 48px 0 0; color: var(--text-muted); text-align: center; font-size: 16px; line-height: 1.5; }
.register-login-prompt a { color: var(--gold); font-size: 18px; }
.floating-service { position: fixed; z-index: 3; right: max(22px, calc((100vw - var(--content-width)) / 2 + 22px)); bottom: max(92px, env(safe-area-inset-bottom)); display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border: 1px solid rgba(48,143,154,.65); border-radius: 50%; background: rgba(8,35,38,.93); cursor: pointer; }
.floating-service img { width: 36px; height: 36px; object-fit: contain; }
@media (max-width: 370px) { .auth-options { align-items: flex-start; font-size: 14px; } .remember-option { gap: 8px; } .auth-panel { padding-left: 20px; padding-right: 20px; } }
@media (max-width: 370px) { .register-panel { padding-left: 20px; padding-right: 20px; } .field-separator { margin-right: 12px; } .verification-button { flex-basis: 118px; padding: 5px 7px; } }
@media (min-width: 541px) { body.bg-auth-page { background: #080908; } .auth-shell { box-shadow: 0 0 60px rgba(0,0,0,.8); } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; transition: none !important; } }
.cs-overlay { position: fixed; z-index: 999; inset: 0; display: flex; flex-direction: column; background: #11110f; }
.cs-overlay[hidden] { display: none; }
.cs-overlay__bar { display: flex; align-items: center; flex: 0 0 auto; min-height: 48px; padding: max(10px, env(safe-area-inset-top)) 12px 8px; background: #1d1d1a; }
.cs-overlay__close { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); color: var(--gold); cursor: pointer; }
.cs-overlay__close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cs-overlay__frame { flex: 1; width: 100%; border: 0; background: #fff; }

/* Shared application navigation */
.bg-bottom-nav { position: fixed; z-index: 100; bottom: calc(10px + env(safe-area-inset-bottom)); left: 50%; display: grid; grid-template-columns: repeat(5,1fr); width: min(calc(100% - 28px), 512px); min-height: 70px; padding: 7px 9px; border-radius: 34px; background: rgba(29,29,26,.98); box-shadow: 0 9px 30px rgba(0,0,0,.4); transform: translateX(-50%); }
.bg-bottom-nav__item { display: flex; min-width: 0; align-items: center; justify-content: center; flex-direction: column; gap: 2px; border-radius: 28px; color: var(--text-muted); font-size: 12px; line-height: 1.1; }
.bg-bottom-nav__item.is-active { background: var(--gold); color: var(--bg-black); font-weight: 700; }
.bg-bottom-nav__icon { display: grid; place-items: center; width: 30px; height: 30px; }
.bg-bottom-nav__icon img { display: block; max-width: 27px; max-height: 26px; object-fit: contain; }
#auth-error-tip{position:fixed;z-index:9999;left:50%;bottom:calc(28px + env(safe-area-inset-bottom));display:grid;grid-template-columns:34px minmax(0,1fr) 30px;align-items:center;gap:11px;width:min(calc(100% - 28px),500px);min-height:66px;padding:11px 13px;border:1px solid rgba(213,103,92,.48);border-radius:16px;background:rgba(43,35,31,.98);color:#f2eee5;box-shadow:0 12px 34px rgba(0,0,0,.72);transform:translateX(-50%);backdrop-filter:blur(12px)}#auth-error-tip[hidden]{display:none}#auth-error-tip .auth-error-tip__icon{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#7e342e;color:#ffd9d4;font-size:20px;font-weight:800}#auth-error-tip strong{font-size:14px;line-height:1.45;font-weight:600}#auth-error-tip button{width:30px;height:38px;padding:0;border:0;background:transparent;color:#aaa79f;font-size:27px;cursor:pointer}
.bg-flash-modal { position: fixed; z-index: 900; inset: 0; display: grid; place-items: center; padding: 22px; }
.bg-flash-modal__backdrop { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(0,0,0,.8); backdrop-filter: blur(4px); }
.bg-flash-modal__dialog { position: relative; width: min(100%,420px); box-sizing: border-box; padding: 28px 22px 22px; border: 1px solid rgba(201,173,121,.46); border-radius: 21px; background: linear-gradient(145deg,#29251f,#171817 72%); box-shadow: 0 22px 70px rgba(0,0,0,.75); text-align: center; }
.bg-flash-modal__close { position: absolute; top: 9px; right: 12px; width: 34px; height: 34px; padding: 0; border: 0; background: transparent; color: #aaa79f; font-size: 28px; line-height: 1; cursor: pointer; }
.bg-flash-modal__icon { display: grid; width: 52px; height: 52px; margin: 0 auto 14px; place-items: center; border: 1px solid rgba(201,173,121,.38); border-radius: 50%; background: rgba(201,173,121,.14); color: var(--gold); font-size: 25px; font-weight: 800; }
.bg-flash-modal__icon.is-success { background: rgba(77,137,113,.18); color: #a9cbc1; }
.bg-flash-modal h2 { margin: 0 0 11px; color: var(--gold-bright); font-size: 23px; }
.bg-flash-modal p { margin: 0; color: #c8c3b8; font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; }
.bg-flash-modal__confirm { width: 100%; min-height: 50px; margin-top: 21px; border: 0; border-radius: 25px; background: var(--gold); color: var(--bg-black); font: inherit; font-weight: 800; cursor: pointer; }

/* Thyre bottom nav (slices in nav2/): bar 1376x242, slider 344x228.
   Plain flex + vw sizes (no custom-property math, no percentage heights, no grid) so older iOS WebKit lays it out the same way. */
.bg-bottom-nav { display: flex; align-items: stretch; width: 91.5vw; max-width: 495px; height: 16.09vw; max-height: 87px; min-height: 0; padding: 0; bottom: calc(8px + env(safe-area-inset-bottom)); border-radius: 0; background: url("nav2/bar.png") center / 100% 100% no-repeat; box-shadow: none; box-sizing: border-box; }
.bg-bottom-nav__item { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; border-radius: 0; color: #fff; font-size: 13px; line-height: 1.15; font-weight: 500; background: none; }
.bg-bottom-nav__item.is-active { background: none; color: #fff; font-weight: 700; }
.bg-bottom-nav__item.is-active::before { content: ""; position: absolute; z-index: -1; top: 3%; left: 50%; width: 125%; height: 94%; background: url("nav2/slider.png") center / 100% 100% no-repeat; transform: translateX(-50%); }
.bg-bottom-nav__icon { display: flex; align-items: center; justify-content: center; width: 100%; height: 7.85vw; max-height: 42.5px; line-height: 0; }
.bg-bottom-nav__icon img { display: block; width: auto; height: 7.7vw; max-height: 41px; max-width: none; }
@media (min-width: 380px) { .bg-bottom-nav__item { font-size: 14px; } }
@media (min-width: 440px) { .bg-bottom-nav__item { font-size: 15px; } }

/* ===== Thyre login (750px design, 1u = 100vw/750) ===== */
.bg-auth-page { --gold: #f0a03c; --gold-bright: #ffc36b; --bg-black: #0b0705; --bg-surface: #1c0f08; --field-border: rgba(240,138,42,.5); --text-muted: #d8cfc4; --cyan: #fff; }
.auth-login { --u: calc(min(100vw, 540px) / 750); background: #0b0705; }
.auth-login .auth-shell { background: #0b0705 url("login/bg.png") center top / 100% auto no-repeat; overflow-x: hidden; }
.auth-login .auth-hero { display: none; }
.auth-login .auth-language-link { top: calc(var(--u) * 37); right: calc(var(--u) * 31); width: calc(var(--u) * 148); height: calc(var(--u) * 51); padding: 0 calc(var(--u) * 10); gap: calc(var(--u) * 6); border: 0; border-radius: 0; background: url("login/lang-box.png") center / 100% 100% no-repeat; backdrop-filter: none; color: #fff; font-size: calc(var(--u) * 26); white-space: nowrap; }
.auth-login .auth-language-link img { width: calc(var(--u) * 37); height: calc(var(--u) * 37); }
.auth-login .auth-panel { padding: calc(var(--u) * 458) calc(var(--u) * 60) calc(var(--u) * 40); }
.auth-login .auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 20); border: 0; }
.auth-login .auth-tab { display: flex; align-items: center; justify-content: center; height: calc(var(--u) * 80); padding: 0 calc(var(--u) * 8); color: #d8cfc4; font-size: calc(var(--u) * 36); font-weight: 600; line-height: 1.1; text-align: center; background: none; -webkit-text-fill-color: currentColor; }
.auth-login .auth-tab.is-active { font-size: calc(var(--u) * 40); font-weight: 800; background: linear-gradient(180deg,#ffb067,#e8701f); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.auth-login .auth-tab.is-active::after { content: ""; position: absolute; bottom: calc(var(--u) * -10); left: 50%; width: calc(var(--u) * 96); height: calc(var(--u) * 5); border-radius: 99px; background: linear-gradient(90deg,#e8701f,#ffb067,#e8701f); box-shadow: 0 0 10px rgba(255,150,60,.7); transform: translateX(-50%); -webkit-text-fill-color: initial; }
.auth-login .auth-tab:not(.is-active):hover, .auth-login .auth-tab:not(.is-active):focus-visible { color: #fff; }
.auth-login .auth-form { padding-top: calc(var(--u) * 78); }
.auth-login .bg-field { position: relative; height: auto; min-height: 0; aspect-ratio: 1266 / 220; margin-bottom: calc(var(--u) * 33); padding: 0 calc(var(--u) * 28) 0 calc(var(--u) * 22); border: 0; border-radius: 0; background: url("login/field.png") center / 100% 100% no-repeat; box-shadow: none; }
.auth-login .bg-field:focus-within { box-shadow: none; filter: brightness(1.2); }
.auth-login .bg-field__icon { width: calc(var(--u) * 58); height: calc(var(--u) * 58); margin-right: calc(var(--u) * 18); }
.auth-login .bg-field input { color: #fff; font-size: calc(var(--u) * 30); }
.auth-login .bg-field input::placeholder { color: #cdbfb0; }
.auth-login .password-toggle { position: relative; width: calc(var(--u) * 92); height: calc(var(--u) * 64); margin: 0 calc(var(--u) * -6) 0 calc(var(--u) * 14); padding-left: calc(var(--u) * 6); background: url("login/vline.png") left center / 1px 100% no-repeat; }
.auth-login .password-toggle img { width: calc(var(--u) * 41); height: auto; opacity: 1; }
.auth-login .password-toggle .eye-on, .auth-login .password-toggle.is-showing .eye-off { display: none; }
.auth-login .password-toggle.is-showing .eye-on { display: block; opacity: 1; }
.auth-login .auth-options { margin: calc(var(--u) * 28) calc(var(--u) * 6) calc(var(--u) * 30); font-size: calc(var(--u) * 30); color: #fff; }
.auth-login .remember-mark { width: calc(var(--u) * 46); height: calc(var(--u) * 46); border: 2px solid #f0a03c; }
.auth-login .remember-option { gap: calc(var(--u) * 14); }
.auth-login .remember-option input:checked + .remember-mark { border-color: transparent; background: url("login/check.png") center / 100% 100% no-repeat; }
.auth-login .remember-option input:checked + .remember-mark::after { display: none; }
.auth-login .gold-link { color: #f0a03c; font-size: calc(var(--u) * 26); }
.auth-login .bg-button--primary { min-height: 0; aspect-ratio: 1266 / 196; border-radius: 0; background: url("login/btn.png") center / 100% 100% no-repeat; color: #ffe2bd; font-size: calc(var(--u) * 36); font-weight: 800; text-shadow: 0 1px 6px rgba(60,20,0,.6); }
.auth-login .service-link { gap: calc(var(--u) * 16); margin: calc(var(--u) * 38) 0; color: #fff; font-size: calc(var(--u) * 30); }
.auth-login .service-link img { width: calc(var(--u) * 41); height: calc(var(--u) * 41); }
.auth-login .auth-form .bg-button--primary:disabled { opacity: 1; filter: saturate(.6) brightness(.8); color: #ffe2bd; }

/* ===== Thyre register (750px design, 1u = 100vw/750) ===== */
.auth-register { --u: calc(min(100vw, 540px) / 750); background: #0b0705; }
.auth-register .auth-shell { background: #0b0705 url("register/bg.png") center top / 100% auto no-repeat; overflow-x: hidden; padding-bottom: calc(var(--u) * 160); }
.auth-register .auth-language-link { top: calc(var(--u) * 37); right: calc(var(--u) * 31); width: calc(var(--u) * 148); height: calc(var(--u) * 51); padding: 0 calc(var(--u) * 10); gap: calc(var(--u) * 6); border: 0; border-radius: 0; background: url("register/lang-box.png") center / 100% 100% no-repeat; backdrop-filter: none; color: #fff; font-size: calc(var(--u) * 26); white-space: nowrap; }
.auth-register .auth-language-link img { width: calc(var(--u) * 37); height: calc(var(--u) * 37); }
.auth-register .back-button { position: absolute; z-index: 8; top: calc(var(--u) * 34); left: calc(var(--u) * 28); width: calc(var(--u) * 50); height: calc(var(--u) * 50); }
.auth-register .back-button img { width: calc(var(--u) * 20); height: calc(var(--u) * 34); }
.auth-register .register-panel { margin: 0; padding: calc(var(--u) * 376) calc(var(--u) * 31) 0; }
.auth-register .register-title { gap: calc(var(--u) * 16); margin: 0 0 calc(var(--u) * 14); font-size: calc(var(--u) * 42); font-weight: 800; background: linear-gradient(180deg,#ffb067,#e8701f); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.auth-register .register-title img { width: calc(var(--u) * 79); height: calc(var(--u) * 79); max-height: none; margin: 0 calc(var(--u) * -6) 0 0; -webkit-text-fill-color: initial; }
.auth-register .reg-card { position: relative; margin-bottom: calc(var(--u) * 22); padding: calc(var(--u) * 14) calc(var(--u) * 29) calc(var(--u) * 22); }
.auth-register .reg-card--info { background: url("register/card-info.png") center / 100% 100% no-repeat; }
.auth-register .reg-card--code { background: url("register/card-code.png") center / 100% 100% no-repeat; }
.auth-register .reg-card__title { display: flex; align-items: center; gap: calc(var(--u) * 16); height: calc(var(--u) * 60); margin: 0 0 calc(var(--u) * 6); color: #fff; font-size: calc(var(--u) * 30); font-weight: 700; }
.auth-register .reg-card__title img { width: calc(var(--u) * 45); height: calc(var(--u) * 45); }
.auth-register .reg-row { display: flex; gap: calc(var(--u) * 7); margin-bottom: calc(var(--u) * 19); }
.auth-register .reg-code { position: relative; flex: 0 0 calc(var(--u) * 164); height: calc(var(--u) * 88); background: url("register/code-box.png") center / 100% 100% no-repeat; }
.auth-register .reg-code select { width: 100%; height: 100%; padding: 0 calc(var(--u) * 50) 0 calc(var(--u) * 22); border: 0; outline: 0; appearance: none; -webkit-appearance: none; background: transparent; color: #fff; font-size: calc(var(--u) * 30); }
.auth-register .reg-code select option { background: #1c0f08; color: #fff; }
.auth-register .reg-code__arrow { position: absolute; top: 50%; right: calc(var(--u) * 22); width: calc(var(--u) * 21); height: calc(var(--u) * 13); transform: translateY(-50%); pointer-events: none; }
.auth-register .reg-field { position: relative; display: flex; align-items: center; height: calc(var(--u) * 88); margin-bottom: calc(var(--u) * 19); padding: 0 calc(var(--u) * 22) 0 calc(var(--u) * 24); background: url("register/field-mail.png") center / 100% 100% no-repeat; }
.auth-register .reg-field--phone { flex: 1; min-width: 0; margin: 0; background-image: url("register/phone-box.png"); }
.auth-register .reg-field--code { margin: calc(var(--u) * 6) 0 0; background-image: url("register/field-wide.png"); }
.auth-register .reg-field__icon { width: calc(var(--u) * 37); height: calc(var(--u) * 26); margin-right: calc(var(--u) * 16); object-fit: contain; flex: 0 0 auto; }
.auth-register .reg-field__icon--phone { width: calc(var(--u) * 22); height: calc(var(--u) * 38); margin-right: calc(var(--u) * 18); }
.auth-register .reg-field__icon--lock { width: calc(var(--u) * 26); height: calc(var(--u) * 33); margin-right: calc(var(--u) * 20); }
.auth-register .reg-field__icon--people { width: calc(var(--u) * 34); height: calc(var(--u) * 30); }
.auth-register .reg-field input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: #fff; font-size: calc(var(--u) * 28); }
.auth-register .reg-field input::placeholder { color: #d8cfc4; opacity: 1; }
.auth-register .reg-field--code input { color: #f0a03c; }
.auth-register .reg-field:focus-within { filter: brightness(1.25); }
.auth-register .password-toggle { width: calc(var(--u) * 60); height: calc(var(--u) * 60); margin-right: calc(var(--u) * -8); background: none; }
.auth-register .password-toggle img { width: calc(var(--u) * 38); height: auto; opacity: 1; }
.auth-register .password-toggle .eye-on, .auth-register .password-toggle.is-showing .eye-off { display: none; }
.auth-register .password-toggle.is-showing .eye-on { display: block; }
.auth-register .register-password-hint { margin: calc(var(--u) * -4) calc(var(--u) * 6) 0; color: #f1e6da; font-size: calc(var(--u) * 24); line-height: 1.25; }
.auth-register .register-submit { min-height: 0; aspect-ratio: 1424 / 230; width: calc(var(--u) * 712); margin: calc(var(--u) * 6) calc(var(--u) * -12) 0; border-radius: 0; background: url("register/btn.png") center / 100% 100% no-repeat; color: #3a1800; font-size: calc(var(--u) * 34); font-weight: 800; }
.auth-register .register-submit:disabled { opacity: 1; filter: saturate(.6) brightness(.8); }
.auth-register .agreement-option { grid-template-columns: calc(var(--u) * 34) 1fr; gap: calc(var(--u) * 12); margin: calc(var(--u) * 24) calc(var(--u) * 30) 0; color: #fff; font-size: calc(var(--u) * 24); }
.auth-register .agreement-option .remember-mark { width: calc(var(--u) * 34); height: calc(var(--u) * 34); border: 2px solid #f0a03c; }
.auth-register .agreement-option input:checked + .remember-mark { border-color: transparent; background: url("register/check.png") center / 100% 100% no-repeat; }
.auth-register .agreement-option input:checked + .remember-mark::after { display: none; }
.auth-register .agreement-option a { color: #f0a03c; border-bottom: 0; }
.auth-register .register-login-prompt { margin: calc(var(--u) * 20) 0 0; color: #d8cfc4; font-size: calc(var(--u) * 24); line-height: calc(var(--u) * 54); }
.auth-register .register-login-prompt a { color: #f0a03c; font-size: calc(var(--u) * 28); }
.auth-register .floating-service { width: calc(var(--u) * 105); height: calc(var(--u) * 105); border: 0; background: none; right: max(calc(var(--u) * 30), calc((100vw - var(--content-width)) / 2 + calc(var(--u) * 30))); bottom: max(calc(var(--u) * 80), env(safe-area-inset-bottom)); }
.auth-register .floating-service img { width: 100%; height: 100%; }

/* ===== Country-code picker with flags ===== */
.pcs { position: static; display: flex; align-items: center; height: 100%; flex: 0 0 auto; }
.pcs__trigger { display: flex; align-items: center; gap: calc(var(--u) * 10); height: 100%; padding: 0; border: 0; background: none; color: #fff; font: inherit; font-size: calc(var(--u) * 28); cursor: pointer; }
.pcs__flag { width: calc(var(--u) * 40); height: calc(var(--u) * 30); flex: 0 0 auto; border-radius: calc(var(--u) * 5); object-fit: cover; box-shadow: 0 0 0 1px rgba(255,255,255,.25); }
.pcs__flag--none { display: inline-block; box-shadow: none; }
.pcs__flag[hidden] { display: none; }
.pcs__arrow { width: calc(var(--u) * 21); height: calc(var(--u) * 13); flex: 0 0 auto; }
.pcs__panel { position: absolute; z-index: 60; top: calc(100% + var(--u) * 8); left: 0; width: min(100%, calc(var(--u) * 640)); min-width: calc(var(--u) * 520); padding: calc(var(--u) * 12); border: 1px solid rgba(240,138,42,.7); border-radius: calc(var(--u) * 24); background: linear-gradient(180deg, #2e1608, #140905); box-shadow: 0 0 24px rgba(240,120,30,.4), 0 18px 40px rgba(0,0,0,.7); }
.pcs__panel[hidden] { display: none; }
.pcs__search { width: 100%; height: calc(var(--u) * 72); margin-bottom: calc(var(--u) * 10); padding: 0 calc(var(--u) * 22); border: 1px solid rgba(240,138,42,.5); border-radius: calc(var(--u) * 18); outline: 0; background: rgba(20,9,4,.8); color: #fff; font-size: calc(var(--u) * 26); }
.pcs__search::placeholder { color: #cdbfb0; }
.pcs__list { max-height: calc(var(--u) * 560); margin: 0; padding: 0; overflow-y: auto; list-style: none; overscroll-behavior: contain; }
.pcs__item { display: flex; align-items: center; gap: calc(var(--u) * 16); min-height: calc(var(--u) * 76); padding: 0 calc(var(--u) * 16); border-radius: calc(var(--u) * 16); color: #fff; font-size: calc(var(--u) * 27); cursor: pointer; }
.pcs__item[hidden] { display: none; }
.pcs__item:hover, .pcs__item.is-selected { background: rgba(240,138,42,.22); }
.pcs__item.is-selected .pcs__dial { color: #ffc36b; }
.pcs__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcs__dial { color: #f0a03c; font-weight: 600; }
/* login: [icon][flag +code ▾ |][phone number] */
.auth-login .bg-field { position: relative; }
.auth-login .bg-field .pcs { margin-right: calc(var(--u) * 16); padding-right: calc(var(--u) * 16); height: 62%; border-right: 1px solid rgba(240,138,42,.5); }
.auth-login .bg-field .pcs__panel { width: 100%; }
/* register: the picker fills the 164x88 code box */
.auth-register .reg-code { position: relative; }
.auth-register .reg-code .pcs { width: 100%; }
.auth-register .reg-code .pcs__trigger { width: 100%; justify-content: space-between; padding: 0 calc(var(--u) * 20) 0 calc(var(--u) * 18); }
.auth-register .reg-code .pcs__code { flex: 1; text-align: left; }
.auth-register .reg-card--info { position: relative; z-index: 3; }
.auth-login .auth-form > div.bg-field { z-index: 5; }

/* ===== Unified Thyre dialogs / toasts (orange glass). Same look for every popup on the client site. ===== */
body .bg-flash-modal__backdrop, body .pending-rewards-modal__backdrop, body .vip-purchase-modal__backdrop { background: rgba(8,4,2,.8); }
body .bg-flash-modal__dialog, body .pending-rewards-modal__dialog, body .vip-purchase-modal__dialog { border: 1px solid rgba(240,138,42,.6); border-radius: 26px; background: linear-gradient(180deg, rgba(120,52,12,.95), rgba(28,12,5,.98) 70%); box-shadow: 0 0 26px rgba(240,120,30,.4), inset 0 0 22px rgba(240,120,30,.16), 0 20px 70px rgba(0,0,0,.7); color: #f1e6da; }
body .bg-flash-modal__close, body .pending-rewards-modal__close, body .vip-purchase-modal__close { color: #f1e6da; }
body .bg-flash-modal__icon, body .bg-flash-modal__icon.is-success, body .pending-rewards-modal__icon { border: 1px solid rgba(240,138,42,.55); background: linear-gradient(180deg,#6a3010,#2a1206); color: #f0a03c; }
body .bg-flash-modal h2, body .pending-rewards-modal h2, body .vip-purchase-modal h2 { color: #ffc36b; }
body .bg-flash-modal p, body .pending-rewards-modal p, body .vip-purchase-modal__notice { color: #f1e6da; }
body .bg-flash-modal__confirm, body .pending-rewards-modal__confirm, body .vip-purchase-modal__confirm { border: 0; background: linear-gradient(180deg,#ffb067,#e8701f); color: #2a1206; }
body .vip-purchase-modal__summary { border: 1px solid rgba(240,138,42,.45); background: rgba(20,9,4,.6); }
body .vip-purchase-modal__summary strong { color: #fff; }
body .vip-purchase-modal__summary span { color: #f0a03c; }
body .vip-purchase-modal label { color: #ffc36b; }
body .vip-purchase-modal input { border: 1px solid rgba(240,138,42,.5); background: rgba(20,9,4,.7); color: #fff; }
body .vip-purchase-modal input:focus { border-color: #f0a03c; box-shadow: 0 0 0 3px rgba(240,138,42,.2); }
/* small notices / toasts */
body #auth-error-tip, body .copy-notice, body .invite-notice { border: 1px solid rgba(240,138,42,.65); background: linear-gradient(180deg, rgba(120,52,12,.97), rgba(28,12,5,.98)); color: #fff; box-shadow: 0 0 20px rgba(240,120,30,.35), 0 10px 30px rgba(0,0,0,.7); }
body #auth-error-tip { border-radius: 22px; }
body #auth-error-tip .auth-error-tip__icon { border: 1px solid rgba(240,138,42,.55); background: linear-gradient(180deg,#6a3010,#2a1206); color: #f0a03c; }
body #auth-error-tip button { color: #f1e6da; }
body .copy-notice, body .invite-notice { border-radius: 14px; padding: 10px 18px; }
.thyre-toast { max-width: min(86vw, 420px); padding: 14px 22px !important; border: 1px solid rgba(240,138,42,.65); border-radius: 18px !important; background: linear-gradient(180deg, rgba(120,52,12,.97), rgba(28,12,5,.98)) !important; color: #fff !important; font-size: 15px; line-height: 1.45; text-align: center; box-shadow: 0 0 20px rgba(240,120,30,.35), 0 10px 30px rgba(0,0,0,.7); }