/* =========================================================
   banki.ru — index.css
   Главный экран / общая оболочка
   ========================================================= */

:root {
    --bg-main: #050912;
    --bg-secondary: #09111f;

    --glass: rgba(13, 22, 37, 0.72);
    --glass-strong: rgba(10, 18, 31, 0.88);

    --border: rgba(255, 255, 255, 0.09);
    --border-light: rgba(255, 255, 255, 0.14);

    --text-main: #f5f8ff;
    --text-secondary: #9da9bc;
    --text-muted: #657188;

    --accent: #4d8dff;
    --accent-light: #72a8ff;
    --accent-soft: rgba(77, 141, 255, 0.14);
    --accent-glow: rgba(77, 141, 255, 0.28);

    --success: #39d98a;
    --danger: #ff5f6d;

    --radius-large: 26px;
    --radius-medium: 18px;
    --radius-small: 12px;

    --header-height: 72px;
}


/* =========================================================
   RESET
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    width: 100%;
    min-height: 100%;
    background: var(--bg-main);
    color-scheme: dark;
}

body {
    width: 100%;
    min-width: 320px;
    min-height: 100vh;
    margin: 0;

    background:
        radial-gradient(
            circle at 50% -10%,
            rgba(45, 94, 170, 0.16),
            transparent 42%
        ),
        linear-gradient(
            180deg,
            #07101d 0%,
            #050912 100%
        );

    color: var(--text-main);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    overflow-x: hidden;
}

body.modal-open {
    overflow: hidden;
}

button,
input,
textarea {
    font: inherit;
}

button {
    border: 0;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid rgba(77, 141, 255, 0.75);
    outline-offset: 2px;
}


/* =========================================================
   APP
   ========================================================= */

#app {
    position: relative;

    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;

    isolation: isolate;

    overflow: hidden;
}


/* =========================================================
   BACKGROUND
   ========================================================= */

.background-layer {
    position: fixed;
    inset: 0;

    z-index: -10;

    overflow: hidden;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            #07101c 0%,
            #050912 48%,
            #04070d 100%
        );
}

.background-orb {
    position: absolute;

    border-radius: 50%;

    filter: blur(70px);

    opacity: 0.42;

    transform: translateZ(0);
}

.background-orb-1 {
    width: 420px;
    height: 420px;

    top: -210px;
    left: -150px;

    background: rgba(37, 91, 180, 0.26);
}

.background-orb-2 {
    width: 360px;
    height: 360px;

    top: 28%;
    right: -180px;

    background: rgba(42, 103, 220, 0.18);
}

.background-orb-3 {
    width: 460px;
    height: 460px;

    bottom: -300px;
    left: 25%;

    background: rgba(23, 61, 123, 0.18);
}

.background-grid {
    position: absolute;
    inset: 0;

    opacity: 0.16;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px
        );

    background-size: 48px 48px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 90%
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 90%
        );
}


/* =========================================================
   HEADER
   ========================================================= */

.app-header {
    position: relative;
    z-index: 20;

    width: min(100%, 1500px);
    height: var(--header-height);

    margin: 0 auto;
    padding: 12px 18px;

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;

    gap: 12px;
}


/* =========================================================
   BRAND
   ========================================================= */

.brand {
    justify-self: center;

    display: flex;
    align-items: center;
    gap: 10px;

    min-width: 0;

    user-select: none;
}

