body {
    margin: 0;
    background: #061428;
    color: #fff;
    font-family: "Prompt", "Leelawadee UI", Tahoma, sans-serif;
}
.shell {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    overflow: hidden;
    padding: 7rem 0 3rem;
    background: #061428;
}
.shell > .hero-photo,
.shell > .hero-lights { position: absolute; inset: 0; }
.shell > .card,
.shell > .desk { position: relative; z-index: 2; }
.card {
    width: min(32rem, calc(100% - 2rem));
    margin: 0 auto;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 1.6rem;
    background: rgba(12, 35, 68, .92);
    padding: 1.8rem 1.6rem 1.5rem;
}
.card h1 { margin: 0 0 .4rem; font-size: 1.7rem; }
.field { display: grid; gap: .55rem; margin-top: 1.15rem; font-size: .92rem; }
.field input {
    height: 2.9rem;
    border-radius: .8rem;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(6, 20, 40, .65);
    color: #fff;
    padding: 0 .9rem;
}
.hint { min-height: 1.15rem; font-size: .8rem; color: rgba(255,255,255,.62); }
.hint.is-ok { color: #86efac; }
.hint.is-bad { color: #fca5a5; }
.meter {
    height: .45rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
}
.meter span { display: block; width: 0; height: 100%; transition: width .2s ease, background .2s ease; }
.meter.is-easy span { width: 33%; background: #f87171; }
.meter.is-mid span { width: 66%; background: #fbbf24; }
.meter.is-hard span { width: 100%; background: #34d399; }
.turnstile { margin-top: 1.35rem; min-height: 65px; }
.switch {
    display: flex;
    align-items: center;
    gap: .7rem;
    width: 100%;
    margin-top: 1.25rem;
    border: 0;
    background: transparent;
    color: #fff;
    text-align: left;
    cursor: pointer;
}
.switch i {
    width: 2.7rem;
    height: 1.5rem;
    border-radius: 999px;
    background: rgba(255,255,255,.16);
    position: relative;
    flex: none;
}
.switch i::after {
    content: "";
    position: absolute;
    top: .18rem;
    left: .18rem;
    width: 1.14rem;
    height: 1.14rem;
    border-radius: 999px;
    background: #fff;
    transition: transform .2s ease;
}
.switch.is-on i { background: linear-gradient(90deg, #38bdf8, #1d4ed8); }
.switch.is-on i::after { transform: translateX(1.15rem); }
.switch:disabled { opacity: .55; }
.links { display: flex; flex-wrap: wrap; gap: .7rem 1.1rem; margin-top: 1.35rem; }
.links button { border: 0; background: transparent; color: #7dd3fc; cursor: pointer; padding: 0; }
.submit {
    width: 100%;
    height: 3rem;
    margin-top: 1.35rem;
    border: 0;
    border-radius: .9rem;
    background: linear-gradient(90deg, #38bdf8, #1d4ed8);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}
.submit:disabled { opacity: .45; cursor: not-allowed; }
.modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(4, 10, 24, .72);
}
.modal[hidden] { display: none; }
.modal-card {
    width: min(40rem, 100%);
    max-height: min(80vh, 40rem);
    overflow: auto;
    border-radius: 1.4rem;
    border: 1px solid rgba(125, 211, 252, .35);
    background: #0c2344;
    padding: 1.3rem;
}
.desk { width: min(64rem, calc(100% - 1.5rem)); margin: 0 auto; }
.grid { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); margin-top: 1.2rem; }
.action {
    min-height: 6.2rem;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 1.2rem;
    background: #0c2344;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}
.action:hover { border-color: rgba(125, 211, 252, .7); }
.note { margin: 0; color: rgba(255,255,255,.65); font-size: .92rem; }
.note.foot { margin-top: 1.2rem; }
.note a { color: #7dd3fc; }
.remember {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: fit-content;
    margin-top: 1.35rem;
    font-size: .95rem;
    cursor: pointer;
}
.remember input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}
.remember-ui {
    width: 2.75rem;
    height: 1.55rem;
    flex: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    position: relative;
    transition: background .2s ease;
}
.remember-ui::after {
    content: "";
    position: absolute;
    top: .18rem;
    left: .18rem;
    width: 1.18rem;
    height: 1.18rem;
    border-radius: 999px;
    background: #fff;
    transition: transform .2s ease;
}
.remember input:checked + .remember-ui { background: linear-gradient(90deg, #38bdf8, #1d4ed8); }
.remember input:checked + .remember-ui::after { transform: translateX(1.18rem); }
.remember input:focus-visible + .remember-ui { outline: 2px solid #7dd3fc; outline-offset: 3px; }
.modal-card h2, .modal-card h3 { margin: 0 0 .45rem; }
.modal-card h3 { margin-top: 1rem; }
.modal-card p { margin: 0; line-height: 1.7; color: rgba(255,255,255,.78); }
.modal-card .submit + .submit { margin-top: .7rem; }

/* Icons stay within the control without intercepting input or autofill. */
.auth-input-wrap{position:relative;display:block;width:100%;min-width:0}
.auth-input-wrap>.auth-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:19px;height:19px;color:#83aec9;pointer-events:none;z-index:1}
.auth-input-wrap:focus-within>.auth-icon{color:#63d6ff}
.auth-input-wrap input{box-sizing:border-box;width:100%;padding-left:44px!important}
.auth-icon{width:19px;height:19px;flex-shrink:0}

.card button[type="submit"]{display:flex;align-items:center;justify-content:center;gap:10px}

/* Payment support references remain selectable for copying into searches. */
.topup-reference{font-variant-numeric:tabular-nums;letter-spacing:.04em;color:#79ddf5;white-space:nowrap;user-select:text}
.topup-reference-box{display:grid;gap:8px;text-align:center;padding:16px;margin:16px 0;border:1px solid #284e65;border-radius:12px;background:#0a2133}
.topup-reference-box small{color:#9ebacd;font-size:14px}
.topup-reference-box strong{font-size:19px;color:#79ddf5;letter-spacing:.06em;user-select:text}