:root {
    --bg: #101012;
    --bg-elevated: #0d0d0f;
    --bg-card: #111114;
    --bg-soft: #17171b;
    --line: rgba(255,255,255,0.08);
    --line-strong: rgba(255,255,255,0.14);
    --text: #f3f3f5;
    --text-soft: #a0a0ab;
    --text-muted: #6e6e79;
    --accent: #f3f3f5;
    --danger: #ef4444;
    --shadow: 0 18px 40px rgba(0,0,0,0.18);
    --radius-sm: 14px;
    --radius-md: 18px;
    --radius-lg: 28px;
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

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

html,
body {
    width: 100%;
    min-height: 100%;
}

html {
    background: var(--bg);
    color-scheme: dark;
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    font-family: var(--font);
    color: var(--text);
    background:
        radial-gradient(circle at 18% 0%, rgba(255,255,255,0.06), transparent 30%),
        radial-gradient(circle at 86% 100%, rgba(255,255,255,0.04), transparent 28%),
        var(--bg);
    overflow: hidden;
    overscroll-behavior: none;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

button,
input {
    font: inherit;
}

.login-wrapper {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding:
        max(22px, env(safe-area-inset-top))
        max(16px, env(safe-area-inset-right))
        max(22px, env(safe-area-inset-bottom))
        max(16px, env(safe-area-inset-left));
    isolation: isolate;
}

.login-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.018), transparent 34%),
        radial-gradient(circle at 50% 26%, rgba(255,255,255,0.038), transparent 34%);
    pointer-events: none;
    z-index: -1;
}

.login-card {
    width: min(100%, 390px);
    max-height: calc(100dvh - max(44px, env(safe-area-inset-top)) - max(44px, env(safe-area-inset-bottom)));
    display: grid;
    grid-template-rows: auto auto auto;
    gap: 18px;
    padding: 22px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255,255,255,0.08);
    background:
        radial-gradient(circle at top right, rgba(255,255,255,0.04), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,0.036), rgba(255,255,255,0.018));
    box-shadow: var(--shadow);
    overflow: hidden;
    animation: loginCardIn 0.32s ease both;
}

@keyframes loginCardIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.login-header {
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 8px;
}

.login-logo {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 17px;
    border: 1px solid rgba(255,255,255,0.08);
    background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.04));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

.login-logo img {
    width: 36px;
    height: 36px;
    display: block;
    border-radius: 11px;
}

.login-header h1 {
    margin: 4px 0 0;
    font-size: 28px;
    line-height: 1;
    font-weight: 780;
    letter-spacing: -0.055em;
    color: var(--text);
}

.login-header p {
    display: none;
}

form {
    display: grid;
    gap: 13px;
    min-width: 0;
}

.form-group {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.form-group label {
    padding-left: 2px;
    color: var(--text-soft);
    font-size: 11px;
    line-height: 1;
    font-weight: 760;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.input-wrapper {
    position: relative;
    min-width: 0;
}

.input-wrapper > svg {
    position: absolute;
    left: 15px;
    top: 50%;
    width: 19px;
    height: 19px;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
    transition: color 0.18s ease;
}

.input-wrapper input {
    width: 100%;
    height: 48px;
    padding: 0 46px 0 46px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 17px;
    outline: none;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02)),
        var(--bg-soft);
    color: var(--text);
    font-size: 16px;
    font-weight: 650;
    letter-spacing: -0.03em;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
    -webkit-appearance: none;
    appearance: none;
}

.input-wrapper input::placeholder {
    color: color-mix(in srgb, var(--text-muted) 72%, transparent);
}

.input-wrapper input:focus {
    border-color: rgba(255,255,255,0.16);
    background:
        radial-gradient(circle at 0% 0%, rgba(255,255,255,0.055), transparent 42%),
        linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025)),
        var(--bg-soft);
    box-shadow: 0 0 0 4px rgba(255,255,255,0.055), inset 0 1px 0 rgba(255,255,255,0.045);
}

.input-wrapper input:focus ~ svg,
.input-wrapper input:focus + svg {
    color: var(--text);
}

.input-wrapper input:-webkit-autofill,
.input-wrapper input:-webkit-autofill:hover,
.input-wrapper input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text);
    caret-color: var(--text);
    box-shadow: 0 0 0 1000px #17171b inset, inset 0 1px 0 rgba(255,255,255,0.035);
    border-color: rgba(255,255,255,0.08);
    transition: background-color 9999s ease-in-out 0s;
}

.toggle-password {
    position: absolute;
    right: 8px;
    top: 50%;
    width: 38px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 13px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transform: translateY(-50%);
    transition: background 0.18s ease, color 0.18s ease;
}

.toggle-password:hover,
.toggle-password:focus-visible {
    background: rgba(255,255,255,0.055);
    color: var(--text);
    outline: none;
}

.toggle-password svg {
    width: 20px;
    height: 20px;
    position: static;
    transform: none;
}

.btn-login {
    width: 100%;
    min-height: 48px;
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid transparent;
    border-radius: 17px;
    background: var(--accent);
    color: #090909;
    font-size: 14px;
    font-weight: 760;
    letter-spacing: -0.02em;
    cursor: pointer;
    box-shadow: none;
    transition: transform 0.18s ease, background 0.18s ease, opacity 0.18s ease;
}

.btn-login:hover {
    background: #ffffff;
}

.btn-login:active {
    transform: translateY(1px);
}

.btn-login:disabled {
    opacity: 0.62;
    cursor: not-allowed;
}

.btn-login .spinner {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(29,16,6,0.22);
    border-top-color: #1d1006;
    border-radius: 50%;
    animation: spin 0.68s linear infinite;
}

.btn-login.loading .spinner {
    display: block;
}

.btn-login.loading .btn-text {
    display: none;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.error-message {
    display: none;
    align-items: flex-start;
    gap: 9px;
    padding: 10px 12px;
    border-radius: 15px;
    border: 1px solid rgba(239,68,68,0.18);
    background: rgba(239,68,68,0.09);
    color: #ff8f8f;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 650;
    animation: errorIn 0.18s ease both;
}

.error-message.visible {
    display: flex;
}

.error-message svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 1px;
}

@keyframes errorIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-footer { display: none; }

@media (max-width: 640px) {
    .login-wrapper {
        align-items: start;
        padding-top: max(86px, env(safe-area-inset-top));
        padding-bottom: max(18px, env(safe-area-inset-bottom));
    }

    .login-card {
        width: 100%;
        max-width: 378px;
        gap: 17px;
        padding: 20px 16px 18px;
        border-radius: 24px;
    }

    .login-logo {
        width: 48px;
        height: 48px;
        border-radius: 16px;
    }

    .login-logo img {
        width: 35px;
        height: 35px;
    }

    .login-header {
        gap: 8px;
    }

    .login-header h1 {
        font-size: 25px;
    }

    form {
        gap: 13px;
    }

    .input-wrapper input,
    .btn-login {
        min-height: 48px;
        height: 48px;
        border-radius: 16px;
    }
}

@media (max-width: 380px), (max-height: 720px) {
    .login-wrapper {
        padding-top: max(48px, env(safe-area-inset-top));
    }

    .login-card {
        gap: 16px;
        padding: 20px 16px 18px;
        border-radius: 24px;
    }

    .login-logo {
        width: 48px;
        height: 48px;
        border-radius: 16px;
    }

    .login-logo img {
        width: 35px;
        height: 35px;
    }

    .login-header h1 {
        font-size: 24px;
    }

    .input-wrapper input,
    .btn-login {
        min-height: 48px;
        height: 48px;
    }
}