:root {
            --forest: #123f26;
            --forest-dark: #092a18;
            --leaf: #79a84a;
            --earth: #b5683f;
            --cream: #f6f2e8;
            --ink: #183026;
        }

        * { box-sizing: border-box; }

        body {
            min-height: 100vh;
            margin: 0;
            font-family: Inter, "Segoe UI", Arial, sans-serif;
            color: var(--ink);
            background: var(--cream);
        }

        .login-page {
            min-height: 100vh;
            display: grid;
            grid-template-columns: minmax(0, 1.08fr) minmax(440px, .92fr);
        }

        .login-story {
            position: relative;
            min-height: 100vh;
            display: flex;
            align-items: flex-end;
            padding: clamp(2rem, 6vw, 5.5rem);
            overflow: hidden;
            background:
                linear-gradient(180deg, rgba(5, 29, 16, .1), rgba(5, 29, 16, .92)),
                url("../../images/hero-1.jpg") center/cover;
        }

        .login-story::after {
            content: "";
            position: absolute;
            inset: auto -8% -18% auto;
            width: 390px;
            aspect-ratio: 1;
            border: 1px solid rgba(255, 255, 255, .18);
            border-radius: 50%;
            box-shadow: 0 0 0 70px rgba(255,255,255,.035), 0 0 0 140px rgba(255,255,255,.025);
        }

        .story-content {
            position: relative;
            z-index: 1;
            max-width: 640px;
            color: #fff;
        }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: .6rem;
            margin-bottom: 1rem;
            color: #c9e6aa;
            font-size: .76rem;
            font-weight: 700;
            letter-spacing: .16em;
            text-transform: uppercase;
        }

        .story-content h1 {
            max-width: 570px;
            margin: 0 0 1rem;
            font-family: Georgia, "Times New Roman", serif;
            font-size: clamp(3rem, 6vw, 5.6rem);
            font-weight: 700;
            line-height: .92;
        }

        .story-content p {
            max-width: 520px;
            margin: 0;
            color: rgba(255, 255, 255, .76);
            line-height: 1.75;
        }

        .login-panel {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            padding: 3rem clamp(1.5rem, 6vw, 5rem);
            background:
                radial-gradient(circle at 100% 0, rgba(121, 168, 74, .14), transparent 36%),
                var(--cream);
        }

        .login-panel::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 6px;
            height: 100%;
            background: linear-gradient(var(--leaf), var(--earth));
        }

        .login-card { width: min(100%, 460px); }

        .brand {
            display: inline-flex;
            align-items: center;
            margin-bottom: 3.25rem;
            text-decoration: none;
        }

        .brand img {
            width: 142px;
            height: auto;
        }

        .login-card h2 {
            margin: 0 0 .65rem;
            font-family: Georgia, "Times New Roman", serif;
            font-size: clamp(2.5rem, 4vw, 3.4rem);
            font-weight: 700;
            color: var(--forest-dark);
        }

        .intro {
            margin-bottom: 2rem;
            color: #68766f;
            line-height: 1.65;
        }

        .form-label {
            margin-bottom: .55rem;
            font-size: .82rem;
            font-weight: 700;
            color: #30493d;
        }

        .field-wrap { position: relative; }

        .field-wrap > i {
            position: absolute;
            z-index: 2;
            top: 50%;
            left: 1rem;
            color: #799084;
            transform: translateY(-50%);
        }

        .form-control {
            min-height: 56px;
            padding: .8rem 3rem;
            border: 1px solid #d5dcd5;
            border-radius: 14px;
            background: rgba(255, 255, 255, .78);
            color: var(--ink);
        }

        .form-control:focus {
            border-color: var(--leaf);
            background: #fff;
            box-shadow: 0 0 0 .22rem rgba(121, 168, 74, .14);
        }

        .password-toggle {
            position: absolute;
            top: 50%;
            right: .7rem;
            width: 40px;
            height: 40px;
            border: 0;
            border-radius: 10px;
            background: transparent;
            color: #6a7e73;
            transform: translateY(-50%);
        }

        .password-toggle:hover { background: #eef1e9; }

        .btn-login {
            min-height: 56px;
            border: 0;
            border-radius: 14px;
            background: linear-gradient(135deg, var(--forest), #1f633c);
            color: #fff;
            font-weight: 700;
            box-shadow: 0 12px 25px rgba(18, 63, 38, .2);
        }

        .btn-login:hover, .btn-login:focus {
            background: linear-gradient(135deg, var(--forest-dark), var(--forest));
            color: #fff;
            transform: translateY(-1px);
        }

        .btn-login:disabled { opacity: .72; transform: none; }

        .form-alert {
            display: none;
            margin-bottom: 1.25rem;
            padding: .9rem 1rem;
            border: 1px solid #efc6c0;
            border-radius: 12px;
            background: #fff2f0;
            color: #9d3026;
            font-size: .88rem;
        }

        .back-link {
            display: inline-flex;
            align-items: center;
            gap: .55rem;
            margin-top: 2rem;
            color: #61736a;
            font-size: .88rem;
            text-decoration: none;
        }

        .back-link:hover { color: var(--forest); }

        @media (max-width: 900px) {
            .login-page { display: block; }
            .login-story { min-height: 300px; padding: 3rem 1.5rem; }
            .story-content h1 { font-size: 3.5rem; }
            .story-content p { display: none; }
            .login-panel { min-height: auto; padding: 3rem 1.5rem 4rem; }
            .login-panel::before { width: 100%; height: 5px; }
            .brand { margin-bottom: 2rem; }
        }