.login-new {
    width: 100%;
    min-height: var(--app-shell-min-h, 100svh);
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--background);
}

.login-new__frame {
    flex-shrink: 0;
}

.login-new__phone {
    position: relative;
    width: 360px;
    height: 640px;
    border-radius: 32px;
    overflow: hidden;
    background: #0d0d0d;
    --ln-panel-x: 30px;
    --ln-panel-y: 92px;
    --ln-panel-w: 300px;
    --ln-panel-h: 478px;
    --ln-panel-r: 23px;
    --ln-panel-bloom-blur: 10px;
    --ln-panel-tint-blur: 2px;
}

.login-new__patterns {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.login-new__glass-bloom {
    position: absolute;
    left: var(--ln-panel-x);
    top: var(--ln-panel-y);
    width: var(--ln-panel-w);
    height: var(--ln-panel-h);
    z-index: 1;
    pointer-events: none;
    clip-path: inset(0 round var(--ln-panel-r));
    -webkit-clip-path: inset(0 round var(--ln-panel-r));
}

.login-new__glass-bloom-canvas {
    position: absolute;
    left: calc(-1 * var(--ln-panel-x));
    top: calc(-1 * var(--ln-panel-y));
    width: 360px;
    height: 640px;
    -webkit-filter: blur(var(--ln-panel-bloom-blur));
    filter: blur(var(--ln-panel-bloom-blur));
    pointer-events: none;
}

.login-new__glass-tint {
    position: absolute;
    left: var(--ln-panel-x);
    top: var(--ln-panel-y);
    width: var(--ln-panel-w);
    height: var(--ln-panel-h);
    border-radius: var(--ln-panel-r);
    z-index: 2;
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(var(--ln-panel-tint-blur)) saturate(140%);
    backdrop-filter: blur(var(--ln-panel-tint-blur)) saturate(140%);
    pointer-events: none;
}

.login-new__panel {
    position: absolute;
    z-index: 3;
    left: var(--ln-panel-x);
    top: var(--ln-panel-y);
    width: var(--ln-panel-w);
    height: var(--ln-panel-h);
    border-radius: var(--ln-panel-r);
    overflow: visible;
    background: transparent;
}

.login-new__pattern-wrap {
    position: absolute;
    width: 300px;
    height: 519.714px;
    overflow: visible;
    pointer-events: none;
}

.login-new__pattern-wrap--left {
    left: -10px;
    top: -5px;
    width: 150px;
    height: 77px;
}

.login-new__pattern-wrap--right {
    left: 91px;
    top: 89px;
    width: 269px;
    height: 530px;
}

.login-new__pattern-layer {
    position: absolute;
    display: block;
    pointer-events: none;
}

.login-new__pattern-layer--left {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left top;
}

.login-new__pattern-layer--photo {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left top;
}

.login-new__glass-border {
    position: absolute;
    left: var(--ln-panel-x);
    top: var(--ln-panel-y);
    width: var(--ln-panel-w);
    height: var(--ln-panel-h);
    border-radius: var(--ln-panel-r);
    z-index: 3;
    padding: 1px;
    pointer-events: none;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.4) 0%,
        rgba(255, 255, 255, 0.36) 12%,
        rgba(255, 255, 255, 0.16) 26%,
        rgba(255, 255, 255, 0.04) 44%,
        rgba(255, 255, 255, 0.02) 50%,
        rgba(255, 255, 255, 0.04) 56%,
        rgba(255, 255, 255, 0.16) 74%,
        rgba(255, 255, 255, 0.36) 88%,
        rgba(255, 255, 255, 0.4) 100%
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 1px 0 0 rgba(255, 255, 255, 0.14),
        inset -1px 0 0 rgba(255, 255, 255, 0.04),
        inset 0 -1px 0 rgba(255, 255, 255, 0.12);
}

.login-new__glow {
    position: absolute;
    z-index: 2;
    left: -14px;
    top: 2px;
    width: 329px;
    height: 109px;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 12%);
    mask-image: linear-gradient(to top, transparent 0%, #000 12%);
}

