/*
 * PWA-4 — экран входа dems (dems.labrecordsapp.ru).
 * Lab Records ice/slime + dems dark studio. Не welcome.css, не platform theme variables.
 */

@font-face {
    font-family: "Benzin";
    src: url("/static/fonts/Benzin-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Benzin";
    src: url("/static/fonts/Benzin-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Benzin";
    src: url("/static/fonts/Benzin-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --dems-login-bg-0: #09090b;
    --dems-login-bg-1: #0d1018;
    --dems-login-bg-2: #131722;
    --dems-login-fg: #f3f5f8;
    --dems-login-muted: rgba(226, 230, 238, 0.62);
    --dems-login-subtle: rgba(226, 230, 238, 0.42);
    --dems-login-ice: #5eead4;
    --dems-login-slime: #7cf60a;
    --dems-login-lime: #77f601;
    --dems-login-cta-from: #a3e05f;
    --dems-login-cta-via: #74ac3f;
    --dems-login-cta-to: #3c6427;
    --dems-login-cta-ink: #f4fbe9;
    --dems-login-error: #ffb4b4;
    --dems-login-font: "Benzin", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --dems-login-safe-top: env(safe-area-inset-top, 0px);
    --dems-login-safe-bottom: env(safe-area-inset-bottom, 0px);
}

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

html, body {
    margin: 0;
    min-height: 100%;
    min-height: 100dvh;
}

body.dems-login {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(28px + var(--dems-login-safe-top)) 22px calc(28px + var(--dems-login-safe-bottom));
    color: var(--dems-login-fg);
    font-family: var(--dems-login-font);
    background:
        radial-gradient(ellipse 80% 50% at 8% -6%, rgba(94, 234, 212, 0.14), transparent 58%),
        radial-gradient(ellipse 70% 48% at 108% 8%, rgba(124, 246, 10, 0.1), transparent 55%),
        radial-gradient(ellipse 60% 40% at 50% 118%, rgba(119, 246, 1, 0.07), transparent 60%),
        linear-gradient(180deg, var(--dems-login-bg-2) 0%, var(--dems-login-bg-1) 48%, var(--dems-login-bg-0) 100%);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

.dems-login__glow {
    position: fixed;
    pointer-events: none;
    z-index: 0;
    filter: blur(48px);
    opacity: 0.55;
}

.dems-login__glow--ice {
    top: -12%;
    right: -18%;
    width: min(62vw, 420px);
    height: min(62vw, 420px);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(94, 234, 212, 0.28), transparent 68%);
}

.dems-login__glow--slime {
    bottom: -18%;
    left: -16%;
    width: min(70vw, 480px);
    height: min(70vw, 480px);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(124, 246, 10, 0.22), transparent 70%);
}

.dems-login__stage {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
}

.dems-login__brand {
    margin: 0 0 6px;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dems-login-ice);
}

.dems-login__title {
    margin: 0 0 10px;
    font-size: clamp(2.4rem, 10vw, 3.4rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 0.95;
    color: var(--dems-login-fg);
}

.dems-login__lead {
    margin: 0 0 28px;
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--dems-login-muted);
    max-width: 28ch;
}

.dems-login__error {
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255, 180, 180, 0.28);
    background: rgba(80, 18, 24, 0.45);
    color: var(--dems-login-error);
    font-size: 0.86rem;
    line-height: 1.4;
}

.dems-login__error[hidden] {
    display: none;
}

.dems-login__cta {
    -webkit-appearance: none;
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    padding: 14px 20px;
    border-radius: 999px;
    border: 1px solid rgba(185, 226, 140, 0.4);
    background: linear-gradient(90deg, var(--dems-login-cta-from) 0%, var(--dems-login-cta-via) 55%, var(--dems-login-cta-to) 100%);
    color: var(--dems-login-cta-ink);
    font-family: var(--dems-login-font);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 10px 26px -10px rgba(124, 246, 10, 0.4);
    -webkit-tap-highlight-color: transparent;
}

.dems-login__cta:active:not(:disabled) {
    transform: scale(0.98);
}

.dems-login__cta:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}

.dems-login__disclaimer,
.dems-login__network,
.dems-login__miniapp-note {
    margin: 14px 0 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--dems-login-subtle);
}

.dems-login__network {
    color: rgba(94, 234, 212, 0.72);
}

.dems-login__miniapp {
    margin-top: 28px;
    display: inline-flex;
    align-self: flex-start;
    color: var(--dems-login-fg);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
    padding-bottom: 2px;
}

.dems-login__miniapp:hover {
    color: var(--dems-login-slime);
    border-bottom-color: var(--dems-login-slime);
}

.dems-login__miniapp-note {
    margin-top: 8px;
}

body.dems-login[data-state="redirecting"] .dems-login__cta {
    opacity: 0.45;
}

@media (max-width: 380px) {
    .dems-login__title {
        font-size: 2.2rem;
    }
}