* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --ink:        #0d1117;
            --ink-2:      #3d4451;
            --ink-3:      #8991a4;
            --surface:    #ffffff;
            --surface-2:  #f6f7f9;
            --surface-3:  #eef0f4;
            --accent:     #0a7c4e;
            --accent-2:   #0d9e63;
            --accent-3:   #e6f5ee;
            --accent-4:   #b8e6cf;
            --border:     #e2e5ec;
            --r-sm:       8px;
            --r-md:       14px;
            --r-lg:       22px;
            --r-xl:       32px;
        }

        body {
            font-family: 'DM Sans', sans-serif;
            background: linear-gradient(135deg, var(--surface-2) 0%, var(--surface) 100%);
            min-height: 100vh;
            color: var(--ink);
            -webkit-font-smoothing: antialiased;
            overflow-x: hidden;
            width: 100%;
        }

        h1, h2, h3, h4, h5, h6 {
            font-family: 'Syne', sans-serif;
            line-height: 1.15;
            letter-spacing: -0.02em;
        }

        /* Auth Container - FIXED: align to flex-start instead of center */
        .auth-container {
            min-height: 100vh;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            padding: 80px 20px;
            width: 100%;
        }

        /* Auth Card - FIXED: no height restrictions */
        .auth-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--r-xl);
            padding: 2rem;
            box-shadow: 0 4px 8px rgba(0,0,0,0.03), 0 20px 60px rgba(0,0,0,0.07);
            transition: transform 0.25s ease, box-shadow 0.25s ease;
            width: 100%;
            max-width: 560px;
            margin: 0 auto;
            height: auto;
            min-height: auto;
            overflow: visible;
        }

        .auth-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 40px rgba(0,0,0,0.08);
        }

        .auth-icon {
            width: 56px;
            height: 56px;
            background: var(--accent-3);
            border-radius: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 16px;
        }

        .auth-icon i {
            font-size: 24px;
            color: var(--accent);
        }

        .form-label {
            font-size: 13px;
            font-weight: 500;
            color: var(--ink-2);
            margin-bottom: 6px;
        }

        .required-field::after {
            content: '*';
            color: var(--accent);
            margin-left: 4px;
        }

        .form-control, .form-select {
            border-radius: var(--r-sm);
            border: 1px solid var(--border);
            padding: 10px 14px;
            font-size: 14px;
            font-family: 'DM Sans', sans-serif;
            color: var(--ink);
            background: var(--surface);
            transition: border-color 0.2s, box-shadow 0.2s;
            width: 100%;
        }

        .form-control:focus, .form-select:focus {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(10,124,78,0.1);
            outline: none;
        }

        .form-control.is-invalid {
            border-color: #dc2626;
        }

        .invalid-feedback {
            font-size: 12px;
            color: #dc2626;
            margin-top: 4px;
        }

        .form-check-input {
            width: 16px;
            height: 16px;
            margin-top: 2px;
            border: 1.5px solid var(--border);
            border-radius: 4px;
            cursor: pointer;
        }

        .form-check-input:checked {
            background-color: var(--accent);
            border-color: var(--accent);
        }

        .form-check-label {
            font-size: 13px;
            color: var(--ink-2);
            margin-left: 6px;
        }

        .btn-primary-custom {
            font-family: 'DM Sans', sans-serif;
            font-size: 15px;
            font-weight: 500;
            color: white;
            background: var(--ink);
            border: none;
            padding: 13px 28px;
            border-radius: var(--r-sm);
            cursor: pointer;
            transition: background 0.25s, transform 0.25s;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            text-decoration: none;
            width: 100%;
        }

        .btn-primary-custom:hover {
            background: var(--accent);
            transform: translateY(-2px);
            color: white;
        }

        .btn-outline-custom {
            font-family: 'DM Sans', sans-serif;
            font-size: 15px;
            font-weight: 500;
            color: var(--ink-2);
            background: none;
            border: 1.5px solid var(--border);
            padding: 13px 28px;
            border-radius: var(--r-sm);
            cursor: pointer;
            transition: border-color 0.25s, color 0.25s, transform 0.25s;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            text-decoration: none;
            width: 100%;
        }

        .btn-outline-custom:hover {
            border-color: var(--ink);
            color: var(--ink);
            transform: translateY(-2px);
        }

        .alert {
            border: none;
            border-radius: var(--r-md);
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 20px;
        }

        .alert-success {
            background: var(--accent-3);
            color: var(--accent);
        }

        .alert-danger {
            background: #fef2f2;
            color: #dc2626;
        }

        .auth-divider {
            display: flex;
            align-items: center;
            text-align: center;
            margin: 24px 0;
        }

        .auth-divider::before,
        .auth-divider::after {
            content: '';
            flex: 1;
            border-bottom: 1px solid var(--border);
        }

        .auth-divider span {
            padding: 0 16px;
            font-size: 12px;
            color: var(--ink-3);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .auth-link {
            color: var(--accent);
            text-decoration: none;
            font-weight: 500;
            transition: color 0.2s;
        }

        .auth-link:hover {
            color: var(--accent-2);
            text-decoration: underline;
        }

        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(24px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        .fade-up { animation: fadeUp 0.7s ease both; }
        .fade-up-1 { animation-delay: 0.05s; }
        .fade-up-2 { animation-delay: 0.12s; }
        .fade-up-3 { animation-delay: 0.2s; }

        @media (max-width: 768px) {
            .auth-card {
                padding: 1.5rem;
            }
            .auth-container {
                padding: 60px 16px;
            }
        }

        @media (min-width: 768px) {
            .auth-card {
                padding: 2.5rem;
            }
        }