.brand-mark {
    position: relative;

    width: 32px;
    height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 3px;

    border: 1px solid rgba(108, 160, 255, 0.24);

    border-radius: 10px;

    background:
        linear-gradient(
            145deg,
            rgba(77, 141, 255, 0.20),
            rgba(77, 141, 255, 0.04)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 8px 28px rgba(0, 0, 0, 0.24);
}

.brand-mark span {
    display: block;

    width: 4px;

    border-radius: 4px;

    background: linear-gradient(
        180deg,
        #83b5ff,
        #397cf1
    );

    box-shadow:
        0 0 10px rgba(77, 141, 255, 0.35);
}

.brand-mark span:nth-child(1) {
    height: 10px;
}

.brand-mark span:nth-child(2) {
    height: 16px;
}

.brand-mark span:nth-child(3) {
    height: 22px;
}

.brand-text {
    display: flex;
    flex-direction: column;

    min-width: 0;

    line-height: 1;
}

.brand-text strong {
    color: #f7faff;

    font-size: 16px;
    font-weight: 750;
    letter-spacing: -0.03em;
}

.brand-text span {
    margin-top: 5px;

    color: #69778d;

    font-size: 8px;
    font-weight: 600;

    letter-spacing: 0.13em;
    text-transform: uppercase;
}


/* =========================================================
   HEADER ACCOUNT
   ========================================================= */

.header-account-button {
    justify-self: start;

    min-width: 0;
    max-width: 180px;

    height: 44px;

    padding: 5px 12px 5px 5px;

    display: inline-flex;
    align-items: center;

    gap: 9px;

    color: var(--text-main);

    border: 1px solid var(--border);

    border-radius: 14px;

    background:
        rgba(13, 22, 37, 0.72);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.045),
        0 8px 25px rgba(0, 0, 0, 0.18);

    cursor: pointer;

    transition:
        background 180ms ease,
        border-color 180ms ease,
        transform 180ms ease,
        box-shadow 180ms ease;
}

.header-account-button:hover {
    background: rgba(19, 31, 51, 0.84);

    border-color: var(--border-light);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 10px 30px rgba(0, 0, 0, 0.24);
}

.header-account-button:active {
    transform: scale(0.97);
}

.header-account-avatar {
    flex: 0 0 auto;

    width: 32px;
    height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background:
        linear-gradient(
            145deg,
            #1a3155,
            #0e1a2d
        );

    border: 1px solid rgba(112, 159, 231, 0.18);

    color: #b9d4ff;

    font-size: 13px;
    font-weight: 750;

    background-repeat: no-repeat;
}

.header-account-text {
    min-width: 0;

    overflow: hidden;

    color: #dce6f6;

    font-size: 13px;
    font-weight: 600;

    white-space: nowrap;
    text-overflow: ellipsis;
}


/* =========================================================
   HEADER LOCATION
   ========================================================= */

.header-location-button {
    justify-self: end;

    width: 44px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #9ebff4;

    border: 1px solid var(--border);

    border-radius: 14px;

    background:
        rgba(13, 22, 37, 0.72);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.045),
        0 8px 25px rgba(0, 0, 0, 0.18);

    cursor: pointer;

    transition:
        color 180ms ease,
        background 180ms ease,
        border-color 180ms ease,
        transform 180ms ease;
}

.header-location-button:hover {
    color: #c5dcff;

    background: rgba(19, 31, 51, 0.84);

    border-color: rgba(112, 161, 235, 0.24);
}

.header-location-button:active {
    transform: scale(0.94);
}

.header-location-button svg {
    display: block;
}


/* =========================================================
   MAIN
   ========================================================= */

.app-main {
    position: relative;
    z-index: 1;

    width: min(100%, 1500px);

    min-height: calc(100vh - var(--header-height));
    min-height: calc(100dvh - var(--header-height));

    margin: 0 auto;

    padding: 8px 18px 24px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(280px, 360px);

    gap: 14px;
}


/* =========================================================
   GLASS PANELS
   ========================================================= */

.glass-panel {
    position: relative;

    overflow: hidden;

    border: 1px solid var(--border);

    background:
        linear-gradient(
            145deg,
            rgba(17, 28, 47, 0.76),
            rgba(7, 14, 25, 0.82)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.045),
        0 24px 70px rgba(0, 0, 0, 0.26);

    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.map-panel {
    min-width: 0;

    min-height: 620px;

    border-radius: var(--radius-large);
}

.chat-panel {
    min-width: 0;

    border-radius: var(--radius-large);
}


/* =========================================================
   PANEL TOP
   ========================================================= */

.panel-top {
    position: relative;
    z-index: 5;

    min-height: 74px;

    padding: 18px 20px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.055);

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.025),
            transparent
        );
}

.panel-title-group {
    min-width: 0;
}

