:root {
    color-scheme: dark;
    --mx-bg: #020a1b;
    --mx-card: #06162e;
    --mx-cyan: #00d6ff;
    --mx-purple: #a42bff;
    --mx-text: #f5f8ff;
    --mx-muted: #8ea3c5;
    --mx-line: rgba(64, 137, 205, .43);
}

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: #010613; }
body.mx-auth-page {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    color: var(--mx-text);
    background: #010613;
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }
body.mx-auth-background { position: relative; isolation: isolate; background: #020a18; }
body.mx-auth-background::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: linear-gradient(180deg, rgba(0, 7, 19, .12), rgba(0, 7, 19, .28)), url('/static/musicx-v2-auth/auth-background-v1.webp?v=3cd36c4d1066');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
body.mx-auth-background .mx-auth-shell {
    background: transparent;
}
body.mx-auth-background .mx-auth-shell::before { display: none; }
body.mx-auth-background .mx-auth-card { backdrop-filter: blur(12px); }
a { color: inherit; text-decoration: none; }

.mx-auth-shell {
    position: relative;
    width: min(100%, 420px);
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 auto;
    padding: max(27px, env(safe-area-inset-top)) 14px max(28px, env(safe-area-inset-bottom));
    overflow: hidden;
    background:
        radial-gradient(circle at 80% 8%, rgba(117, 45, 224, .25), transparent 31%),
        radial-gradient(circle at 4% 48%, rgba(0, 160, 255, .11), transparent 34%),
        linear-gradient(180deg, #031029 0%, var(--mx-bg) 58%, #030817 100%);
}
.mx-auth-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .18;
    background-image:
        linear-gradient(rgba(0, 214, 255, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 214, 255, .07) 1px, transparent 1px);
    background-size: 28px 28px;
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent 58%);
    mask-image: linear-gradient(to bottom, #000, transparent 58%);
}
.mx-auth-topbar {
    position: relative;
    z-index: 2;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.mx-auth-icon-button,
.mx-auth-language {
    min-width: 44px;
    height: 44px;
    padding: 0 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 0;
    border-radius: 12px;
    color: #dce9ff;
    background: rgba(6, 22, 46, .75);
}
.mx-auth-language { color: var(--mx-cyan); font-size: 16px; }
.mx-auth-icon-button svg,
.mx-auth-language svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.mx-auth-main { position: relative; z-index: 1; padding-top: 10px; }
.mx-auth-brand { margin: 0 0 24px; text-align: center; }
.mx-auth-logo {
    width: 72px;
    height: 72px;
    margin: 0 auto 15px;
    display: block;
    border-radius: 50%;
    object-fit: cover;
    filter: drop-shadow(0 0 7px rgba(0, 214, 255, .72)) drop-shadow(0 0 9px rgba(164, 43, 255, .48));
}
.mx-auth-brand h1 { margin: 0; color: #fff; font-size: 25px; line-height: 1; letter-spacing: .16em; text-shadow: 0 0 16px rgba(0, 214, 255, .38); }
.mx-auth-brand p { max-width: 290px; margin: 9px auto 0; color: #8199bc; font-size: 8px; line-height: 1.45; letter-spacing: .17em; }

.mx-auth-card {
    position: relative;
    padding: 27px 15px 17px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 19px;
    background:
        linear-gradient(145deg, rgba(6, 22, 46, .98), rgba(3, 13, 32, .98)) padding-box,
        linear-gradient(135deg, rgba(0, 214, 255, .82), rgba(74, 86, 255, .55) 52%, rgba(164, 43, 255, .78)) border-box;
    box-shadow: 0 14px 35px rgba(0, 0, 0, .3), inset 0 0 24px rgba(38, 95, 180, .08);
}
.mx-auth-card::before {
    content: "";
    position: absolute;
    width: 160px;
    height: 160px;
    top: -110px;
    right: -70px;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(164, 43, 255, .17);
    filter: blur(10px);
}
.mx-auth-heading { position: relative; margin-bottom: 17px; }
.mx-auth-heading > span { color: var(--mx-cyan); font-size: 9px; font-weight: 800; letter-spacing: .17em; }
.mx-auth-heading h2 { margin: 7px 0 7px; color: #fff; font-size: 21px; line-height: 1.18; }
.mx-auth-heading p { margin: 0; color: #93a9c9; font-size: 11px; line-height: 1.5; }

.mx-auth-form { position: relative; margin: 0; }
.mx-auth-field { display: block; margin: 0 0 12px; }
.mx-auth-field > span { display: block; margin: 0 0 7px 2px; color: #b9c8df; font-size: 10px; font-weight: 650; }
.mx-auth-input,
.mx-auth-prefix,
.mx-auth-send {
    min-height: 48px;
    border: 1px solid var(--mx-line);
    border-radius: 12px;
    background: rgba(2, 12, 29, .8);
}
.mx-auth-input {
    width: 100%;
    padding: 0 13px;
    color: #f4f7ff;
    outline: 0;
    appearance: none;
}
.mx-auth-input::placeholder { color: #607a9f; opacity: 1; font-size: 11px; }
.mx-auth-login .mx-auth-input { text-align: center; }
.mx-auth-input:focus { border-color: var(--mx-cyan); box-shadow: 0 0 0 2px rgba(0, 214, 255, .1); }
.mx-auth-phone { display: grid; grid-template-columns: 66px minmax(0, 1fr) 72px; gap: 8px; }
.mx-auth-prefix,
.mx-auth-send { padding: 0 8px; color: var(--mx-cyan); font-size: 11px; }
.mx-auth-send:disabled { color: #607a9f; cursor: wait; }
.mx-auth-forgot { min-height: 32px; margin: -5px 0 7px auto; display: block; color: var(--mx-cyan); font-size: 10px; line-height: 32px; text-align: right; }
.mx-auth-submit {
    width: 100%;
    min-height: 50px;
    margin-top: 1px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(100deg, #00bfe8, #275cff 45%, var(--mx-purple));
    box-shadow: 0 0 13px rgba(0, 214, 255, .25), inset 0 1px rgba(255, 255, 255, .25);
    font-size: 13px;
    font-weight: 750;
}
.mx-auth-submit span { font-size: 22px; line-height: 1; }
.mx-auth-submit:disabled { opacity: .65; cursor: wait; }

.mx-auth-footer { position: relative; z-index: 1; padding: 15px 8px 0; color: #879dbd; font-size: 10px; text-align: center; }
.mx-auth-footer a { min-height: 38px; padding: 0 4px; color: var(--mx-cyan); font-weight: 750; line-height: 38px; }
.mx-auth-footer small { display: block; max-width: 300px; margin: 1px auto 0; color: #536b8e; font-size: 8px; line-height: 1.5; }

body.mx-language-open { overflow: hidden; }
.mx-language-layer {
    position: fixed;
    inset: 0 auto 0 50%;
    z-index: 10020;
    width: min(100%, 420px);
    visibility: hidden;
    opacity: 0;
    transform: translateX(-50%);
    transition: opacity .2s ease, visibility .2s ease;
}
.mx-language-layer.is-open { visibility: visible; opacity: 1; }
.mx-language-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgba(0, 4, 14, .76);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}
.mx-language-sheet {
    position: absolute;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    left: 10px;
    max-height: min(720px, calc(100dvh - 36px));
    padding: 18px 14px 14px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 22px;
    background:
        linear-gradient(150deg, rgba(6, 22, 46, .99), rgba(3, 13, 32, .99)) padding-box,
        linear-gradient(130deg, rgba(0, 214, 255, .82), rgba(72, 88, 255, .5) 50%, rgba(164, 43, 255, .78)) border-box;
    box-shadow: 0 -14px 50px rgba(0, 0, 0, .5), inset 0 0 30px rgba(70, 77, 220, .08);
    transform: translateY(26px) scale(.985);
    transition: transform .22s ease;
}
.mx-language-layer.is-open .mx-language-sheet { transform: translateY(0) scale(1); }
.mx-language-sheet-head {
    min-height: 50px;
    padding: 0 3px 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(87, 130, 190, .22);
}
.mx-language-sheet-head > div > span { display: block; margin-bottom: 4px; color: var(--mx-cyan); font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.mx-language-sheet-head h2 { margin: 0; color: #fff; font-size: 20px; line-height: 1.2; }
.mx-language-close {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(61, 137, 205, .36);
    border-radius: 12px;
    color: #dce9ff;
    background: rgba(2, 12, 29, .75);
}
.mx-language-close svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.mx-language-list {
    max-height: min(610px, calc(100dvh - 120px));
    padding: 10px 0 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 214, 255, .35) transparent;
}
.mx-language-list > button {
    min-width: 0;
    min-height: 58px;
    padding: 9px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 1px solid rgba(64, 137, 205, .27);
    border-radius: 13px;
    color: #c5d3e8;
    background: rgba(2, 12, 29, .68);
    text-align: left;
}
.mx-language-list > button > span { min-width: 0; }
.mx-language-list b,
.mx-language-list small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mx-language-list b { color: #f4f7ff; font-size: 12px; line-height: 1.25; }
.mx-language-list small { margin-top: 4px; color: #6f88aa; font-size: 9px; }
.mx-language-list i {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(67, 139, 207, .35);
    border-radius: 50%;
    color: transparent;
    font-size: 12px;
    font-style: normal;
}
.mx-language-list > button.is-current {
    border-color: rgba(0, 214, 255, .8);
    background: linear-gradient(125deg, rgba(0, 180, 225, .14), rgba(100, 48, 205, .16));
    box-shadow: inset 0 0 18px rgba(0, 214, 255, .06), 0 0 12px rgba(0, 214, 255, .06);
}
.mx-language-list > button.is-current i { border-color: var(--mx-cyan); color: #031024; background: var(--mx-cyan); box-shadow: 0 0 10px rgba(0, 214, 255, .35); }

.mx-auth-register .mx-auth-main { padding-top: 9px; }
.mx-auth-register .mx-auth-brand { margin-bottom: 23px; }
.mx-auth-register .mx-auth-card { padding-top: 27px; }
.mx-auth-register .mx-auth-field { margin-bottom: 11px; }
.mx-auth-forgot-page .mx-auth-card { padding-bottom: 18px; }

@media (min-width: 421px) {
    body.mx-auth-page { background: #010613; }
    .mx-auth-shell { box-shadow: none; }
}

@media (max-width: 359px) {
    .mx-auth-shell { padding-left: 12px; padding-right: 12px; }
    .mx-auth-card { padding-left: 13px; padding-right: 13px; }
    .mx-auth-phone { grid-template-columns: 58px minmax(0, 1fr) 67px; gap: 6px; }
    .mx-language-list { grid-template-columns: 1fr; }
}

body.mx-auth-background .mx-auth-shell { background: transparent; box-shadow: none; }
body.mx-auth-background .mx-auth-card { box-shadow: 0 12px 30px rgba(0, 3, 13, .24), 0 1px 0 rgba(115, 210, 255, .06) inset; }

.mx-auth-consent{display:flex;align-items:flex-start;gap:10px;margin:17px 7px 0;color:#b9c9dd;font-size:13px;line-height:1.65;text-align:left}.mx-auth-consent input{width:20px;height:20px;flex:0 0 20px;margin:1px 0 0;accent-color:#18c8ed;cursor:pointer}.mx-auth-consent label{cursor:pointer}.mx-auth-consent a{color:#68e6ff;text-decoration:underline;text-underline-offset:3px}.mx-auth-consent a:focus-visible,.mx-auth-consent input:focus-visible{outline:2px solid #78eaff;outline-offset:4px}.mx-auth-submit:disabled{opacity:.5;cursor:not-allowed;filter:saturate(.55)}
body.mx-auth-page{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans",Arial,sans-serif;-webkit-font-smoothing:auto;text-rendering:optimizeLegibility}

.mx-auth-mobile { display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: 8px; }
.mx-auth-country-code {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--mx-line);
    border-radius: 12px;
    color: var(--mx-cyan);
    background: rgba(2, 12, 29, .8);
    font-size: 13px;
    font-weight: 750;
}