:root {
    --background-start: #e8eefb;
    --background-middle: #f7f3fb;
    --background-end: #e9f5f1;

    --surface: rgba(255, 255, 255, 0.60);
    --surface-light: rgba(255, 255, 255, 0.78);
    --surface-strong: rgba(255, 255, 255, 0.90);

    --border: rgba(255, 255, 255, 0.82);
    --border-dark: rgba(31, 39, 55, 0.10);

    --text: #17191f;
    --text-soft: #606977;
    --text-light: #9199a6;

    --accent: #17191f;
    --accent-hover: #30343d;

    --blue: #5d8fff;
    --purple: #a66df4;
    --green: #43b989;
    --orange: #f0a453;

    --success: #2fa768;
    --danger: #d94c58;

    --shadow-small:
        0 8px 24px rgba(47, 60, 89, 0.08),
        0 2px 8px rgba(47, 60, 89, 0.04);

    --shadow:
        0 24px 70px rgba(47, 60, 89, 0.14),
        0 8px 24px rgba(47, 60, 89, 0.07);

    --shadow-large:
        0 42px 130px rgba(47, 60, 89, 0.22),
        0 14px 44px rgba(47, 60, 89, 0.10);

    --radius-small: 13px;
    --radius: 20px;
    --radius-large: 30px;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    min-height: 100vh;
    margin: 0;

    color: var(--text);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Display",
        "SF Pro Text",
        "Segoe UI",
        sans-serif;

    background:
        radial-gradient(
            circle at 5% 5%,
            rgba(93, 143, 255, 0.38),
            transparent 31rem
        ),
        radial-gradient(
            circle at 95% 8%,
            rgba(166, 109, 244, 0.31),
            transparent 34rem
        ),
        radial-gradient(
            circle at 78% 94%,
            rgba(67, 185, 137, 0.25),
            transparent 31rem
        ),
        radial-gradient(
            circle at 15% 92%,
            rgba(240, 164, 83, 0.17),
            transparent 28rem
        ),
        linear-gradient(
            145deg,
            var(--background-start) 0%,
            var(--background-middle) 48%,
            var(--background-end) 100%
        );

    background-attachment: fixed;
}

button,
input,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

a {
    color: inherit;
    text-decoration: none;
}

.glass {
    border: 1px solid var(--border);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.70),
            rgba(245, 248, 253, 0.51)
        );

    box-shadow: var(--shadow-large);

    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
}

.logo {
    display: grid;
    place-items: center;

    flex: 0 0 auto;

    width: 47px;
    height: 47px;

    border: 1px solid rgba(255, 255, 255, 0.92);
    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 1),
            rgba(217, 226, 245, 0.86)
        );

    color: #17191f;
    font-size: 20px;
    font-weight: 850;

    box-shadow:
        0 13px 32px rgba(55, 73, 112, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

.button-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    min-height: 48px;
    padding: 0 20px;

    border: 0;
    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            #17191f,
            #303540
        );

    color: white;
    font-weight: 650;

    box-shadow:
        0 13px 28px rgba(23, 25, 31, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);

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

.button-primary:hover {
    transform: translateY(-2px);

    background:
        linear-gradient(
            145deg,
            #2b2f38,
            #414754
        );

    box-shadow:
        0 18px 35px rgba(23, 25, 31, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.button-primary:active {
    transform: translateY(0);
}

.button-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;
    padding: 0 16px;

    border: 1px solid rgba(31, 39, 55, 0.09);
    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.77),
            rgba(237, 241, 249, 0.62)
        );

    color: var(--text-soft);
    font-weight: 600;

    box-shadow:
        0 8px 20px rgba(47, 60, 89, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);

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

.button-secondary:hover {
    transform: translateY(-1px);
    color: var(--text);

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

    box-shadow:
        0 12px 26px rgba(47, 60, 89, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

.field {
    width: 100%;
    min-height: 53px;

    padding: 0 16px;

    border: 1px solid rgba(31, 39, 55, 0.11);
    border-radius: 15px;
    outline: none;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.82),
            rgba(244, 247, 252, 0.72)
        );

    color: var(--text);

    box-shadow:
        inset 0 1px 2px rgba(31, 39, 55, 0.04),
        0 7px 20px rgba(47, 60, 89, 0.05),
        0 1px 0 rgba(255, 255, 255, 0.95);

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

.field:focus {
    border-color: rgba(93, 143, 255, 0.48);

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

    box-shadow:
        0 0 0 4px rgba(93, 143, 255, 0.11),
        0 10px 26px rgba(47, 60, 89, 0.08);
}

.field::placeholder {
    color: #a0a7b3;
}

.field-label {
    display: block;

    margin: 18px 0 8px;

    color: #343944;
    font-size: 14px;
    font-weight: 650;
}

.error-message {
    margin-bottom: 18px;
    padding: 14px 15px;

    border: 1px solid rgba(217, 76, 88, 0.18);
    border-radius: 14px;

    background: rgba(255, 235, 238, 0.79);
    color: var(--danger);

    box-shadow: 0 8px 20px rgba(217, 76, 88, 0.08);

    font-size: 14px;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 8px 12px;

    border: 1px solid rgba(47, 167, 104, 0.18);
    border-radius: 999px;

    background:
        linear-gradient(
            145deg,
            rgba(236, 252, 243, 0.90),
            rgba(218, 246, 232, 0.72)
        );

    color: #26794b;
    font-size: 13px;
    font-weight: 650;

    box-shadow:
        0 8px 20px rgba(47, 167, 104, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

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

    border-radius: 50%;
    background: var(--success);

    box-shadow:
        0 0 0 4px rgba(47, 167, 104, 0.12),
        0 0 12px rgba(47, 167, 104, 0.45);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}