.panel-kicker {
    margin-bottom: 4px;

    color: #63738b;

    font-size: 9px;
    font-weight: 750;

    line-height: 1;

    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.panel-title-group h1 {
    margin: 0;

    color: #f4f7fc;

    font-size: 21px;
    font-weight: 700;

    line-height: 1.15;

    letter-spacing: -0.035em;
}


/* =========================================================
   STATUS
   ========================================================= */

.status-pill {
    flex: 0 0 auto;

    min-height: 32px;

    padding: 7px 10px;

    display: inline-flex;
    align-items: center;

    gap: 7px;

    border: 1px solid rgba(255, 255, 255, 0.07);

    border-radius: 999px;

    background:
        rgba(4, 9, 17, 0.42);

    color: #8290a5;

    font-size: 10px;
    font-weight: 600;

    white-space: nowrap;
}

.status-dot {
    width: 7px;
    height: 7px;

    flex: 0 0 auto;

    border-radius: 50%;

    background: #667389;

    box-shadow:
        0 0 0 3px rgba(102, 115, 137, 0.08);
}


/* =========================================================
   GENERIC BUTTONS
   ========================================================= */

.primary-button,
.secondary-button,
.danger-button,
.text-button {
    cursor: pointer;

    transition:
        transform 160ms ease,
        background 160ms ease,
        border-color 160ms ease,
        color 160ms ease,
        box-shadow 160ms ease,
        opacity 160ms ease;
}

.primary-button {
    min-height: 42px;

    padding: 0 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(112, 165, 255, 0.30);

    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            #4d8fff,
            #3976dc
        );

    color: #ffffff;

    font-size: 13px;
    font-weight: 700;

    box-shadow:
        0 10px 25px rgba(42, 100, 211, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.primary-button:hover {
    background:
        linear-gradient(
            145deg,
            #5c9aff,
            #4380e7
        );

    box-shadow:
        0 12px 30px rgba(42, 100, 211, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.primary-button:active,
.secondary-button:active,
.danger-button:active {
    transform: scale(0.97);
}

.primary-button:disabled {
    cursor: wait;
    opacity: 0.55;
}

.secondary-button {
    min-height: 42px;

    padding: 0 16px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255, 255, 255, 0.10);

    border-radius: 13px;

    background:
        rgba(255, 255, 255, 0.045);

    color: #dbe5f5;

    font-size: 13px;
    font-weight: 650;
}

.secondary-button:hover {
    border-color: rgba(255, 255, 255, 0.16);

    background:
        rgba(255, 255, 255, 0.075);
}

.danger-button {
    min-height: 42px;

    width: 100%;

    padding: 0 16px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255, 95, 109, 0.18);

    border-radius: 13px;

    background:
        rgba(255, 75, 91, 0.08);

    color: #ff8290;

    font-size: 13px;
    font-weight: 650;
}

.danger-button:hover {
    background:
        rgba(255, 75, 91, 0.13);

    border-color:
        rgba(255, 95, 109, 0.28);
}

.text-button {
    padding: 0;

    background: transparent;

    color: #76aaff;

    font-size: 13px;
    font-weight: 650;
}

.text-button:hover {
    color: #9ac0ff;
}


/* =========================================================
   HIDDEN
   ========================================================= */

.hidden {
    display: none !important;
}


/* =========================================================
   MODALS — БАЗОВАЯ ОБОЛОЧКА
   ========================================================= */

.modal {
    position: fixed;
    inset: 0;

    z-index: 1000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding:
        max(20px, env(safe-area-inset-top))
        max(20px, env(safe-area-inset-right))
        max(20px, env(safe-area-inset-bottom))
        max(20px, env(safe-area-inset-left));
}

.modal-backdrop {
    position: absolute;
    inset: 0;

    background:
        rgba(2, 5, 10, 0.72);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.modal-card {
    position: relative;
    z-index: 1;

    width: min(100%, 440px);
    max-height: calc(100dvh - 40px);

    overflow-y: auto;

    padding: 26px;

    border: 1px solid rgba(255, 255, 255, 0.10);

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(18, 29, 48, 0.97),
            rgba(7, 14, 25, 0.98)
        );

    box-shadow:
        0 30px 100px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.055);

    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);

    animation:
        modal-in 180ms ease-out;
}

