:root {
    --background: #0d0d0d;
    --accent-color: #e2ff01;
    --text-primary: #ffffff;
    --text-secondary: #818181;
    --border-light: rgba(255, 255, 255, 0.1);
    --phone-w: 360px;
    --phone-h: 640px;
    --phone-fit: 1;
    --app-shell-min-h: calc(
        100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)
    );
    --app-menu-width: 300px;
    --app-menu-height: 56.76px;
    --app-menu-bottom: 12px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
}

@supports (height: 100svh) {
    :root {
        --app-shell-min-h: calc(
            100svh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)
        );
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    overflow-x: hidden;
}

html {
    padding: 0;
}

body {
    min-height: 100vh;
    min-height: 100svh;
    padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
    background: var(--background);
    font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/*
  typo — общие модификаторы типографики для любых блоков.

  Свой класс экрана (login-new__title, legal-doc__text) отвечает за
  позицию / отступы / ширину. Роль текста задаётся через typo / typo--*:

    <div class="login-new__title typo typo--title">Вход</div>

  Размер и роль (можно комбинировать с цветом/жирностью):
    typo--hero     — крупный экранный заголовок (~36px), старт/success
    typo--title    — главный заголовок экрана (~22px), логин/профиль
    typo--section  — заголовок секции / шапка документа (~16px)
    typo--body     — основной читаемый текст (~13px)
    typo--caption  — подписи, meta, дисклеймеры (~12px)

  Цвет (вешается поверх размера):
    typo--accent   — акцентный #e2ff01
    typo--muted    — вторичный серый

  Жирность (если нужно явно, поверх роли):
    typo--bold     — 700
    typo--regular  — 400
*/
.typo {
    font-family: inherit;
    margin: 0;
}

.typo--hero {
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
    color: var(--text-primary);
}

.typo--title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-primary);
}

.typo--section {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-primary);
}

.typo--body {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-primary);
}

.typo--caption {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--text-primary);
}

.typo--accent {
    color: var(--accent-color);
}

.typo--muted {
    color: var(--text-secondary);
}

.typo--bold {
    font-weight: 700;
}

.typo--regular {
    font-weight: 400;
}

/*
  Уменьшающий fit только когда viewport короче холста 360×640.
  Постоянный scale: 1.2 убран — он раздувал layout и клипал нижнее меню.
*/
html.app-phone-fit-active .home-screen__phone,
html.app-phone-fit-active .friends-screen,
html.app-phone-fit-active .friend-profile-screen__phone,
html.app-phone-fit-active .my-wishlists-phone,
html.app-phone-fit-active .wishlist-screen__phone,
html.app-phone-fit-active .wishlist-item-screen__phone,
html.app-phone-fit-active .profile-screen__phone,
html.app-phone-fit-active .profile__phone,
html.app-phone-fit-active .congrats-screen__phone,
html.app-phone-fit-active .success-screen__phone,
html.app-phone-fit-active .start-screen__phone,
html.app-phone-fit-active .product-screen__phone,
html.app-phone-fit-active .login-new__phone,
html.app-phone-fit-active .error-screen__phone {
    transform: scale(var(--phone-fit));
    transform-origin: center center;
}

.field {
    position: absolute;
    left: 42px;
    width: 274px;
    height: 37px;
    border-radius: 113px;
    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;
    transform: translateZ(0);
    overflow: visible;
}

.field::before,
.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);
}

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

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

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

.field--textarea {
    height: 140px;
    border-radius: 25px;
    align-items: flex-start;
    padding-top: 10px;
    padding-bottom: 10px;
    overflow: visible;
}

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

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

.field:hover {
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.14) 0%,
        rgba(255, 255, 255, 0.08) 100%
    );
}

.field-input {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    background: transparent;
    padding: 10px 0;
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    color: var(--text-primary);
}

.field-textarea {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    background: transparent;
    padding: 0;
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    color: var(--text-primary);
    resize: none;
}