.login-new__glow-layer {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 447px;
    height: 244px;
    transform: translate(-50%, -44%);
    transform-origin: 50% 74%;
    display: block;
    max-width: none;
    object-fit: contain;
    mix-blend-mode: screen;
    pointer-events: none;
}

.login-new__glow-layer--far {
    filter: blur(16px);
    transform: translate(-50%, -46%) scale(1.08, 1.14);
    opacity: 0.88;
    -webkit-mask-image: linear-gradient(
        to top,
        transparent 0%,
        transparent 18%,
        rgba(0, 0, 0, 0.2) 30%,
        rgba(0, 0, 0, 0.55) 42%,
        rgba(0, 0, 0, 0.82) 52%,
        #000 62%,
        #000 100%
    );
    mask-image: linear-gradient(
        to top,
        transparent 0%,
        transparent 18%,
        rgba(0, 0, 0, 0.2) 30%,
        rgba(0, 0, 0, 0.55) 42%,
        rgba(0, 0, 0, 0.82) 52%,
        #000 62%,
        #000 100%
    );
}

.login-new__close {
    /* Выше .login-new__email-panel / .login-new__step (inset:0), иначе крестик
       некликабелен на шагах почты и ввода кода. */
    position: absolute;
    z-index: 6;
    left: 248px;
    top: 16px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.login-new__close:focus {
    outline: none;
}

.login-new__close-icon {
    width: 15px;
    height: 15px;
    display: block;
    object-fit: contain;
}

.login-new__logo {
    position: absolute;
    z-index: 4;
    left: 109px;
    top: 64px;
    width: 82px;
    height: 83px;
    object-fit: contain;
    display: block;
}

.login-new__title {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 186px;
    transform: translateX(-50%);
    text-align: center;
    white-space: nowrap;
}

.login-new__subtitle {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 214px;
    transform: translateX(-50%);
    text-align: center;
    white-space: nowrap;
}

.login-new__subtitle[hidden] {
    display: none;
}

.login-new__providers,
.login-new__email-panel {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}

.login-new__providers[hidden],
.login-new__email-panel[hidden] {
    display: none;
}

.login-new__providers > *,
.login-new__email-panel > * {
    pointer-events: auto;
}

.login-new__step {
    position: absolute;
    inset: 0;
}

.login-new__step[hidden] {
    display: none;
}

.login-new__back {
    position: absolute;
    left: 14px;
    top: 22px;
    z-index: 5;
    width: 32px;
    height: 32px;
    padding: 4px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.login-new__back:focus {
    outline: none;
}

.login-new__back img {
    display: block;
    width: 9px;
    height: auto;
}

.login-new__btn {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 281px;
    height: 44px;
    border: none;
    border-radius: 109px;
    font-family: inherit;
    font-weight: 700;
    font-size: 17px;
    line-height: 1.15;
    color: #0d0d0d;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
}

.login-new__btn--slot-1 {
    top: 230px;
}

.login-new__btn--slot-2 {
    top: 300px;
}

.login-new__btn:active {
    opacity: 0.88;
}

.login-new__btn:disabled {
    cursor: not-allowed;
    opacity: 0.65;
}

.login-new__btn--accent {
    background: var(--accent-color);
}

.login-new__providers-or {
    position: absolute;
    left: 50%;
    top: 280px;
    transform: translateX(-50%);
    text-align: center;
    pointer-events: none;
}

.login-new__oauth-slot {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    width: 281px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 22px;
}

.login-new__oauth-slot--yandex {
    top: 300px;
}

.login-new__oauth-slot--vk {
    top: 356px;
    /*
      VK OneTap skin=secondary в SDK даёт фон rgba(255,255,255,.12) —
      на тёмном экране кнопка «пропадает», остаётся чёрный текст.
      По гайду VK доп. кнопка рядом с другими OAuth — сплошной #FFFFFF.
    */
    color-scheme: only light;
    background: #ffffff;
}

/*
  Перекрываем токены SDK: :root #id[data-scheme][data-skin] задаёт
  полупрозрачный secondary — без !important не победить.
*/
:root #login-new-vk-container[data-scheme="light"][data-skin="secondary"],
:root #login-new-vk-container[data-scheme="dark"][data-skin="secondary"],
:root #login-new-vk-container {
    --onetap--button_background: #ffffff !important;
    --onetap--button_border: 1px solid rgba(0, 0, 0, 0.12) !important;
    --onetap--background_hover: #f5f5f7 !important;
    --onetap--background_active: #ebecef !important;
    --onetap--text_and_spinner: #000000 !important;
}

.login-new__oauth-slot iframe,
.login-new__oauth-slot > div,
.login-new__oauth-slot > button {
    width: 100%;
    max-width: 281px;
}

.login-new__oauth-slot--fallback {
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    font-weight: 700;
    font-size: 12px;
    line-height: 1.3;
    text-align: center;
    padding: 0 16px;
}

.login-new__email-form {
    position: absolute;
    inset: 0;
}

.login-new__email-form[hidden] {
    display: none;
}

.login-new__field {
    position: absolute;
    left: 50%;
    top: 236px;
    transform: translateX(-50%) translateZ(0);
    width: 281px;
    height: 44px;
    border-radius: 109px;
    border: none;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.11) 0%,
        rgba(255, 255, 255, 0.06) 100%
    );
    display: flex;
    align-items: center;
    padding: 0 22px;
    box-sizing: border-box;
    overflow: visible;
}

