/* ============================================
           RESET & BASE
        ============================================ */
        *, *::before, *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        :root {
            --navy:         #07090f;
            --navy-mid:     #0f1629;
            --navy-card:    #121929;
            --green:        #007A3D;
            --green-light:  #00a352;
            --green-glow:   rgba(0, 122, 61, 0.35);
            --green-dim:    rgba(0, 122, 61, 0.08);
            --gold:         #FED100;
            --border:       rgba(0, 122, 61, 0.18);
            --border-focus: rgba(0, 163, 82, 0.55);
            --text:         #c8d4e0;
            --text-muted:   #5a6a80;
            --white:        #f0f4f8;
            --error-bg:     rgba(185, 28, 28, 0.12);
            --error-border: rgba(220, 38, 38, 0.35);
            --error-text:   #fca5a5;
        }

        body {
            font-family: 'DM Sans', sans-serif;
            background-color: var(--navy);
            color: var(--text);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            overflow-x: hidden;
        }

        /* ============================================
           BACKGROUND MESH
        ============================================ */
        body::before {
            content: '';
            position: fixed;
            inset: 0;
            background:
                radial-gradient(ellipse 55% 55% at 15% 20%, rgba(0,122,61,0.10) 0%, transparent 70%),
                radial-gradient(ellipse 45% 45% at 85% 80%, rgba(254,209,0,0.04) 0%, transparent 65%),
                radial-gradient(ellipse 35% 40% at 70% 15%, rgba(0,122,61,0.06) 0%, transparent 60%);
            pointer-events: none;
            z-index: 0;
        }

        /* ============================================
           PAGE WRAPPER
        ============================================ */
        .page-wrapper {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 40px 20px;
            position: relative;
            z-index: 1;
        }

        /* ============================================
           LOGIN CARD
        ============================================ */
        .login-card {
            background: var(--navy-card);
            border: 1px solid var(--border);
            width: 420px;
            padding: 48px 42px;
            border-radius: 20px;
            box-shadow:
                0 0 0 1px rgba(0,122,61,0.08),
                0 24px 60px rgba(0,0,0,0.5),
                0 0 80px rgba(0,122,61,0.06);
            animation: cardEntrance 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
            position: relative;
            overflow: hidden;
        }

        /* Green top accent bar */
        .login-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--green), var(--green-light), transparent);
        }

        @keyframes cardEntrance {
            from {
                opacity: 0;
                transform: translateY(32px) scale(0.97);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        /* ============================================
           CARD HEADER
        ============================================ */
        .card-header {
            text-align: center;
            margin-bottom: 36px;
            animation: fadeUp 0.6s 0.15s cubic-bezier(0.22, 1, 0.36, 1) both;
        }

        .card-logo {
            font-family: 'Playfair Display', serif;
            font-size: 22px;
            font-weight: 900;
            color: var(--green-light);
            letter-spacing: -0.5px;
            margin-bottom: 20px;
            display: block;
        }

        .login-card h2 {
            font-family: 'Playfair Display', serif;
            font-size: 1.7rem;
            font-weight: 700;
            color: var(--white);
            letter-spacing: -0.5px;
            line-height: 1.2;
            margin-bottom: 6px;
        }

        .card-subtitle {
            font-size: 13px;
            color: var(--text-muted);
            font-weight: 400;
        }

        /* ============================================
           ERROR BOX
        ============================================ */
        .error-box {
            background: var(--error-bg);
            border: 1px solid var(--error-border);
            color: var(--error-text);
            padding: 10px 14px;
            margin-bottom: 20px;
            border-radius: 10px;
            font-size: 13px;
            line-height: 1.5;
            display: flex;
            align-items: flex-start;
            gap: 8px;
            animation: shakeIn 0.4s ease both;
        }

        .error-box svg {
            width: 15px;
            height: 15px;
            stroke: var(--error-text);
            flex-shrink: 0;
            margin-top: 1px;
        }

        @keyframes shakeIn {
            0%   { transform: translateX(0); opacity: 0; }
            20%  { transform: translateX(-5px); opacity: 1; }
            40%  { transform: translateX(5px); }
            60%  { transform: translateX(-3px); }
            80%  { transform: translateX(3px); }
            100% { transform: translateX(0); }
        }

        /* ============================================
           FORM GROUPS
        ============================================ */
        .form-group {
            margin-bottom: 20px;
            position: relative;
            animation: fadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
        }

        .form-group:nth-child(1) { animation-delay: 0.2s; }
        .form-group:nth-child(2) { animation-delay: 0.28s; }

        .form-group label {
            display: block;
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--text-muted);
            margin-bottom: 8px;
            transition: color 0.2s ease;
        }

        .form-group:focus-within label {
            color: var(--green-light);
        }

        /* Input wrapper for icon */
        .input-wrap {
            position: relative;
        }

        .input-wrap svg {
            position: absolute;
            left: 13px;
            top: 50%;
            transform: translateY(-50%);
            width: 16px;
            height: 16px;
            stroke: var(--text-muted);
            pointer-events: none;
            transition: stroke 0.2s ease;
        }

        .form-group:focus-within .input-wrap svg {
            stroke: var(--green-light);
        }

        .form-group input[type="email"],
        .form-group input[type="password"],
        .form-group input[type="text"] {
            width: 100%;
            padding: 11px 14px 11px 40px;
            font-size: 14px;
            font-family: 'DM Sans', sans-serif;
            font-weight: 400;
            color: var(--white);
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 10px;
            outline: none;
            transition:
                border-color 0.25s ease,
                background 0.25s ease,
                box-shadow 0.25s ease;
        }

        .form-group input::placeholder {
            color: var(--text-muted);
            font-weight: 300;
        }

        .form-group input:focus {
            border-color: var(--border-focus);
            background: rgba(0,122,61,0.05);
            box-shadow: 0 0 0 3px rgba(0,122,61,0.12);
        }

        /* Valid state */
        .form-group input.is-valid {
            border-color: rgba(0,163,82,0.45);
        }

        /* Invalid state */
        .form-group input.is-invalid {
            border-color: rgba(220, 38, 38, 0.5);
            box-shadow: 0 0 0 3px rgba(220,38,38,0.10);
        }

        /* Password toggle button */
        .toggle-password {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            cursor: pointer;
            padding: 4px;
            color: var(--text-muted);
            display: flex;
            align-items: center;
            transition: color 0.2s;
        }

        .toggle-password:hover { color: var(--green-light); }
        .toggle-password svg {
            width: 16px;
            height: 16px;
            stroke: currentColor;
            pointer-events: none;
        }

        /* ============================================
           REMEMBER ME
        ============================================ */
        .form-options {
            margin-bottom: 24px;
            animation: fadeUp 0.6s 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
        }

        .remember {
            display: flex;
            align-items: center;
            gap: 9px;
            cursor: pointer;
            width: fit-content;
        }

        .remember input[type="checkbox"] {
            appearance: none;
            -webkit-appearance: none;
            width: 17px;
            height: 17px;
            border: 1.5px solid rgba(255,255,255,0.15);
            border-radius: 5px;
            background: transparent;
            cursor: pointer;
            position: relative;
            transition: border-color 0.2s, background 0.2s;
            flex-shrink: 0;
        }

        .remember input[type="checkbox"]:checked {
            background: var(--green);
            border-color: var(--green);
        }

        .remember input[type="checkbox"]:checked::after {
            content: '';
            position: absolute;
            left: 4px;
            top: 1px;
            width: 6px;
            height: 10px;
            border: 2px solid #fff;
            border-top: none;
            border-left: none;
            transform: rotate(45deg);
        }

        .remember span {
            font-size: 13px;
            color: var(--text-muted);
            font-weight: 400;
            user-select: none;
        }

        /* ============================================
           LOGIN BUTTON
        ============================================ */
        .login-btn {
            width: 100%;
            padding: 13px;
            background: var(--green);
            color: #fff;
            border: none;
            border-radius: 10px;
            font-size: 14px;
            font-weight: 600;
            font-family: 'DM Sans', sans-serif;
            letter-spacing: 0.3px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition:
                background 0.25s ease,
                transform 0.15s ease,
                box-shadow 0.25s ease;
            box-shadow: 0 4px 20px rgba(0,122,61,0.35);
            animation: fadeUp 0.6s 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
        }

        .login-btn:hover {
            background: var(--green-light);
            transform: translateY(-2px);
            box-shadow: 0 8px 28px rgba(0,122,61,0.45);
        }

        .login-btn:active {
            transform: translateY(0px) scale(0.98);
            box-shadow: 0 2px 10px rgba(0,122,61,0.3);
        }

        /* Ripple effect */
        .login-btn .ripple {
            position: absolute;
            border-radius: 50%;
            background: rgba(255,255,255,0.25);
            transform: scale(0);
            animation: rippleAnim 0.55s linear;
            pointer-events: none;
        }

        @keyframes rippleAnim {
            to { transform: scale(4); opacity: 0; }
        }

        /* Loading state */
        .login-btn.loading {
            pointer-events: none;
            background: var(--green);
            opacity: 0.8;
        }

        .login-btn.loading .btn-text { opacity: 0; }
        .login-btn.loading .btn-spinner { display: flex; }

        .btn-text { transition: opacity 0.2s; }

        .btn-spinner {
            display: none;
            position: absolute;
            inset: 0;
            align-items: center;
            justify-content: center;
        }

        .btn-spinner::after {
            content: '';
            width: 18px;
            height: 18px;
            border: 2px solid rgba(255,255,255,0.3);
            border-top-color: #fff;
            border-radius: 50%;
            animation: spin 0.7s linear infinite;
        }

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

        /* ============================================
           LINKS
        ============================================ */
        .extra-links,
        .signup-link {
            text-align: center;
            margin-top: 14px;
            font-size: 13px;
            color: var(--text-muted);
            animation: fadeUp 0.6s 0.48s cubic-bezier(0.22, 1, 0.36, 1) both;
        }

        .signup-link { animation-delay: 0.54s; }

        a {
            color: var(--green-light);
            text-decoration: none;
            font-weight: 500;
            transition: color 0.2s, text-shadow 0.2s;
        }

        a:hover {
            color: #00cc66;
            text-decoration: none;
            text-shadow: 0 0 10px rgba(0,163,82,0.4);
        }

        /* Divider */
        .divider {
            display: flex;
            align-items: center;
            gap: 12px;
            margin: 22px 0;
            animation: fadeUp 0.6s 0.44s cubic-bezier(0.22, 1, 0.36, 1) both;
        }

        .divider::before,
        .divider::after {
            content: '';
            flex: 1;
            height: 1px;
            background: rgba(255,255,255,0.06);
        }

        .divider span {
            font-size: 11px;
            color: var(--text-muted);
            letter-spacing: 0.05em;
        }

        /* ============================================
           FOOTER
        ============================================ */
        footer {
            background-color: rgba(5, 7, 14, 0.9);
            color: var(--text-muted);
            text-align: center;
            padding: 14px 20px;
            font-size: 12px;
            border-top: 1px solid rgba(255,255,255,0.04);
            position: relative;
            z-index: 1;
        }

        /* ============================================
           ANIMATION UTIL
        ============================================ */
        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(16px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        /* ============================================
           RESPONSIVE
        ============================================ */
        @media (max-width: 480px) {
            .login-card {
                width: 100%;
                padding: 36px 24px;
                border-radius: 16px;
            }
        }