.field-input:-webkit-autofill,
.field-input:-webkit-autofill:hover,
.field-input:-webkit-autofill:focus,
.field-input:-webkit-autofill:active,
.field-textarea:-webkit-autofill,
.field-textarea:-webkit-autofill:hover,
.field-textarea:-webkit-autofill:focus,
.field-textarea:-webkit-autofill:active {
    -webkit-text-fill-color: var(--text-primary) !important;
    caret-color: var(--text-primary);
    border: none !important;
    outline: none !important;
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    box-shadow: 0 0 0 1000px transparent inset !important;
    background-color: transparent !important;
    background-image: none !important;
    transition: background-color 99999s ease-out, background-image 99999s ease-out;
}

/* Общий сброс жёлтой/голубой подсветки Chrome autofill на тёмных инпутах */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active {
    -webkit-text-fill-color: var(--text-primary, #ffffff) !important;
    caret-color: var(--text-primary, #ffffff);
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    box-shadow: 0 0 0 1000px transparent inset !important;
    background-color: transparent !important;
    background-image: none !important;
    background-clip: content-box !important;
    transition: background-color 99999s ease-out, background-image 99999s ease-out;
}

.field-input::placeholder,
.field-textarea::placeholder {
    color: var(--text-secondary);
}

.field-input:focus,
.field-textarea:focus {
    outline: none;
}

.app-menu {
    position: relative;
    width: var(--app-menu-width);
    height: var(--app-menu-height);
    background: rgba(255, 255, 255, 0.1);
    border-radius: 960px;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*
  Единый док нижней навигации на phone-холсте.
  Без этого bottom гулял: 0 / 12 / 18px между экранами.
*/
.home-screen__menu,
.friends-screen__menu,
.wishlist-screen__menu,
.profile__menu,
.friend-profile-screen__bottom-menu,
.my-wishlists-phone > .app-menu {
    position: absolute;
    left: calc(50% - var(--app-menu-width) / 2);
    bottom: var(--app-menu-bottom);
    width: var(--app-menu-width);
    height: var(--app-menu-height);
    margin: 0;
    transform: none;
    z-index: 15;
}

.app-menu__buttons {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
}

.app-menu__item {
    position: relative;
    flex-shrink: 0;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    outline: none;
    width: 40px;
    height: 40px;
    transition: top 0.32s ease, width 0.32s ease, height 0.32s ease, transform 0.2s ease;
    --menu-icon-size: 20px;
}

.app-menu__item:active {
    transform: scale(0.92);
}

.app-menu__item--active {
    top: -13px;
    z-index: 2;
    width: 51px;
    height: 51px;
    --menu-icon-size: 51px;
}

.app-menu__icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: var(--menu-icon-size);
    height: var(--menu-icon-size);
    pointer-events: none;
    transition: width 0.32s ease, height 0.32s ease;
    background-image: none;
}

.app-menu__icon::before,
.app-menu__icon::after {
    content: "";
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: opacity 180ms ease, transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.app-menu__icon::before {
    background-image: var(--menu-icon-inactive);
    opacity: 1;
    transform: scale(1);
}

.app-menu__icon::after {
    background-image: var(--menu-icon-active);
    opacity: 0;
    transform: scale(0.92);
}

.app-menu__item--active .app-menu__icon::before {
    opacity: 0;
    transform: scale(0.92);
}

.app-menu__item--active .app-menu__icon::after {
    opacity: 1;
    transform: scale(1);
}

.app-menu__item--popular {
    --menu-icon-inactive: url("../img/icon-nav-popular.svg");
    --menu-icon-active: url("../img/icon-nav-popular-active.png");
}

.app-menu__item--favorites {
    --menu-icon-inactive: url("../img/icon-nav-wishlists.svg");
    --menu-icon-active: url("../img/icon-nav-wishlists-active.png");
}

.app-menu__item--friends {
    --menu-icon-inactive: url("../img/icon-nav-friends.svg");
    --menu-icon-active: url("../img/icon-nav-friends-active.png");
}

.app-menu__item--settings {
    --menu-icon-inactive: url("../img/icon-nav-settings.svg");
    --menu-icon-active: url("../img/icon-nav-settings-active.png");
}
    .app-menu__bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        pointer-events: none;
        border-radius: inherit;
    }