.modal-close {
    position: absolute;

    top: 14px;
    right: 14px;

    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255, 255, 255, 0.07);

    border-radius: 10px;

    background:
        rgba(255, 255, 255, 0.035);

    color: #8b99ad;

    font-size: 23px;
    font-weight: 300;

    line-height: 1;

    cursor: pointer;

    transition:
        color 160ms ease,
        background 160ms ease,
        border-color 160ms ease;
}

.modal-close:hover {
    color: #ffffff;

    background:
        rgba(255, 255, 255, 0.07);

    border-color:
        rgba(255, 255, 255, 0.13);
}

.modal-kicker {
    margin-bottom: 8px;

    color: #6485b5;

    font-size: 9px;
    font-weight: 750;

    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.modal-card h2 {
    margin: 0;

    color: #f5f8ff;

    font-size: 24px;
    font-weight: 720;

    letter-spacing: -0.035em;
}

.modal-card p {
    margin: 9px 0 0;

    color: #8795a9;

    font-size: 13px;
    line-height: 1.55;
}


/* =========================================================
   ACCOUNT MODAL
   ========================================================= */

.account-card {
    text-align: center;
}

.account-avatar {
    width: 70px;
    height: 70px;

    margin: 8px auto 14px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(112, 159, 231, 0.20);

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            #1b3459,
            #0d1a2c
        );

    color: #bcd6ff;

    font-size: 25px;
    font-weight: 750;

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.account-name {
    color: #f5f8ff;

    font-size: 19px;
    font-weight: 700;

    letter-spacing: -0.02em;
}

.account-login {
    margin-top: 5px;

    color: #718096;

    font-size: 12px;
}

.account-card .secondary-button {
    width: 100%;

    margin-top: 24px;
}

.account-card .danger-button {
    margin-top: 9px;
}


/* =========================================================
   NOTIFICATIONS
   ========================================================= */

.notification-container {
    position: fixed;

    z-index: 2000;

    top: max(16px, env(safe-area-inset-top));
    right: max(16px, env(safe-area-inset-right));

    width: min(
        calc(100vw - 32px),
        360px
    );

    display: flex;
    flex-direction: column;

    gap: 8px;

    pointer-events: none;
}

.notification {
    padding: 13px 15px;

    border: 1px solid rgba(255, 255, 255, 0.09);

    border-radius: 14px;

    background:
        rgba(13, 23, 39, 0.94);

    box-shadow:
        0 16px 45px rgba(0, 0, 0, 0.35);

    color: #dce6f5;

    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;

    opacity: 0;
    transform: translateY(-8px) scale(0.98);

    transition:
        opacity 220ms ease,
        transform 220ms ease;
}

.notification.visible {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}

.notification[data-type="success"] {
    border-color:
        rgba(57, 217, 138, 0.20);
}

.notification[data-type="error"] {
    border-color:
        rgba(255, 95, 109, 0.20);
}

.notification[data-type="info"] {
    border-color:
        rgba(77, 141, 255, 0.20);
}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes modal-in {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 980px) {
    .app-main {
        grid-template-columns: 1fr;

        min-height: auto;
    }

    .map-panel {
        min-height: 560px;
    }

    .chat-panel {
        min-height: 300px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {
    :root {
        --header-height: 64px;
    }

    .app-header {
        height: var(--header-height);

        padding:
            max(8px, env(safe-area-inset-top))
            12px
            8px;

        gap: 8px;
    }

    .brand {
        gap: 7px;
    }

    .brand-mark {
        width: 29px;
        height: 29px;

        border-radius: 9px;
    }

    .brand-mark span {
        width: 3px;
    }

    .brand-mark span:nth-child(1) {
        height: 9px;
    }

    .brand-mark span:nth-child(2) {
        height: 14px;
    }

    .brand-mark span:nth-child(3) {
        height: 19px;
    }

    .brand-text strong {
        font-size: 14px;
    }

    .brand-text span {
        font-size: 7px;

        margin-top: 4px;
    }

    .header-account-button {
        height: 40px;

        padding-right: 8px;

        border-radius: 12px;
    }

    .header-account-avatar {
        width: 30px;
        height: 30px;

        border-radius: 9px;
    }

    .header-account-text {
        max-width: 82px;

        font-size: 12px;
    }

    .header-location-button {
        width: 40px;
        height: 40px;

        border-radius: 12px;
    }

    .header-location-button svg {
        width: 20px;
        height: 20px;
    }

    .app-main {
        padding:
            4px
            10px
            max(16px, env(safe-area-inset-bottom));

        gap: 10px;
    }

    .glass-panel {
        border-radius: 21px;
    }

    .map-panel {
        min-height: 500px;
    }

    .panel-top {
        min-height: 66px;

        padding: 15px;

        gap: 8px;
    }

    .panel-title-group h1 {
        font-size: 19px;
    }

    .status-pill {
        max-width: 150px;

        padding: 6px 8px;

        font-size: 9px;
    }

    .status-pill span:last-child {
        overflow: hidden;

        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .modal {
        align-items: flex-end;

        padding:
            10px
            10px
            max(10px, env(safe-area-inset-bottom));
    }

    .modal-card {
        width: 100%;

        max-height:
            calc(100dvh - 20px);

        padding: 23px 18px;

        border-radius: 22px 22px 18px 18px;
    }

    .notification-container {
        top:
            max(10px, env(safe-area-inset-top));

        right: 10px;

        width:
            calc(100vw - 20px);
    }
}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 390px) {
    .header-account-text {
        display: none;
    }

    .header-account-button {
        width: 40px;
        padding: 4px;

        justify-content: center;
    }

    .brand-text span {
        display: none;
    }

    .brand-text strong {
        font-size: 13px;
    }

    .panel-top {
        align-items: flex-start;
    }

    .status-pill {
        max-width: 125px;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* =========================================================
   MAP AUTH PLACEHOLDER
   ========================================================= */

.auth-placeholder {
    position: absolute;
    inset: 0;
    z-index: 1000;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 24px;
    box-sizing: border-box;

    text-align: center;

    background:
        linear-gradient(
            180deg,
            rgba(5, 12, 24, 0.62),
            rgba(5, 12, 24, 0.84)
        );

    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);

    border-radius: inherit;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}


/* Когда пользователь авторизован */

.auth-placeholder.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


/* =========================================================
   ИКОНКА
   ========================================================= */

.auth-placeholder-icon {
    width: 64px;
    height: 64px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 18px;

    border-radius: 20px;

    color: #65aaff;

    background:
        linear-gradient(
            145deg,
            rgba(67, 145, 255, 0.18),
            rgba(67, 145, 255, 0.07)
        );

    border: 1px solid rgba(105, 170, 255, 0.22);

    box-shadow:
        0 0 35px rgba(50, 135, 255, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);

    animation: authPlaceholderIcon 3s ease-in-out infinite;
}


/* =========================================================
   ЗАГОЛОВОК
   ========================================================= */

.auth-placeholder-title {
    max-width: 340px;

    margin-bottom: 9px;

    color: #ffffff;

    font-size: 21px;
    line-height: 1.25;
    font-weight: 700;

    letter-spacing: -0.025em;
}


/* =========================================================
   ОПИСАНИЕ
   ========================================================= */

.auth-placeholder-text {
    max-width: 330px;

    margin-bottom: 22px;

    color: rgba(255, 255, 255, 0.58);

    font-size: 14px;
    line-height: 1.55;
}


/* =========================================================
   КНОПКА
   ========================================================= */

.auth-placeholder .primary-button {
    min-width: 150px;
    min-height: 46px;

    padding: 0 24px;

    border: 0;
    border-radius: 14px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #398cff,
            #2369d8
        );

    box-shadow:
        0 10px 30px rgba(35, 105, 216, 0.30);

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease;
}

.auth-placeholder .primary-button:hover {
    transform: translateY(-1px);

    filter: brightness(1.08);

    box-shadow:
        0 14px 35px rgba(35, 105, 216, 0.40);
}

.auth-placeholder .primary-button:active {
    transform: translateY(1px);
}


/* =========================================================
   АНИМАЦИИ
   ========================================================= */

@keyframes authPlaceholderIcon {
    0%,
    100% {
        transform: translateY(0);
        box-shadow:
            0 0 35px rgba(50, 135, 255, 0.14),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }

    50% {
        transform: translateY(-3px);
        box-shadow:
            0 0 42px rgba(50, 135, 255, 0.22),
            inset 0 1px 0 rgba(255, 255, 255, 0.10);
    }
}