:root {
    --green-950: #0f3f2d;
    --green-900: #16523a;
    --green-850: #1d6345;
    --green-800: #2c7a54;
    --green-700: #3a9864;
    --green-100: #ecf6ef;
    --green-050: #f8fbf8;
    --text-900: #20362d;
    --text-700: #587267;
    --line: #d7ded8;
    --white: #ffffff;
    --shadow: 0 30px 70px rgba(9, 46, 28, .22);
}

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

.gf-login-body {
    min-height: 100vh;
    margin: 0;
    font-family: "Segoe UI", Arial, sans-serif;
    color: var(--text-900);
    background: linear-gradient(135deg, #124c34 0%, #1f6a45 44%, #3a8e63 100%);
    position: relative;
    overflow-x: hidden;
}

.gf-login-body::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 15% 20%, rgba(255,255,255,.08), transparent 24%),
        radial-gradient(circle at 80% 12%, rgba(255,255,255,.08), transparent 20%),
        radial-gradient(circle at 70% 78%, rgba(255,255,255,.06), transparent 24%),
        radial-gradient(circle at 28% 88%, rgba(255,255,255,.05), transparent 18%);
    pointer-events: none;
}

.gf-bg-decor {
    position: fixed;
    z-index: 0;
    opacity: .08;
    user-select: none;
    pointer-events: none;
}

.decor-leaf.left-top { left: 5.5vw; top: 15vh; font-size: 72px; }
.decor-leaf.right-mid { right: 8vw; top: 27vh; font-size: 84px; }
.decor-leaf.left-bottom { left: 4vw; bottom: 17vh; font-size: 78px; }
.decor-leaf.right-bottom { right: 10vw; bottom: 14vh; font-size: 64px; }

.gf-login-page {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 16px;
}

.gf-auth-shell {
    width: min(600px, 96vw);
}

.gf-auth-card {
    background: var(--white);
    border-radius: 30px;
    overflow: hidden;
    box-shadow: var(--shadow);
    border: 1px solid rgba(255,255,255,.55);
}

.gf-auth-top {
    background: linear-gradient(180deg, rgba(13,67,44, .98) 0%, rgba(29, 100, 65, .96) 100%);
    color: #fff;
    text-align: center;
    padding: 38px 30px 34px;
}

.gf-auth-logo {
    width: 82px;
    height: 82px;
    object-fit: contain;
    margin: 0 auto 18px;
    display: block;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.18));
}

.gf-auth-brand-name {
    max-width: 380px;
    margin: 0 auto 10px;
    font-size: clamp(1.55rem, 2.4vw, 1.95rem);
    line-height: 1.08;
    font-weight: 900;
    letter-spacing: -.02em;
    word-break: break-word;
}

.gf-auth-brand-subtitle {
    font-size: 1rem;
    color: rgba(255,255,255,.80);
    font-weight: 600;
}

.gf-auth-form {
    background: #fff;
    padding: 34px 42px 26px;
}

.gf-login-alert {
    border-radius: 14px;
    font-weight: 700;
    margin-bottom: 16px;
}

.gf-auth-label {
    display: block;
    margin-bottom: 10px;
    color: #5f6d65;
    font-size: 1.05rem;
    font-weight: 800;
}

.gf-auth-input-group {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.gf-auth-input-group:focus-within {
    border-color: #72b888;
    box-shadow: 0 0 0 .2rem rgba(58,152,100,.12);
}

.gf-auth-input-icon {
    width: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f8fbf9;
    color: #2f6d50;
    border-right: 1px solid #e6eee8;
    font-size: 1.05rem;
}

.gf-auth-input {
    border: 0;
    outline: 0;
    box-shadow: none;
    flex: 1;
    min-height: 60px;
    padding: 14px 16px;
    font-size: 1.05rem;
    color: var(--text-900);
    background: #fff;
}

.gf-auth-input::placeholder { color: #9faea6; }

.gf-auth-toggle {
    width: 56px;
    border: 0;
    background: #f6f7f6;
    color: #8a9790;
    border-left: 1px solid #e6eee8;
    font-size: 1rem;
}

.gf-login-btn {
    width: 100%;
    min-height: 60px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(90deg, #16523a 0%, #31744f 100%);
    color: #fff;
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: .01em;
    box-shadow: 0 8px 18px rgba(22, 82, 58, .22);
}

.gf-login-btn:hover,
.gf-login-btn:focus {
    color: #fff;
    filter: brightness(1.02);
}

.gf-auth-remember {
    font-size: .98rem;
    color: #5f6d65;
}

.gf-auth-remember label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.gf-auth-remember input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #2c7a54;
}

.gf-auth-note {
    margin-top: 22px;
    border: 1px solid #b8e2c1;
    background: #f3faf4;
    color: #587567;
    border-radius: 14px;
    padding: 14px 16px;
    font-size: 1rem;
    line-height: 1.5;
}

.gf-auth-note strong { color: #2e6b4a; }

.gf-auth-bottom {
    text-align: center;
    color: #a0aaa4;
    font-size: .95rem;
    padding: 22px 16px 26px;
    border-top: 1px solid #eef2ef;
    background: #fff;
}

@media (max-width: 768px) {
    .gf-auth-shell { width: min(580px, 96vw); }
    .gf-auth-top { padding: 30px 24px 26px; }
    .gf-auth-logo { width: 76px; height: 76px; }
    .gf-auth-brand-name {
        max-width: 300px;
        font-size: clamp(1.35rem, 5.2vw, 1.65rem);
        margin-bottom: 8px;
    }
    .gf-auth-brand-subtitle { font-size: .94rem; }
    .gf-auth-form { padding: 28px 24px 22px; }
    .gf-auth-label { font-size: 1rem; }
    .gf-auth-input { min-height: 56px; font-size: 1rem; }
    .gf-auth-input-icon, .gf-auth-toggle { width: 50px; }
    .gf-login-btn { min-height: 56px; font-size: 1.08rem; }
    .gf-auth-bottom { font-size: .87rem; padding: 18px 12px 22px; }
}

@media (max-width: 480px) {
    .gf-login-page { padding: 14px 10px; }
    .gf-auth-card { border-radius: 24px; }
    .gf-auth-top { padding: 24px 18px 22px; }
    .gf-auth-logo { width: 68px; height: 68px; margin-bottom: 14px; }
    .gf-auth-brand-name {
        max-width: 260px;
        font-size: 1.25rem;
        line-height: 1.12;
    }
    .gf-auth-brand-subtitle { font-size: .9rem; }
    .gf-auth-form { padding: 24px 18px 20px; }
    .gf-auth-label { margin-bottom: 8px; font-size: .98rem; }
    .gf-auth-input { min-height: 54px; font-size: .98rem; }
    .gf-auth-note { font-size: .95rem; padding: 13px 14px; }
}

.gf-auth-bottom strong { font-weight: 800; color: inherit; }