.login-page[data-v-2665ff1f]{overflow:hidden;width:100vw;height:100vh;display:flex;justify-content:center;align-items:center}.login-page .logo[data-v-2665ff1f]{cursor:pointer;position:fixed;top:60px;left:60px}.login-page .logo img[data-v-2665ff1f]{width:167px;height:auto}.login-page .back[data-v-2665ff1f]{cursor:pointer;position:fixed;top:60px;right:60px;font-size:16px;display:flex;align-items:center}.login-page .back span[data-v-2665ff1f]{display:inline-block;margin-left:8px}.login-type-box[data-v-2665ff1f]{position:relative;width:240px;margin-bottom:40px}.login-type-box-item[data-v-2665ff1f]{display:inline-block;flex:1;height:60px;margin-right:20px;justify-content:center;align-items:center;gap:4px;color:#1d2129;font-size:20px;font-style:normal;font-weight:400;line-height:160%;cursor:pointer;transition:color .2s cubic-bezier(0,0,1,1)}.login-type-box-item.active[data-v-2665ff1f]{color:#1c77ff}.login-type-box-nav[data-v-2665ff1f]{position:absolute;bottom:0;height:3px;background:#1c77ff;transition:left .2s cubic-bezier(.34,.69,.1,1),width .2s cubic-bezier(.34,.69,.1,1)}.login-container[data-v-2665ff1f]{border-radius:16px;position:absolute;width:480px;height:563px;padding:0 50px;background:white;box-sizing:border-box;right:160px}.login-container .title[data-v-2665ff1f]{margin:45px auto;width:100%;color:#1d2129;font-size:25px;font-weight:500;line-height:36px}.login-container .forget[data-v-2665ff1f]{min-height:20px;margin-bottom:28px;margin-top:-12px;text-align:end}.login-container .forget-bt[data-v-2665ff1f]{cursor:pointer}.login-container .forget-bt[data-v-2665ff1f]:hover{color:#1c77ff}.login-container .arco-form-item[data-v-2665ff1f]{margin-bottom:24px}.login-container .common-height[data-v-2665ff1f]{height:40px}.login-container .confirm[data-v-2665ff1f]{display:flex;margin-top:16px;color:var(--text-subtle, #4e5969);font-size:12px;font-style:normal;font-weight:400;line-height:22px}.login-container .confirm span[data-v-2665ff1f]{margin-left:13px}.footer-info[data-v-2665ff1f]{position:absolute;bottom:34px;color:var(--text-subtlest, #a9aeb8);font-family:MiSans;font-size:14px;font-style:normal;font-weight:400;line-height:26px}.footer-info a[data-v-2665ff1f]{color:var(--text-subtlest, #a9aeb8)}.login-bg[data-v-2665ff1f]{flex:1;height:100%;background-size:contain}.login-bg img[data-v-2665ff1f]{height:100%;width:100%}.footer[data-v-2665ff1f]{display:flex;justify-content:center;margin-top:30px}.footer button+button[data-v-2665ff1f]{margin-left:15px}
  /* Existing CSS remains unchanged */
    .register-container {
        max-width: 600px;
        margin: 40px auto;
        padding: 0 20px;
    }

    .register-card {
        background-color: #ffffff;
        border: 1px solid #d9d9d9;
        border-radius: 6px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .card-header {
        background-color: #f5f5f5;
        padding: 15px;
        text-align: center;
        font-size: 24px;
        font-weight: bold;
        color: #333;
        border-bottom: 1px solid #d9d9d9;
    }

    .card-header i {
        color: #28a745;
        margin-right: 8px;
    }

    .card-body {
        padding: 20px;
    }

    .form-group {
        margin-bottom: 20px;
    }

    .form-label {
        display: block;
        font-size: 14px;
        color: #333;
        margin-bottom: 8px;
        font-weight: 500;
    }

    .form-input {
        width: 100%;
        padding: 10px;
        font-size: 14px;
        color: #333;
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 4px;
        transition: border-color 0.3s ease;
    }

    .form-input:focus {
        outline: none;
        border-color: #007bff;
        box-shadow: 0 0 4px rgba(0, 123, 255, 0.3);
    }

    .form-input::placeholder {
        color: #999;
    }

    .form-actions {
        text-align: center;
    }

    .submit-button {
        padding: 10px 30px;
        font-size: 16px;
        color: #fff;
        background-color: #007bff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    .submit-button:hover {
        background-color: #0056b3;
    }

    .submit-button:focus {
        outline: none;
        box-shadow: 0 0 4px rgba(0, 123, 255, 0.5);
    }

    .error-container ul {
        list-style: none;
        padding: 0;
        margin-bottom: 15px;
    }

    .error-container li {
        background-color: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
        border-radius: 4px;
        padding: 10px;
        margin-bottom: 8px;
        font-size: 14px;
    }

    .error-container li i {
        margin-right: 5px;
    }

    /* Modal Styles */
    .modal {
        display: none;
        position: fixed;
        z-index: 1000;
        leftkart: center;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
    }

    .modal-content {
        background-color: #fff;
        margin: 15% auto;
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
        max-width: 400px;
        border-radius: 6px;
        text-align: center;
    }

    .modal-close {
        color: #aaa;
        float: right;
        font-size: 20px;
        font-weight: bold;
        cursor: pointer;
    }

    .modal-close:hover,
    .modal-close:focus {
        color: #000;
        text-decoration: none;
    }

    .modal-button {
        padding: 10px 20px;
        font-size: 16px;
        color: #fff;
        background-color: #007bff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        margin-top: 15px;
    }

    .modal-button:hover {
        background-color: #0056b3;
    }