.login-new__field::before,
.login-new__field::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    pointer-events: none;
    border: none;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    transform: translateZ(0);
}

.login-new__field::before {
    background-image: url("/static/img/glass-stroke-field-login-tl.svg");
}

.login-new__field::after {
    background-image: url("/static/img/glass-stroke-field-login-br.svg");
}

.login-new__field > * {
    position: relative;
    z-index: 1;
}

.login-new__field-input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.15;
    color: var(--text-primary);
}

.login-new__field-input::placeholder {
    color: var(--text-secondary);
}

.login-new__field-input--code {
    letter-spacing: 0.35em;
    text-align: center;
}

.login-new--email-input .login-new__field {
    top: 248px;
}

.login-new--email-input .login-new__btn--slot-2 {
    top: 308px;
}

.login-new--check-email .login-new__logo,
.login-new--check-email .login-new__glow,
.login-new--code-entry .login-new__logo,
.login-new--code-entry .login-new__glow {
    visibility: hidden;
}

.login-new--check-email .login-new__title,
.login-new--code-entry .login-new__title {
    top: 103px;
    width: 261px;
    white-space: normal;
}

.login-new__check-message {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 156px;
    transform: translateX(-50%);
    width: 261px;
    text-align: center;
}

.login-new__check-message strong {
    color: var(--text-primary);
    word-break: break-word;
}

.login-new__btn--check-manual {
    top: 360px;
}

.login-new__code-message {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 142px;
    transform: translateX(-50%);
    width: 176px;
    text-align: center;
}

.login-new__code-message strong {
    color: var(--text-primary);
    word-break: break-word;
}

.login-new__code-form {
    position: absolute;
    inset: 0;
}

.login-new__code-cells {
    position: absolute;
    left: 50%;
    top: 205px;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
}

.login-new__code-cell {
    box-sizing: border-box;
    width: 44px;
    height: 58px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    font-family: inherit;
    font-weight: 700;
    font-size: 22px;
    line-height: 1;
    text-align: center;
    color: var(--text-primary);
    caret-color: var(--text-primary);
}

.login-new__code-cell:focus {
    outline: 1px solid rgba(255, 255, 255, 0.35);
}

.login-new__code-submit[hidden] {
    display: none;
}

.login-new__legal {
    position: absolute;
    z-index: 4;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    width: 260px;
    text-align: center;
}

.login-new__legal-link {
    color: var(--accent-color);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

.login-new__legal-link:hover,
.login-new__legal-link:focus-visible {
    opacity: 0.85;
}

.login-new--email-input .login-new__legal,
.login-new--check-email .login-new__legal,
.login-new--code-entry .login-new__legal {
    display: none;
}