:root{
    --auth-bg:#f5f5f4;
    --auth-card:#ffffff;
    --auth-card-2:#fafafa;
    --auth-text:#070707;
    --auth-muted:#71717a;
    --auth-soft:#f1f1f1;
    --auth-border:#e7e5e4;
    --auth-red:#e60028;
    --auth-red-dark:#c90022;
    --auth-ring:rgba(230,0,40,.13);
    --auth-shadow:0 28px 80px rgba(12,12,12,.14);
}
@media (prefers-color-scheme: dark){
    :root{
        --auth-bg:#050505;
        --auth-card:#111111;
        --auth-card-2:#151515;
        --auth-text:#ffffff;
        --auth-muted:#a1a1aa;
        --auth-soft:#1e1e1f;
        --auth-border:#2b2b2d;
        --auth-shadow:0 30px 90px rgba(0,0,0,.72);
    }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
    margin:0;
    min-height:100vh;
    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    background:
        radial-gradient(circle at 82% 8%, rgba(230,0,40,.16), transparent 31%),
        radial-gradient(circle at 9% 88%, rgba(10,10,10,.10), transparent 35%),
        var(--auth-bg);
    color:var(--auth-text);
}
.auth-screen{
    min-height:100vh;
    min-height:100svh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:22px 14px;
}
.auth-phone{
    width:100%;
    max-width:432px;
    min-height:calc(100svh - 44px);
    background:linear-gradient(180deg, rgba(255,255,255,.06), transparent 30%), var(--auth-card);
    border:1px solid var(--auth-border);
    border-radius:36px;
    box-shadow:var(--auth-shadow);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    position:relative;
}
.auth-phone::before{
    content:'';
    position:absolute;
    inset:0 0 auto;
    height:5px;
    background:linear-gradient(90deg, transparent, var(--auth-red), transparent);
    opacity:.95;
}
.auth-top{
    padding:24px 22px 10px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.brand{
    display:flex;
    align-items:center;
    gap:11px;
    min-width:0;
}
.brand-mark{
    width:46px;
    height:46px;
    border-radius:18px;
    background:linear-gradient(145deg, var(--auth-red), #a9001d);
    color:#fff;
    display:grid;
    place-items:center;
    box-shadow:0 16px 35px rgba(230,0,40,.30);
    flex:0 0 auto;
}
.ubs-key-logo{
    width:30px;
    height:33px;
    display:block;
}
.brand-name{
    font-size:14px;
    font-weight:700;
    letter-spacing:.045em;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.brand-sub{
    margin-top:3px;
    color:var(--auth-muted);
    font-size:11px;
    font-weight:700;
}
.auth-badge{
    font-size:11px;
    font-weight:700;
    color:var(--auth-red);
    background:rgba(230,0,40,.09);
    border:1px solid rgba(230,0,40,.18);
    padding:8px 10px;
    border-radius:999px;
}
.auth-content{
    flex:1;
    padding:20px 22px 26px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.kicker{
    color:var(--auth-red);
    font-size:12px;
    font-weight:700;
    letter-spacing:.15em;
    text-transform:uppercase;
    margin-bottom:14px;
}
h1{
    margin:0;
    font-size:40px;
    line-height:1.03;
    letter-spacing:-.055em;
}
.sub{
    margin:13px 0 0;
    color:var(--auth-muted);
    font-size:15px;
    line-height:1.62;
}
.auth-card{
    margin-top:30px;
    padding:18px;
    border:1px solid var(--auth-border);
    background:linear-gradient(180deg, rgba(255,255,255,.05), transparent), var(--auth-card-2);
    border-radius:28px;
    box-shadow:0 18px 45px rgba(0,0,0,.05);
}
.input-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:10px;
}
.input-label{
    display:block;
    font-size:13px;
    font-weight:700;
}
.input-hint{
    color:var(--auth-muted);
    font-size:12px;
    font-weight:700;
}
.phone-field{
    display:flex;
    align-items:center;
    gap:8px;
    border:1px solid var(--auth-border);
    background:var(--auth-soft);
    border-radius:18px;
    padding:5px 10px 5px 12px;
    transition:.2s ease;
}
.phone-field:focus-within{
    border-color:var(--auth-red);
    box-shadow:0 0 0 5px var(--auth-ring);
    background:var(--auth-card);
}
.country-select-wrap{
    position:relative;
    flex:0 0 auto;
    display:flex;
    align-items:center;
}
.country-select{
    appearance:none;
    -webkit-appearance:none;
    border:0;
    outline:0;
    background:transparent;
    color:var(--auth-text);
    font-size:16px;
    font-weight:700;
    line-height:1;
    padding:13px 18px 13px 0;
    cursor:pointer;
    width:76px;
    max-width:76px;
}
.country-select-wrap::after{
    content:'⌄';
    position:absolute;
    right:1px;
    top:50%;
    transform:translateY(-54%);
    color:var(--auth-muted);
    font-size:13px;
    pointer-events:none;
    font-weight:700;
}
.phone-separator{
    width:1px;
    height:24px;
    background:var(--auth-border);
    flex:0 0 auto;
}
.phone-field input{
    width:100%;
    min-width:0;
    border:0;
    outline:0;
    background:transparent;
    color:var(--auth-text);
    font-size:16px;
    font-weight:700;
    letter-spacing:.025em;
    padding:13px 0;
}
.phone-field input::placeholder{color:color-mix(in srgb, var(--auth-muted) 70%, transparent)}
.primary-btn{
    width:100%;
    border:0;
    margin-top:16px;
    border-radius:20px;
    padding:17px 18px;
    background:linear-gradient(135deg, var(--auth-red), var(--auth-red-dark));
    color:#fff;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 16px 34px rgba(230,0,40,.27);
    transition:.2s ease;
}
.primary-btn:hover{transform:translateY(-1px)}
.primary-btn:active{transform:translateY(0)}
.primary-btn:disabled{
    opacity:.52;
    cursor:not-allowed;
    box-shadow:none;
    transform:none;
}
.notice{
    display:none;
    margin-bottom:14px;
    border-radius:16px;
    padding:12px 14px;
    font-size:13px;
    font-weight:700;
}
.notice.error{
    display:block;
    color:#b42318;
    background:#fff1f0;
    border:1px solid #ffd5d2;
}
@media (prefers-color-scheme: dark){
    .notice.error{
        color:#ffb4ad;
        background:rgba(230,0,40,.12);
        border-color:rgba(230,0,40,.28);
    }
}
.demo-chip{
    margin-top:14px;
    border-radius:999px;
    display:inline-flex;
    width:max-content;
    max-width:100%;
    padding:9px 12px;
    background:rgba(230,0,40,.10);
    color:var(--auth-red);
    font-size:12px;
    font-weight:700;
}
.terms{
    margin:18px 0 0;
    text-align:center;
    color:var(--auth-muted);
    font-size:12px;
    line-height:1.6;
}
.terms a{color:var(--auth-red);text-decoration:none;font-weight:700}
/* ── "Sending your code" ────────────────────────────────────────────────
   Firebase can take several seconds, and a button that just spins says
   nothing about whether anything is happening. This shows the stage it has
   reached, and if it runs long it says so rather than leaving the customer
   guessing whether to press again. */
:root{--otps-ink:#0E1119;--otps-muted:#7c828a;--otps-bg:rgba(229,9,20,.04);
  --otps-line:rgba(229,9,20,.14);--otps-accent:#e50914;--otps-track:rgba(229,9,20,.14);
  --otps-dot:rgba(229,9,20,.2)}
/* `.dark` is never added on this page — the login screen is dark in its own
   CSS with no class at all, which is why the first attempt at a dark variant
   did nothing and the stage text stayed nearly invisible on his phone. The
   panel now carries `.otp-send--dark`, set from the page's ACTUAL background,
   exactly as the MPIN screen does. */
.dark, .otp-send--dark{--otps-ink:#F3F5F9;--otps-muted:#98A0AE;--otps-bg:rgba(255,77,90,.07);
  --otps-line:rgba(255,77,90,.22);--otps-accent:#FF4D5A;--otps-track:rgba(255,77,90,.18);
  --otps-dot:rgba(255,77,90,.28)}

.otp-send{display:none;margin-top:18px;padding:20px 18px;border-radius:16px;
  background:var(--otps-bg);border:1px solid var(--otps-line);text-align:center}
.otp-send.on{display:block;animation:otpSendIn .28s ease both}
@keyframes otpSendIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.otp-send__ring{width:52px;height:52px;margin:0 auto 14px;position:relative}
.otp-send__ring svg{width:52px;height:52px;transform:rotate(-90deg)}
.otp-send__ring circle{fill:none;stroke-width:3.5;stroke-linecap:round}
.otp-send__track{stroke:var(--otps-track)}
.otp-send__arc{stroke:var(--otps-accent);stroke-dasharray:44 132;transform-origin:50% 50%;
  animation:otpSpin 1.15s cubic-bezier(.6,.15,.35,.9) infinite}
@keyframes otpSpin{to{transform:rotate(360deg)}}

/* The phone in the middle gives the ring something to be about. */
.otp-send__ico{position:absolute;inset:0;display:grid;place-items:center}
.otp-send__ico svg{width:19px;height:19px;transform:none;stroke:var(--otps-accent);
  stroke-width:1.7;fill:none;animation:otpPulse 1.8s ease-in-out infinite}
@keyframes otpPulse{0%,100%{opacity:.55}50%{opacity:1}}

/* Colours as variables with a .dark override. The first version hardcoded a
   near-black stage colour, and on the app's dark login screen it was almost
   invisible — visible in his own screenshot, which is how it was caught. */
.otp-send__stage{font-size:15px;font-weight:600;color:var(--otps-ink,#0E1119);min-height:20px}
.otp-send__sub{font-size:13px;color:var(--otps-muted,#7c828a);margin-top:5px;min-height:17px}

/* Three dots that fill as the stages pass — a sense of progress without a
   fake percentage, which would be a number we do not actually know. */
.otp-send__dots{display:flex;gap:6px;justify-content:center;margin-top:13px}
.otp-send__dots i{width:6px;height:6px;border-radius:50%;background:var(--otps-dot);
  transition:background .3s,transform .3s}
.otp-send__dots i.on{background:var(--otps-accent);transform:scale(1.25)}

@media (prefers-reduced-motion: reduce){
  .otp-send.on{animation:none}
  .otp-send__arc{animation-duration:2.4s}
  .otp-send__ico svg{animation:none;opacity:1}
}
.loader{
    display:inline-block;
    width:18px;
    height:18px;
    border:2px solid rgba(255,255,255,.45);
    border-top-color:#fff;
    border-radius:50%;
    animation:spin .7s linear infinite;
    vertical-align:-4px;
}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:480px){
    .auth-screen{padding:0}
    .auth-phone{
        max-width:none;
        min-height:100svh;
        border-radius:0;
        border:0;
        box-shadow:none;
    }
    h1{font-size:30px}
    .auth-badge{display:none}
}

/* ===== UBS 10s Launch Animation Splash START ===== */
.ubs-launch-splash{
    position:fixed;
    inset:0;
    z-index:2147483600;
    background:#000;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    opacity:1;
    visibility:visible;
    transition:opacity .72s ease, visibility .72s ease;
}
.ubs-launch-splash.is-hidden{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}
.ubs-launch-splash video{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    background:#000;
}
.ubs-launch-splash::after{
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(circle at 50% 18%, rgba(230,0,40,.10), transparent 34%),
        linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.18));
}
body.ubs-splash-lock{
    overflow:hidden;
}
@media (orientation:landscape){
    .ubs-launch-splash video{
        object-fit:cover;
    }
}

/* ===== Advanced Country Search + Last Login Prefill START ===== */
.country-select{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    opacity:0!important;
    pointer-events:none!important;
}
.country-select-wrap{width:auto;min-width:118px}
.country-select-wrap::after{display:none!important}
.country-picker-trigger{border:0;outline:0;background:transparent;color:var(--auth-text);min-height:48px;display:inline-flex;align-items:center;gap:9px;padding:0 2px 0 0;font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}
.country-picker-flag{font-size:20px;line-height:1}.country-picker-code{font-size:15px;letter-spacing:.01em}.country-picker-chevron{color:var(--auth-muted);font-size:14px;margin-left:2px}
.country-sheet-backdrop{position:fixed;inset:0;z-index:2147483000;display:none;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.62);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:14px}
.country-sheet-backdrop.is-open{display:flex}
.country-sheet{width:min(432px,100%);max-height:min(76svh,680px);background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 28%),var(--auth-card);border:1px solid var(--auth-border);border-radius:30px 30px 26px 26px;box-shadow:0 -18px 70px rgba(0,0,0,.42);overflow:hidden;color:var(--auth-text)}
.country-sheet-handle{width:46px;height:5px;border-radius:999px;background:color-mix(in srgb,var(--auth-muted) 44%,transparent);margin:10px auto 8px}
.country-sheet-head{display:flex;align-items:center;justify-content:space-between;padding:4px 18px 12px}.country-sheet-title{margin:0;font-size:17px;line-height:1.2;letter-spacing:-.02em;font-weight:700}.country-sheet-close{width:38px;height:38px;border:0;border-radius:14px;background:var(--auth-soft);color:var(--auth-text);font-size:24px;line-height:1;cursor:pointer}
.country-sheet-search{margin:0 18px 12px;height:52px;border:1px solid var(--auth-border);border-radius:18px;background:var(--auth-soft);display:flex;align-items:center;gap:10px;padding:0 14px}.country-sheet-search:focus-within{border-color:var(--auth-red);box-shadow:0 0 0 5px var(--auth-ring);background:var(--auth-card)}.country-search-icon{color:var(--auth-muted);font-size:17px;line-height:1}.country-sheet-search input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--auth-text);font-family:inherit;font-size:16px;font-weight:700;padding:0}.country-sheet-search input::placeholder{color:color-mix(in srgb,var(--auth-muted) 78%,transparent)}
.country-sheet-list{max-height:calc(min(76svh,680px) - 136px);overflow:auto;padding:4px 12px 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch}.country-sheet-list::-webkit-scrollbar{display:none}.country-section-title{padding:10px 14px 6px;color:var(--auth-muted);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.country-smart-option{width:100%;border:0;outline:0;background:transparent;color:var(--auth-text);text-align:left;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 14px;border-radius:18px;cursor:pointer;font-family:inherit;min-height:58px;-webkit-tap-highlight-color:transparent}.country-smart-option.is-active{background:linear-gradient(135deg,rgba(230,0,40,.18),rgba(230,0,40,.08))}.country-smart-main{min-width:0;display:flex;align-items:center;gap:12px}.country-smart-flag{font-size:24px;line-height:1;flex:0 0 auto}.country-smart-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:15px;font-weight:700;letter-spacing:-.01em}.country-smart-code{color:var(--auth-muted);font-size:14px;font-weight:700;flex:0 0 auto}.country-no-result{padding:20px 16px;text-align:center;color:var(--auth-muted);font-size:14px;font-weight:700}body.country-sheet-lock{overflow:hidden}
.last-login-chip{display:none;margin:10px 0 0;color:var(--auth-muted);font-size:12px;line-height:1.5;font-weight:700}.last-login-chip.is-visible{display:block}.last-login-chip button{border:0;background:transparent;color:var(--auth-red);font:inherit;font-weight:700;padding:0;cursor:pointer}
/* ===== Advanced Country Search + Last Login Prefill END ===== */

/* ===== UBS 10s Launch Animation Splash END ===== */