:root {
            --primary-gradient: linear-gradient(135deg, #4b6cb7 0%, #182848 100%);
            --secondary-color: #6c757d;
            --light-bg: #f8f9fa;
            --card-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
            --input-focus-shadow: 0 0 0 0.2rem rgba(75, 108, 183, 0.25);
        }
        
        body {
            background: var(--primary-gradient);
            min-height: 100vh;
            display: flex;
            align-items: center;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        .login-container {
            max-width: 1000px;
            width: 100%;
        }
        
        .login-card {
            border-radius: 15px;
            overflow: hidden;
            box-shadow: var(--card-shadow);
            background: white;
        }
        
        .brand-section {
            background: var(--primary-gradient);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: white;
            padding: 2rem;
            position: relative;
            overflow: hidden;
        }
        
        .brand-section::before {
            content: '';
            position: absolute;
            width: 150%;
            height: 150%;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23ffffff' fill-opacity='0.1' d='M0,224L48,213.3C96,203,192,181,288,160C384,139,480,117,576,122.7C672,128,768,160,864,170.7C960,181,1056,171,1152,165.3C1248,160,1344,160,1392,160L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
            background-size: cover;
            opacity: 0.1;
            top: 0;
            left: 0;
        }
        
        .brand-logo {
            width: 120px;
            margin-bottom: 1.5rem;
            z-index: 1;
        }
        
        .brand-text {
            z-index: 1;
            text-align: center;
        }
        
        .brand-text h2 {
            font-weight: 600;
            margin-bottom: 0.5rem;
        }
        
        .form-section {
            padding: 2.5rem;
        }
        
        .form-title {
            font-weight: 600;
            margin-bottom: 1.5rem;
            color: #333;
        }
        
        .form-control {
            border-radius: 8px;
            padding: 0.75rem 1rem;
            border: 1px solid #e2e8f0;
            transition: all 0.3s;
        }
        
        .form-control:focus {
            box-shadow: var(--input-focus-shadow);
            border-color: #4b6cb7;
        }
        
        .input-group-text {
            background: transparent;
            border-radius: 8px 0 0 8px;
            border: 1px solid #e2e8f0;
            border-right: none;
            color: var(--secondary-color);
        }
        
        .form-check-input:checked {
            background-color: #4b6cb7;
            border-color: #4b6cb7;
        }
        
        .btn-primary {
            background: var(--primary-gradient);
            border: none;
            padding: 0.75rem;
            font-weight: 600;
            border-radius: 8px;
            transition: all 0.3s;
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(75, 108, 183, 0.3);
        }
        
        .divider {
            display: flex;
            align-items: center;
            margin: 1.5rem 0;
            color: var(--secondary-color);
        }
        
        .divider::before,
        .divider::after {
            content: '';
            flex: 1;
            border-top: 1px solid #e2e8f0;
        }
        
        .divider::before {
            margin-right: 0.5rem;
        }
        
        .divider::after {
            margin-left: 0.5rem;
        }
        
        .alert-danger {
            border-radius: 8px;
            padding: 0.75rem 1rem;
            background-color: rgba(220, 53, 69, 0.1);
            border: 1px solid rgba(220, 53, 69, 0.2);
            color: #dc3545;
        }
        
        .link-primary {
            color: #4b6cb7;
            text-decoration: none;
            transition: color 0.3s;
        }
        
        .link-primary:hover {
            color: #182848;
        }
.register-container {
            max-width: 1200px;
            width: 100%;
        }
        
        .register-card {
            border-radius: 15px;
            overflow: hidden;
            box-shadow: var(--card-shadow);
            background: white;
        }
        
        .brand-section {
            background: var(--primary-gradient);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: white;
            padding: 2rem;
            position: relative;
            overflow: hidden;
        }
        
        .brand-section::before {
            content: '';
            position: absolute;
            width: 150%;
            height: 150%;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23ffffff' fill-opacity='0.1' d='M0,224L48,213.3C96,203,192,181,288,160C384,139,480,117,576,122.7C672,128,768,160,864,170.7C960,181,1056,171,1152,165.3C1248,160,1344,160,1392,160L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
            background-size: cover;
            opacity: 0.1;
            top: 0;
            left: 0;
        }
        
        .brand-logo {
            width: 120px;
            margin-bottom: 1.5rem;
            z-index: 1;
        }
        
        .brand-text {
            z-index: 1;
            text-align: center;
        }
        
        .brand-text h2 {
            font-weight: 600;
            margin-bottom: 0.5rem;
        }
        
        .form-section {
            padding: 2.5rem;
        }
        
        .form-title {
            font-weight: 600;
            margin-bottom: 1.5rem;
            color: #333;
        }
        
        .form-control {
            border-radius: 8px;
            padding: 0.75rem 1rem;
            border: 1px solid #e2e8f0;
            transition: all 0.3s;
            background: transparent;
        }
        
        .form-control:focus {
            box-shadow: var(--input-focus-shadow);
            border-color: #4b6cb7;
            background: transparent;
        }
        
        .input-group-text {
            background: transparent;
            border-radius: 8px 0 0 8px;
            border: 1px solid #e2e8f0;
            border-right: none;
            color: var(--secondary-color);
        }
        
        .form-check-input:checked {
            background-color: #4b6cb7;
            border-color: #4b6cb7;
        }
        
        .btn-primary {
            background: var(--primary-gradient);
            border: none;
            padding: 0.75rem;
            font-weight: 600;
            border-radius: 8px;
            transition: all 0.3s;
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(75, 108, 183, 0.3);
        }
        
        .alert-danger {
            border-radius: 8px;
            padding: 0.5rem 1rem;
            background-color: rgba(220, 53, 69, 0.1);
            border: 1px solid rgba(220, 53, 69, 0.2);
            color: #dc3545;
            font-size: 0.875rem;
            margin-top: 0.25rem;
        }
        
        .link-primary {
            color: #4b6cb7;
            text-decoration: none;
            transition: color 0.3s;
        }
        
        .link-primary:hover {
            color: #182848;
        }
        
        .form-floating {
            position: relative;
            margin-bottom: 1.5rem;
        }
        
        .form-floating > .form-control {
            height: calc(3.5rem + 2px);
            line-height: 1.25;
        }
        
        .form-floating > label {
            position: absolute;
            top: 0;
            left: 0;
            padding: 1rem 1rem;
            pointer-events: none;
            border: 1px solid transparent;
            transform-origin: 0 0;
            transition: opacity .1s ease-in-out, transform .1s ease-in-out;
            color: #6c757d;
        }
        
        .form-floating > .form-control:focus ~ label,
        .form-floating > .form-control:not(:placeholder-shown) ~ label {
            transform: scale(.85) translateY(-0.9rem) translateX(.15rem);
            background-color: white;
            padding: 0 0.5rem;
            color: #4b6cb7;
            width: auto;
        }
        
        .form-select {
            border-radius: 8px;
            padding: 0.75rem 1rem;
            border: 1px solid #e2e8f0;
            transition: all 0.3s;
            height: calc(3.5rem + 2px);
        }
        
        .form-select:focus {
            box-shadow: var(--input-focus-shadow);
            border-color: #4b6cb7;
        }
        
        .terms-text {
            font-size: 0.9rem;
            margin-left: 0.5rem;
        }