/* Global font family for all Casdoor forms */
.casdoor-login-container,
.casdoor-login-container * {
    font-family: 'HarmonyOS Sans SC', sans-serif !important;
}

.previous-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #666666 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    margin-top: 24px !important;
    transition: color 0.2s ease !important;
}

#casdoor-register-step2-form .previous-link {
    margin-top: 0 !important;
}

.previous-link:hover {
    color: #180057 !important;
    text-decoration: none !important;
}

.previous-link svg {
    flex-shrink: 0 !important;
}

.password-requirements {
    color: #888888 !important;
    font-size: 14px !important;
    margin-top: 8px !important;
    line-height: 1.4 !important;
    font-weight: 300;
}

.password-requirements.error {
    color: #EF4444 !important;
    font-size: 14px !important;
    font-weight: 300 !important;
}

.casdoor-top-notification {
    position: fixed !important;
    top: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 9999 !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    border: 1px solid #EEEEEE !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    animation: slideDownFadeIn 0.3s ease-out !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.casdoor-top-notification.success {
    color: #22C55E !important;
    font-size: 16px !important;
    font-family: HarmonyOS Sans SC, sans-serif !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    word-wrap: break-word !important;
}

.casdoor-top-notification.error {
    color: #d81e06 !important;
    font-size: 16px !important;
    font-family: HarmonyOS Sans SC, sans-serif !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    word-wrap: break-word !important;
}

.casdoor-notification-icon {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
}

@keyframes slideDownFadeIn {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.casdoor-login-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 60vh !important;
    padding: 126px 0 313px 0 !important;
    box-sizing: border-box !important;
}

.casdoor-login-form {
    background: #ffffff !important;
    border-radius: 4px !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    padding: 64px !important;
    width: 100% !important;
    max-width: 640px !important;
    position: relative !important;
    box-sizing: border-box !important;
    font-family: 'HarmonyOS Sans SC', sans-serif !important;
}

.casdoor-login-title {
    font-family: 'HarmonyOS Sans SC', sans-serif !important;
    font-size: 40px !important;
    font-weight: 900 !important;
    color: #000000 !important;
    margin-bottom: 40px !important;
    margin-top: 0 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.password-toggle-icon {
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    cursor: pointer !important;
    padding: 4px !important;
    border-radius: 4px !important;
    transition: background-color 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.password-toggle-icon:hover {
    background-color: #f3f4f6 !important;
}

.password-field-wrapper {
    position: relative !important;
    display: block !important;
}

.password-field-wrapper input {
    padding-right: 48px !important;
}

/* SMS验证码输入框样式 - 按钮在输入框内 */
.sms-code-wrapper {
    position: relative !important;
    display: block !important;
}

.sms-code-wrapper input {
    width: 100% !important;
    padding-right: 110px !important; /* 为按钮留出空间 */
}

.send-sms-button {
    position: absolute !important;
    right: 4px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    padding: 4px 8px !important;
    background-color: #ECEBF2 !important;
    color: #A79EBF !important;
    border: none !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    font-weight: 300 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
}

.send-sms-button:hover:not(:disabled) {
    background-color: #D6D6F2 !important;
    color: #8A7EAF !important;
}

.send-sms-button:disabled {
    background-color: #F5F5F5 !important;
    color: #BBBBBB !important;
    cursor: not-allowed !important;
}

.select2-container--default .select2-selection--single {
    background-color: #ffffff !important;
    border: 1px solid #d1d5db !important;
    border-radius: 4px !important;
    height: 48px !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #333333 !important;
    font-size: 14px !important;
    line-height: 48px !important;
    padding: 0 !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #9ca3af !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 48px !important;
    right: 16px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 7px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="7" viewBox="0 0 12 7" fill="none"><path d="M0.600098 0.599609L5.6001 5.59961L10.6001 0.599609" stroke="%23707070" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-repeat: no-repeat;
    background-size: contain;
}

.select2-dropdown {
    border: 1px solid #d1d5db !important;
    border-radius: 4px !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #d1d5db !important;
    border-radius: 4px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #180057 !important;
    color: #ffffff !important;
}

.select2-container--default .select2-results__option {
    padding: 8px 16px !important;
    font-size: 14px !important;
}

.select2-container {
    width: 100% !important;
}

.casdoor-form-group {
    margin-bottom: 16px;
}

.casdoor-form-group:last-of-type {
    margin-bottom: 0;
}

.casdoor-form-group label {
    display: flex;
    font-size: 16px;
    font-weight: 500;
    color: #333333;
    margin-bottom: 8px;
}

.casdoor-form-group input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    font-size: 14px;
    color: #333333;
    background-color: #ffffff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

/* 所有表单占位符统一样式 */
.casdoor-form-group input::placeholder,
#casdoor-forgot-password-form input::placeholder,
#casdoor-login-form input::placeholder,
#casdoor-register-step1-form input::placeholder,
#casdoor-register-step2-form input::placeholder,
textarea::placeholder {
    color: #BBB !important;
    font-size: 16px !important;
    line-height: 24px !important;
    font-weight: 300 !important;
}

/* 手机端占位符字重400 */
@media (max-width: 768px) {
    .casdoor-form-group input::placeholder,
    #casdoor-forgot-password-form input::placeholder,
    #casdoor-login-form input::placeholder,
    #casdoor-register-step1-form input::placeholder,
    #casdoor-register-step2-form input::placeholder,
    textarea::placeholder {
        font-weight: 400 !important;
    }
}

/* 所有表单输入文字统一样式 - 字重400 */
.casdoor-form-group input,
#casdoor-forgot-password-form input,
#casdoor-login-form input,
#casdoor-register-step1-form input,
#casdoor-register-step2-form input,
textarea {
    font-weight: 400 !important;
}

.casdoor-form-group input:focus {
    outline: none;
    border-color: #5c6ac4;
    box-shadow: 0 0 0 3px rgba(92, 106, 196, 0.1);
}

.casdoor-auth-login-button {
    display: flex !important;
    width: 208px !important;
    height: 40px !important;
    padding: 5px 16px !important;
    justify-content: space-between !important;
    align-items: center !important;
    background-color: #180057 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 4px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease, transform 0.1s ease !important;
    margin-top: 40px !important;
    margin-bottom: 24px !important;
    text-decoration: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.casdoor-auth-login-button:hover {
    background-color: #9688B3 !important;
    transform: translateY(-1px) !important;
    text-decoration: none !important;
    color: #ffffff !important;
}

.casdoor-auth-login-button:active {
    transform: translateY(0) !important;
    background-color: #8A7BA8 !important;
    color: #ffffff !important;
}

.casdoor-auth-login-button:disabled {
    background-color: #a0a6b0 !important;
    cursor: not-allowed !important;
    transform: none !important;
    color: #ffffff !important;
}

.casdoor-login-text {
    flex: 0 0 auto;
    order: 1;
}

.casdoor-login-arrow {
    flex: 0 0 auto;
    order: 2;
    transition: transform 0.2s ease;
}

.casdoor-auth-login-button:hover .casdoor-login-arrow {
    transform: translateX(2px) !important;
}

.casdoor-reset-password-button {
    margin-top: 128px !important;
}

.login-links {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 32px !important;
    margin-top: 24px !important;
}

.forgot-password-link,
.register-link {
    color: #180057 !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    transition: color 0.2s ease !important;
}

.forgot-password-link:hover,
.register-link:hover {
    color: #2d0a8a !important;
    text-decoration: underline !important;
}

.privacy-checkbox {
    margin-bottom: 24px;
    display: flex;
    align-content: center;
    gap: 8px;
    align-items: center;
}

.privacy-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M2.08301 0.625H17.917C18.7221 0.625176 19.3748 1.27785 19.375 2.08301V17.917C19.3748 18.7221 18.7221 19.3748 17.917 19.375H2.08301C1.27785 19.3748 0.625176 18.7222 0.625 17.917V2.08301C0.625176 1.27785 1.27785 0.625176 2.08301 0.625Z" stroke="%23D6D6D6" stroke-width="1.25"/></svg>');
    background-size: 20px 20px;
    background-position: center;
    background-repeat: no-repeat;
    border: none;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
}

.privacy-checkbox input[type="checkbox"]:checked {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><g><path d="M0 2.08333C0 0.932741 0.93274 0 2.08333 0H17.9167C19.0673 0 20 0.93274 20 2.08333V17.9167C20 19.0673 19.0673 20 17.9167 20H2.08333C0.932741 20 0 19.0673 0 17.9167V2.08333Z" fill="%23170057"/><path d="M16.6668 5L7.50016 14.1667L3.3335 10" stroke="white" stroke-width="1.875" stroke-linecap="round" stroke-linejoin="round"/></g></svg>');
}

.privacy-checkbox label {
    color: #888888 !important;
    font-size: 16px !important;
    font-family: HarmonyOS Sans SC, sans-serif !important;
    font-weight: 400 !important;
    line-height: 16px !important;
    word-wrap: break-word !important;
    margin: 0 !important;
    cursor: pointer !important;
}

.casdoor-form-links {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 24px !important;
}

.casdoor-form-links .casdoor-forgot-link,
.casdoor-form-links .casdoor-register-link,
.casdoor-form-links .casdoor-privacy-link {
    color: #170057 !important;
    font-size: 16px !important;
    transition: color 0.2s ease !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    font-weight: 400 !important;
}

.casdoor-form-links .casdoor-forgot-link:hover,
.casdoor-form-links .casdoor-register-link:hover,
.casdoor-form-links .casdoor-privacy-link:hover {
    color: #0f0040 !important;
    text-decoration: underline !important;
    background: none !important;
}

/* Enhanced message styles to override theme */
.casdoor-login-form .casdoor-login-messages,
.casdoor-login-container .casdoor-login-messages,
.casdoor-login-messages {
    margin-bottom: 20px !important;
    width: 100% !important;
    display: block !important;
}

.casdoor-login-form .casdoor-message,
.casdoor-login-container .casdoor-message,
.casdoor-message {
    padding: 12px 16px !important;
    border-radius: 8px !important;
    margin-bottom: 12px !important;
    font-size: 14px !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-weight: normal !important;
    line-height: 1.4 !important;
    text-align: left !important;
}

.casdoor-login-form .casdoor-message.error,
.casdoor-login-container .casdoor-message.error,
.casdoor-message.error {
    background-color: #fee2e2 !important;
    border: 1px solid #fca5a5 !important;
    color: #dc2626 !important;
}

.casdoor-login-form .casdoor-message.success,
.casdoor-login-container .casdoor-message.success,
.casdoor-message.success {
    background-color: #d1fae5 !important;
    border: 1px solid #86efac !important;
    color: #059669 !important;
}

.casdoor-login-form .casdoor-message.info,
.casdoor-login-container .casdoor-message.info,
.casdoor-message.info {
    background-color: #dbeafe !important;
    border: 1px solid #93c5fd !important;
    color: #2563eb !important;
}

.casdoor-logged-in {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    padding: 32px;
    max-width: 500px;
    margin: 20px auto;
}

.casdoor-user-info {
    display: flex;
    align-items: center;
    gap: 20px;
}

.casdoor-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

.casdoor-user-details h3 {
    margin: 0 0 8px 0;
    color: #333333;
    font-size: 20px;
}

.casdoor-user-details p {
    margin: 0 0 16px 0;
    color: #666666;
}

.casdoor-member-level {
    font-weight: 600;
    color: #5c6ac4;
    text-transform: capitalize;
}

.casdoor-user-actions {
    display: flex;
    gap: 12px;
}

.casdoor-dashboard-btn,
.casdoor-logout-btn {
    padding: 8px 16px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}

.casdoor-dashboard-btn {
    background-color: #5c6ac4;
    color: #ffffff;
}

.casdoor-dashboard-btn:hover {
    background-color: #4a2373;
}

.casdoor-logout-btn {
    background-color: #f5f5f5;
    color: #666666;
}

.casdoor-logout-btn:hover {
    background-color: #e0e0e0;
    color: #333333;
}

.casdoor-error {
    background-color: #fee;
    border: 1px solid #fcc;
    color: #c33;
    padding: 16px;
    border-radius: 8px;
    margin: 20px 0;
    text-align: center;
}



.req-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 14px;
    color: #666;
}

.req-item:last-child {
    margin-bottom: 0;
}

.req-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #dee2e6;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    font-size: 12px;
    transition: all 0.2s ease;
}

.req-item.valid .req-icon {
    background: #28a745;
    color: white;
}

.req-item.valid {
    color: #28a745;
}

.password-match-indicator {
    margin-top: 5px;
    font-size: 14px;
    min-height: 20px;
}

.password-match-indicator.match {
    color: #28a745;
}

.password-match-indicator.no-match {
    color: #dc3545;
}

/* Step Indicator Styles */
.register-step-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    padding: 0 20px;
}

.step {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e9ecef;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s ease;
}

.step.active {
    background: #170057;
    color: white;
}

.step.completed {
    background: #28a745;
    color: white;
}

.step-line {
    width: 60px;
    height: 2px;
    background: #e9ecef;
    margin: 0 10px;
    transition: all 0.3s ease;
}

.step-line.completed {
    background: #28a745;
}

.register-content h3 {
    text-align: center;
    color: #170057;
    font-size: 24px;
    margin: 0 0 10px 0;
    font-weight: 600;
}

.register-desc {
    color: #666;
    margin-bottom: 40px;
    font-size: 14px;
    font-weight: 300;
}

.register-error {
    text-align: center;
    padding: 40px 20px;
}

.register-error h3 {
    color: #dc3545;
    margin-bottom: 15px;
}

.register-error p {
    color: #666;
    margin-bottom: 25px;
}

.casdoor-btn {
    display: inline-block;
    background: #170057;
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.3s ease;
}

.casdoor-btn:hover {
    background: #A79EBF;
    color: white;
    text-decoration: none;
}

/* Checkbox Styles */
.casdoor-checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0;
}

.casdoor-checkbox-wrapper input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: #180057;
    cursor: pointer;
    flex-shrink: 0;
}

.casdoor-checkbox-wrapper input[type="checkbox"]:checked {
    background-color: #180057;
}

.casdoor-checkbox-text {
    color: #888888;
    font-size: 16px;
    line-height: 1.4;
    cursor: pointer;
    flex: 1;
}

/* Privacy Link Styles - Enhanced specificity to override theme */
.casdoor-login-form .casdoor-privacy-link,
.casdoor-login-container .casdoor-privacy-link,
a.casdoor-privacy-link,
.privacy-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #170057 !important;
    text-decoration: none !important;
    font-size: 16px !important;
    font-family: HarmonyOS Sans SC, sans-serif !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    word-wrap: break-word !important;
    transition: all 0.2s ease !important;
    border: none !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    text-transform: none !important;
}

/* Privacy Link Arrow */
.casdoor-login-form .casdoor-privacy-link::after,
.casdoor-login-container .casdoor-privacy-link::after,
a.casdoor-privacy-link::after,
.privacy-link::after {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M6 12L10 8L6 4" stroke="%23170057" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>') !important;
    display: inline-flex !important;
    align-items: center !important;
    margin-left: 4px !important;
    transition: transform 0.2s ease !important;
    vertical-align: text-bottom !important;
    line-height: 0 !important;
}

.casdoor-login-form .casdoor-privacy-link:hover,
.casdoor-login-container .casdoor-privacy-link:hover,
a.casdoor-privacy-link:hover,
.casdoor-privacy-link:hover,
.privacy-link:hover {
    color: #A79EBF !important;
}

/* Privacy Link Arrow Hover */
.casdoor-login-form .casdoor-privacy-link:hover::after,
.casdoor-login-container .casdoor-privacy-link:hover::after,
a.casdoor-privacy-link:hover::after,
.privacy-link:hover::after {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M6 12L10 8L6 4" stroke="%23A79EBF" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>') !important;
    transform: translateX(2px) !important;
}

.casdoor-login-form .casdoor-privacy-link svg,
.casdoor-login-container .casdoor-privacy-link svg,
a.casdoor-privacy-link svg,
.casdoor-privacy-link svg {
    transition: transform 0.2s ease !important;
    fill: none !important;
    stroke: currentColor !important;
}

.casdoor-login-form .casdoor-privacy-link:hover svg,
.casdoor-login-container .casdoor-privacy-link:hover svg,
a.casdoor-privacy-link:hover svg,
.casdoor-privacy-link:hover svg {
    transform: translateX(2px) !important;
}


.casdoor-email-description {
    margin: 0;
    padding: 0;
    color: #888888;
    font-family: var(--font-style-italic, "HarmonyOS Sans SC");
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: var(--typography-base-sizes-small-line-height, 20px);
}

.casdoor-error-page {
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 40px 20px !important;
    background-color: #f9fafb !important;
}

.error-container {
    max-width: 1000px !important;
    width: 100% !important;
}

.error-title {
    font-size: 56px !important;
    font-weight: 900 !important;
    color: #000000 !important;
    margin: 0 0 40px 0 !important;
    line-height: 1.2 !important;
}

.error-content {
    background: #ffffff !important;
    border-radius: 8px !important;
    padding: 40px !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important;
}

.error-alert {
    display: flex !important;
    gap: 16px !important;
    padding: 20px !important;
    background-color: #FEE2E2 !important;
    border: 1px solid #FECACA !important;
    border-radius: 8px !important;
    margin-bottom: 32px !important;
}

.error-icon {
    flex-shrink: 0 !important;
}

.error-text {
    flex: 1 !important;
}

.error-subtitle {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #000000 !important;
    margin: 0 0 8px 0 !important;
}

.error-message {
    font-size: 14px !important;
    color: #666666 !important;
    margin: 0 !important;
}

.error-suggestions {
    margin-bottom: 32px !important;
}

.suggestions-title {
    font-size: 16px !important;
    color: #666666 !important;
    margin: 0 0 16px 0 !important;
}

.suggestions-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.suggestions-list li {
    font-size: 16px !important;
    color: #666666 !important;
    padding-left: 24px !important;
    margin-bottom: 8px !important;
    position: relative !important;
}

.suggestions-list li:before {
    content: "·" !important;
    position: absolute !important;
    left: 8px !important;
    font-weight: bold !important;
}

.try-again-button {
    display: inline-block !important;
    padding: 12px 28px !important;
    background-color: #F5F5F5 !important;
    color: #333333 !important;
    text-decoration: none !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.try-again-button:hover {
    background-color: #f9fafb !important;
    border-color: #9ca3af !important;
    text-decoration: none !important;
}

.casdoor-registration-success {
    display: flex !important;
    justify-content: center !important;
    padding: 190px 0px !important;
    background-color: #f9fafb !important;
}

.success-container {
    max-width: 512px !important;
    width: 100% !important;
    text-align: center !important;
    height: auto;
}

.success-title {
    font-size: 40px !important;
    font-weight: 900 !important;
    color: #000000 !important;
    margin: 0 0 40px 0 !important;
    line-height: 1.2 !important;
    text-align: left !important;;
}

.success-content {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 40px !important;
}

.success-icon {
    flex-shrink: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 48px !important;
    height: 48px !important;
}

.success-icon svg {
    width: 48px !important;
    height: 48px !important;
}

.success-text {
    flex: 1 !important;
}

.success-subtitle {
    color: var(--dc-color-text-primary, #333) !important;
    font-size: var(--typography-base-sizes-base-font-size, 16px) !important;
    font-style: normal !important;
    font-weight: var(--font-weight-medium, 500) !important;
    line-height: var(--typography-base-sizes-base-line-height, 24px) !important;
    margin: 0 0 12px 0 !important;
    text-align: left !important;
}

.success-message {
    color: var(--dc-color-text-secondary, #707070) !important;
    font-size: var(--typography-base-sizes-base-font-size, 16px) !important;
    font-style: normal !important;
    font-weight: var(--font-weight-normal, 400) !important;
    line-height: 100% !important;
    margin: 0 !important;
    text-align: left !important;
}

.success-actions {
    display: flex !important;
    justify-content: flex-start !important;
}

.edit-profile-button {
    display: inline-block !important;
    padding: 8px 24px !important;
    color: #333333 !important;
    text-decoration: none !important;
    border: 1px solid #D6D6D6 !important;
    border-radius: 4px !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    transition: all 0.2s ease !important;
    background: #F5F5F5 !important;
}

.edit-profile-button:hover {
    background-color: #f9fafb !important;
    border-color: #9ca3af !important;
    text-decoration: none !important;
}

@media (max-width: 768px) {
    .success-title {
        font-size: 32px !important;
    }
    
    .success-content {
        display: flex !important;
        align-items: flex-start !important;
        gap: 24px !important;
        margin-bottom: 10px !important;
    }
    
    .success-subtitle {
        font-size: 20px !important;
        font-weight: 600 !important;
        color: #333333 !important;
        margin: 0 0 10px 0 !important;
        text-align: left;
    }
    
    .casdoor-registration-success {
        display: flex !important;
        justify-content: center !important;
        padding: 150px 10px !important;
        background-color: #f9fafb !important;
    }
    
    /* Login/Register/Forgot Password Forms - Mobile */
    .casdoor-login-form {
        padding: 24px !important;
    }
    
    .casdoor-login-title {
        font-size: 24px !important;
        margin-bottom: 24px !important;
    }
    
    .casdoor-form-group label {
        font-size: 16px !important;
    }
    
    .casdoor-form-group input,
    .casdoor-form-group select,
    .select2-container--default .select2-selection--single {
        font-size: 16px !important;
    }
    
    /* 手机端占位符样式已在主样式中统一设置（字重400） */
    
    .casdoor-auth-login-button {
        width: auto !important;
        font-weight: 400 !important;
        font-size: 16px !important;
        padding: 3px 9.6px !important;
        gap: 24px !important;
        margin-top: 24px !important;
        margin-bottom: 12px !important;
    }
    
    .privacy-checkbox {
        margin-bottom: 14.4px !important;
    }
    
    .privacy-checkbox label {
        font-size: 12px !important;
    }
    
    .privacy-checkbox input[type="checkbox"] {
        width: 12px !important;
        height: 12px !important;
        background-size: 12px 12px !important;
    }
    
    .privacy-link,
    .casdoor-privacy-link,
    a.casdoor-privacy-link {
        font-size: 12px !important;
    }
    
    .login-links,
    .casdoor-form-links {
        margin-top: 12px !important;
    }
    
    .forgot-password-link,
    .register-link,
    .casdoor-form-links .casdoor-forgot-link,
    .casdoor-form-links .casdoor-register-link {
        font-size: 12px !important;
    }
    
    .register-desc,
    .casdoor-email-description,
    .field-error,
    .form-description,
    .casdoor-login-form p {
        font-size: 12px !important;
    }
}

@media (max-width: 480px) {
    .casdoor-login-form {
        padding: 32px 24px;
        margin: 20px;
    }
    
    .casdoor-user-info {
        flex-direction: column;
        text-align: center;
    }
    
    .casdoor-user-actions {
        justify-content: center;
    }
    
    .success-title {
        font-size: 32px !important;
        margin-bottom: 0px !important;
    }
}

/* Forgot Password Error/Success Messages */
.casdoor-error-message {
    margin-bottom: 20px !important;
    padding: 12px 16px !important;
    border-radius: 4px !important;
    background-color: #FEE2E2 !important;
    border: 1px solid #FCA5A5 !important;
    color: #DC2626 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
}

.casdoor-error-message.casdoor-success-message {
    background-color: #D1FAE5 !important;
    border: 1px solid #6EE7B7 !important;
    color: #059669 !important;
}

.upc-menu-item.active {
    background: #F5F5F5;
    color: var(--dc-color-foreground-primary);
}:root {
    --dc-color-foreground-primary: #170057;
    --dc-color-background-tertiary: #ECEBF2;
    --dc-color-background-secondary: #F5F5F5;
    --dc-color-border-primary: #eee;
    --dc-color-text-primary: #333333;
    --dc-color-text-secondary: #888888;
    --dc-color-text-tertiary: #BBBBBB;
}

.upc-container {
    display: flex;
    background: #FFFFFF;
    border: 1px solid var(--dc-color-border-primary);
    border-radius: 4px;
    overflow: hidden;
    min-height: 590px;
    position: relative;
}

.upc-return {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    background: #F9F9F9;
    border: none;
    cursor: pointer;
}

.upc-return span {
    color: var(--dc-color-text-primary, #333);
    font-size: var(--typography-base-sizes-small-font-size, 14px);
    font-style: normal;
    font-weight: var(--font-weight-medium, 500);
    line-height: var(--typography-base-sizes-small-line-height, 20px);
}

.upc-sidebar {
    width: 320px;
    background: #FFFFFF;
    border-right: 1px solid var(--dc-color-border-primary);
    padding: 0;
}

.upc-user-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 0;
    border-bottom: 1px solid #eee;
}

.upc-avatar-small {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 12px;
}

.upc-user-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.upc-username {
    color: var(--dc-color-text-primary, #333);
    text-align: center;
    font-size: var(--typography-base-sizes-base-font-size, 16px);
    font-style: normal;
    font-weight: var(--font-weight-medium, 500);
    line-height: var(--typography-base-sizes-base-line-height, 24px);
    margin-bottom: 2px;
}

.upc-email {
    color: var(--dc-color-text-secondary, #707070);
    text-align: center;
    font-size: var(--typography-base-sizes-extra-small-font-size, 12px);
    font-style: normal;
    font-weight: var(--font-weight-normal, 400);
    line-height: var(--typography-base-sizes-extra-small-line-height, 16px);
}

.upc-menu {
    display: flex;
    flex-direction: column;
    padding: 24px 0 0 0;
}

.upc-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    text-decoration: none;
    color: var(--dc-color-text-secondary);
    font-size: 14px;
    border-radius: 0;
    transition: all 0.2s;
    background: #FFFFFF;
}

.upc-menu-item:hover {
    background: var(--dc-color-background-tertiary);
    color: var(--dc-color-foreground-primary);
}

.upc-menu-item:hover .upc-menu-icon-left path {
    stroke: var(--dc-color-foreground-primary);
}

.upc-menu-item:hover .upc-menu-icon-right path {
    stroke: var(--dc-color-foreground-primary);
}

.upc-menu-item.active {
    background: var(--dc-color-background-tertiary);
    color: var(--dc-color-foreground-primary);
}

.upc-menu-item.active .upc-menu-icon-left path {
    stroke: var(--dc-color-foreground-primary);
}

.upc-menu-item.active .upc-menu-icon-right path {
    stroke: var(--dc-color-foreground-primary);
}

.upc-menu-item span {
    flex: 1;
}

.upc-menu-icon-left {
    width: 20px;
    height: 20px;
}

.upc-menu-icon-right {
    width: 16px;
    height: 16px;
}

.upc-content {
    width: 880px;
    display: flex;
    flex-direction: column;
    padding: 24px;
}

.upc-tabs {
    display: flex;
    border-bottom: 1px solid var(--dc-color-border-primary);
}

.upc-tab {
    flex: 1;
    padding: 8px 16px;
    background: #FFFFFF;
    border: 1px solid #eee;
    border-bottom: none;
    border-right: none;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #333;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    white-space: normal;
    word-wrap: break-word;
}

.upc-tab:first-child {
    border-left: 1px solid #eee;
}

.upc-tab:last-child {
    border-right: 1px solid #eee;
}

.upc-tab:hover {
    background: #ECEBF2;
    color: #170057;
    font-weight: 500;
}

.upc-tab.active {
    background: #ECEBF2;
    color: #170057;
    font-weight: 500;
}

.upc-tab-content {
    display: none;
    padding: 0;
}

.upc-tab-content.active {
    display: block;
}

.upc-avatar-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 0 28px 0;
    margin-bottom: 0;
}

.upc-avatar-large {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 16px;
}

.upc-upload-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 24px;
    border: 1px solid var(--dc-color-border-primary, #D6D6D6) !important;
    background: var(--dc-color-foreground-quaternary, #F5F5F5) !important;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: var(--dc-color-text-primary, #333) !important;
    cursor: pointer;
    transition: all 0.2s;
}

.upc-upload-btn:hover {
    border: 1px solid var(--dc-color-border-brand-secondary, #A79EBF) !important;
    background: var(--dc-color-button-secondary-bg, #FFF) !important;
}

.upc-upload-btn:active {
    border: 1px solid var(--dc-color-border-brand, #170057) !important;
    background: var(--dc-color-background-primary, #FFF) !important;
}

.upc-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.upc-form-group {
    display: flex;
    flex-direction: column;
}

.upc-form-group label {
    font-size: 16px;
    color: var(--dc-color-text-primary);
    margin-bottom: 8px;
    font-weight: 400;
    line-height: 24px;
}

.upc-form-group input {
    padding: 9px 16px;
    border: 1px solid #D6D6D6 !important;
    border-radius: 4px;
    font-size: 16px;
    color: var(--dc-color-text-primary, #333);
    font-weight: 400;
    line-height: 24px;
    transition: border-color 0.2s;
}

.upc-form-group input:focus {
    outline: none;
    border-color: #D6D6D6 !important;
}

.upc-form-group input::placeholder {
    color: #BBB !important;
    font-size: 16px !important;
    line-height: 24px !important;
    font-weight: 300 !important;
}

.upc-password-field {
    position: relative;
}

.upc-password-field input {
    width: 100%;
    padding-right: 40px;
    color: var(--dc-color-text-primary, #333);
    font-size: var(--typography-base-sizes-base-font-size, 16px);
    font-style: normal;
    font-weight: var(--font-weight-normal, 400);
    line-height: var(--typography-base-sizes-base-line-height, 24px);
    border: 1px solid #D6D6D6 !important;
}

.upc-password-field input:focus {
    border-color: #D6D6D6 !important;
}

.upc-toggle-password {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upc-toggle-password svg {
    width: 16px;
    height: 16px;
}

.upc-password-requirements {
    margin-top: 16px;
    padding: 16px;
    background: var(--dc-color-background-secondary);
    border-radius: 4px;
}

.upc-requirements-title {
    color: var(--dc-color-text-primary, #333);
    font-size: var(--typography-base-sizes-small-font-size, 14px);
    font-style: normal;
    font-weight: var(--font-weight-normal, 400);
    line-height: 100%;
    margin: 0 0 16px 0;
}

.upc-password-requirements ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.upc-password-requirements li {
    color: var(--dc-color-text-tertiary, #888) !important;
    font-size: var(--typography-base-sizes-small-font-size, 14px);
    font-style: normal;
    font-weight: var(--font-weight-normal, 400);
    line-height: 100%;
    margin-bottom: 8px;
    padding-left: 13px;
    position: relative;
}

.upc-password-requirements li:last-child {
    margin-bottom: 0;
}

.upc-password-requirements li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--dc-color-text-tertiary, #888);
}

.upc-form-actions {
    margin-top: 355px;
}

.upc-divider {
    display: none;
}

.upc-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    padding-top: 16px;
    border-top: 1px solid #eee;
}

.upc-btn-cancel,
.upc-btn-save {
    padding: 8px 24px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    cursor: pointer;
    transition: all 0.2s;
}

.upc-btn-cancel {
    border: 1px solid var(--dc-color-border-primary, #D6D6D6) !important;
    background: var(--dc-color-foreground-quaternary, #F5F5F5) !important;
    color: var(--dc-color-text-primary, #333) !important;
}

.upc-btn-cancel:hover {
    border: 1px solid var(--dc-color-border-brand-secondary, #A79EBF) !important;
    background: var(--dc-color-button-secondary-bg, #FFF) !important;
}

.upc-btn-cancel:active {
    border: 1px solid var(--dc-color-border-brand, #170057) !important;
    background: var(--dc-color-background-primary, #FFF) !important;
}

.upc-btn-save {
    background: var(--dc-color-foreground-primary, #170057) !important;
    color: var(--dc-color-text-white, #FFF) !important;
    border: none !important;
}

.upc-btn-save:hover {
    background: var(--dc-color-foreground-primary-subtle, #61528D) !important;
}

.upc-btn-save:active {
    background: linear-gradient(0deg, var(--dc-alpha-90, rgba(0, 0, 0, 0.10)) 0%, var(--dc-alpha-90, rgba(0, 0, 0, 0.10)) 100%), var(--dc-color-foreground-primary, #170057) !important;
    box-shadow: 0 0 1px var(--opacity-opacity-0, 0) var(--dc-color-foreground-tertiary, #ECEBF2) !important;
}

#company-info-form,
#change-password-form {
    padding-top: 24px;
}

@media (max-width: 768px) {
    .upc-return {
        display: flex !important;
        width: calc(100% - 40px) !important;
        margin: 0 20px 0 20px !important;
        background-color: #F9F9F9 !important;
        padding: 8px 0 !important;
        border: none !important;
        border-radius: 4px 4px 0 0 !important;
    }
    
    .upc-return.show-content {
        width: 100% !important;
        margin: 0 !important;
        padding: 8px 20px !important;
        border-radius: 0 !important;
    }
    
    .upc-container {
        display: flex !important;
        position: relative !important;
        overflow: hidden !important;
        width: calc(100% - 40px) !important;
        margin: 0 20px !important;
        padding: 0 !important;
        border-radius: 0 0 4px 4px !important;
    }
    
    .upc-container.show-content {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }
    
    .upc-sidebar,
    .upc-content {
        flex-shrink: 0 !important;
        width: 100% !important;
        min-width: 100% !important;
        transition: transform 0.3s ease-in-out !important;
        background: #FFFFFF !important;
    }
    
    .upc-sidebar {
        transform: translateX(0) !important;
        border-right: none !important;
        padding: 0 !important;
        min-height: 560px !important;
        border-radius: 0 0 4px 4px !important;
        overflow-y: auto !important;
    }
    
    .upc-content {
        transform: translateX(0) !important;
        padding: 20px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    
    .upc-container.show-content .upc-content {
        border-radius: 0 !important;
    }
    
    .upc-container.show-content .upc-sidebar {
        transform: translateX(-100%) !important;
    }
    
    .upc-container.show-content .upc-content {
        transform: translateX(-100%) !important;
    }
    
    .upc-tabs {
        display: flex !important;
        border-bottom: 1px solid var(--dc-color-border-primary) !important;
        margin-bottom: 24px !important;
    }
    
    .upc-tab {
        flex: 1 !important;
        padding: 8px 2px !important;
        background: #FFFFFF !important;
        border: 1px solid #eee !important;
        border-bottom: none !important;
        border-right: none !important;
        font-size: 16px !important;
        font-weight: 400 !important;
        line-height: 24px !important;
        color: #333 !important;
        cursor: pointer !important;
        transition: all 0.2s !important;
        text-align: center !important;
        white-space: normal !important;
        word-wrap: break-word !important;
    }
    
    .upc-tab:first-child {
        border-left: 1px solid #eee !important;
    }
    
    .upc-tab:last-child {
        border-right: 1px solid #eee !important;
    }
    
    .upc-tab:hover {
        background: #ECEBF2 !important;
        color: #170057 !important;
        font-weight: 500 !important;
    }
    
    .upc-tab.active {
        background: #ECEBF2 !important;
        color: #170057 !important;
        font-weight: 500 !important;
    }
    
    .upc-tab-content {
        padding: 0 !important;
        overflow: visible !important;
        height: auto !important;
    }
    
    .upc-menu-item {
        background: #FFFFFF !important;
        color: #333333 !important;
        border-left: none !important;
    }
    
    .upc-menu-item svg path {
        stroke: #888888 !important;
    }
    
    .upc-menu-item:hover,
    .upc-menu-item.active {
        background: var(--dc-color-background-tertiary) !important;
        color: var(--dc-color-foreground-primary) !important;
        border-left: 1px solid #170057 !important;
    }
    
    .upc-menu-item:hover svg path,
    .upc-menu-item.active svg path {
        stroke: var(--dc-color-foreground-primary) !important;
    }
    
    .upc-avatar-upload {
        padding: 0 0 28px 0 !important;
    }
    
    .upc-form-actions {
        margin-top: 30px !important;
    }
    
    .upc-buttons {
        display: flex !important;
        flex-direction: row !important;
        gap: 16px !important;
        justify-content: space-between !important;
    }
    
    .upc-btn-cancel,
    .upc-btn-save {
        flex: 1 !important;
        max-width: 50% !important;
        width: 50% !important;
    }
    
    .upc-form-row {
        grid-template-columns: 1fr !important;
    }
}

/* ========================================
   User Profile Center Styles
   ======================================== */

:root {
    --dc-color-foreground-primary: #170057;
    --dc-color-background-tertiary: #ECEBF2;
    --dc-color-background-secondary: #F5F5F5;
    --dc-color-border-primary: #eee;
    --dc-color-text-primary: #333333;
    --dc-color-text-secondary: #888888;
    --dc-color-text-tertiary: #BBBBBB;
}

.upc-container {
    display: flex;
    background: #FFFFFF;
    border: 1px solid var(--dc-color-border-primary);
    border-radius: 4px;
    overflow: hidden;
    min-height: 590px;
    position: relative;
}

.upc-return {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    background: #F9F9F9;
    border: none;
    cursor: pointer;
}

.upc-return span {
    color: var(--dc-color-text-primary, #333);
    font-size: var(--typography-base-sizes-small-font-size, 14px);
    font-style: normal;
    font-weight: var(--font-weight-medium, 500);
    line-height: var(--typography-base-sizes-small-line-height, 20px);
}

.upc-sidebar {
    width: 320px;
    background: #FFFFFF;
    border-right: 1px solid var(--dc-color-border-primary);
    padding: 0;
}

.upc-user-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 0;
    border-bottom: 1px solid #eee;
}

.upc-avatar-small {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 12px;
    display: none; /* PC端隐藏头像 */
}

.upc-user-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.upc-username {
    color: var(--dc-color-text-primary, #333);
    text-align: center;
    font-size: var(--typography-base-sizes-base-font-size, 16px);
    font-style: normal;
    font-weight: var(--font-weight-medium, 500);
    line-height: var(--typography-base-sizes-base-line-height, 24px);
    margin-bottom: 2px;
}

.upc-email {
    color: var(--dc-color-text-secondary, #707070);
    text-align: center;
    font-size: var(--typography-base-sizes-extra-small-font-size, 12px);
    font-style: normal;
    font-weight: var(--font-weight-normal, 400);
    line-height: var(--typography-base-sizes-extra-small-line-height, 16px);
}

.upc-menu {
    display: flex;
    flex-direction: column;
    padding: 24px 0 0 0;
}

.upc-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    text-decoration: none;
    color: var(--dc-color-text-secondary);
    font-size: 14px;
    border-radius: 0;
    transition: all 0.2s;
    background: #FFFFFF;
}

.upc-menu-item:hover {
    background: var(--dc-color-background-tertiary);
    color: var(--dc-color-foreground-primary);
}

.upc-menu-item:hover .upc-menu-icon-left path {
    stroke: var(--dc-color-foreground-primary);
}

.upc-menu-item:hover .upc-menu-icon-right path {
    stroke: var(--dc-color-foreground-primary);
}

.upc-menu-item.active {
    background: #F5F5F5;
    color: var(--dc-color-foreground-primary);
}

.upc-menu-item.active .upc-menu-icon-left path {
    stroke: var(--dc-color-foreground-primary);
}

.upc-menu-item.active .upc-menu-icon-right path {
    stroke: var(--dc-color-foreground-primary);
}

.upc-menu-item span {
    flex: 1;
}

.upc-menu-icon-left {
    width: 20px;
    height: 20px;
}

.upc-menu-icon-right {
    width: 16px;
    height: 16px;
}

.upc-content {
    width: 880px;
    display: flex;
    flex-direction: column;
    padding: 24px;
}

.upc-tabs {
    display: flex;
    border-bottom: 1px solid var(--dc-color-border-primary);
}

.upc-tab {
    flex: 1;
    padding: 8px 16px;
    background: #FFFFFF;
    border: 1px solid #eee;
    border-bottom: none;
    border-right: none;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #333;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    white-space: normal;
    word-wrap: break-word;
}

.upc-tab:first-child {
    border-left: 1px solid #eee;
}

.upc-tab:last-child {
    border-right: 1px solid #eee;
}

.upc-tab:hover {
    background: #ECEBF2;
    color: #170057;
    font-weight: 500;
}

.upc-tab.active {
    background: #ECEBF2;
    color: #170057;
    font-weight: 500;
}

.upc-tab-content {
    display: none;
    padding: 0;
}

.upc-tab-content.active {
    display: block;
}

.upc-avatar-upload {
    display: none; /* PC端隐藏头像上传 */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 0 28px 0;
    margin-bottom: 0;
}

.upc-avatar-large {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 16px;
}

.upc-upload-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 24px;
    border: 1px solid var(--dc-color-border-primary, #D6D6D6) !important;
    background: var(--dc-color-foreground-quaternary, #F5F5F5) !important;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: var(--dc-color-text-primary, #333) !important;
    cursor: pointer;
    transition: all 0.2s;
}

.upc-upload-btn:hover {
    border: 1px solid var(--dc-color-border-brand-secondary, #A79EBF) !important;
    background: var(--dc-color-button-secondary-bg, #FFF) !important;
}

.upc-upload-btn:active {
    border: 1px solid var(--dc-color-border-brand, #170057) !important;
    background: var(--dc-color-background-primary, #FFF) !important;
}

.upc-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.upc-form-group {
    display: flex;
    flex-direction: column;
}

.upc-form-group label {
    font-size: 16px;
    color: var(--dc-color-text-primary);
    margin-bottom: 8px;
    font-weight: 400;
    line-height: 24px;
}

.upc-form-group input {
    padding: 9px 16px;
    border: 1px solid #D6D6D6 !important;
    border-radius: 4px;
    font-size: 16px;
    color: var(--dc-color-text-primary, #333);
    font-weight: 400;
    line-height: 24px;
    transition: border-color 0.2s;
}

.upc-form-group input:focus {
    outline: none;
    border-color: #D6D6D6 !important;
}

.upc-form-group input::placeholder {
    color: #BBB !important;
    font-size: 16px !important;
    line-height: 24px !important;
    font-weight: 300 !important;
}

.upc-password-field {
    position: relative;
}

.upc-password-field input {
    width: 100%;
    padding-right: 40px;
    color: var(--dc-color-text-primary, #333);
    font-size: var(--typography-base-sizes-base-font-size, 16px);
    font-style: normal;
    font-weight: var(--font-weight-normal, 400);
    line-height: var(--typography-base-sizes-base-line-height, 24px);
    border: 1px solid #D6D6D6 !important;
}

.upc-password-field input:focus {
    border-color: #D6D6D6 !important;
}

.upc-toggle-password {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upc-toggle-password svg {
    width: 16px;
    height: 16px;
}

.upc-password-requirements {
    margin-top: 16px;
    padding: 16px;
    background: var(--dc-color-background-secondary);
    border-radius: 4px;
}

.upc-requirements-title {
    color: var(--dc-color-text-primary, #333);
    font-size: var(--typography-base-sizes-small-font-size, 14px);
    font-style: normal;
    font-weight: var(--font-weight-normal, 400);
    line-height: 100%;
    margin: 0 0 16px 0;
}

.upc-password-requirements ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.upc-password-requirements li {
    color: var(--dc-color-text-tertiary, #888) !important;
    font-size: var(--typography-base-sizes-small-font-size, 14px);
    font-style: normal;
    font-weight: var(--font-weight-normal, 400);
    line-height: 100%;
    margin-bottom: 8px;
    padding-left: 13px;
    position: relative;
}

.upc-password-requirements li:last-child {
    margin-bottom: 0;
}

.upc-password-requirements li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--dc-color-text-tertiary, #888);
}

.upc-form-actions {
    margin-top: 355px;
}

.upc-divider {
    display: none;
}

.upc-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    padding-top: 16px;
    border-top: 1px solid #eee;
}

.upc-btn-cancel,
.upc-btn-save {
    padding: 8px 24px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    cursor: pointer;
    transition: all 0.2s;
}

.upc-btn-cancel {
    border: 1px solid var(--dc-color-border-primary, #D6D6D6) !important;
    background: var(--dc-color-foreground-quaternary, #F5F5F5) !important;
    color: var(--dc-color-text-primary, #333) !important;
}

.upc-btn-cancel:hover {
    border: 1px solid var(--dc-color-border-brand-secondary, #A79EBF) !important;
    background: var(--dc-color-button-secondary-bg, #FFF) !important;
}

.upc-btn-cancel:active {
    border: 1px solid var(--dc-color-border-brand, #170057) !important;
    background: var(--dc-color-background-primary, #FFF) !important;
}

.upc-btn-save {
    background: var(--dc-color-foreground-primary, #170057) !important;
    color: var(--dc-color-text-white, #FFF) !important;
    border: none !important;
}

.upc-btn-save:hover {
    background: var(--dc-color-foreground-primary-subtle, #61528D) !important;
}

.upc-btn-save:active {
    background: linear-gradient(0deg, var(--dc-alpha-90, rgba(0, 0, 0, 0.10)) 0%, var(--dc-alpha-90, rgba(0, 0, 0, 0.10)) 100%), var(--dc-color-foreground-primary, #170057) !important;
    box-shadow: 0 0 1px var(--opacity-opacity-0, 0) var(--dc-color-foreground-tertiary, #ECEBF2) !important;
}

form#basic-info-form {
    padding-top: 24px;
}

#company-info .upc-form-actions {
    margin-top: 180px;
}

#change-password .upc-form-actions {
    margin-top: 192px;
}

#company-info-form,
#change-password-form {
    padding-top: 24px;
}

@media (max-width: 768px) {
    .upc-return {
        display: flex !important;
        width: calc(100% - 40px) !important;
        margin: 0 20px 0 20px !important;
        background-color: #F9F9F9 !important;
        padding: 8px 0 !important;
        border: none !important;
        border-radius: 4px 4px 0 0 !important;
    }
    
    .upc-return.show-content {
        width: 100% !important;
        margin: 0 !important;
        padding: 8px 20px !important;
        border-radius: 0 !important;
    }
    
    .upc-container {
        display: flex !important;
        position: relative !important;
        overflow: hidden !important;
        width: calc(100% - 40px) !important;
        margin: 0 20px !important;
        padding: 0 !important;
        border-radius: 0 0 4px 4px !important;
    }
    
    .upc-container.show-content {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }
    
    .upc-sidebar,
    .upc-content {
        flex-shrink: 0 !important;
        width: 100% !important;
        min-width: 100% !important;
        transition: transform 0.3s ease-in-out !important;
        background: #FFFFFF !important;
    }
    
    .upc-sidebar {
        transform: translateX(0) !important;
        border-right: none !important;
        padding: 0 !important;
        min-height: 560px !important;
        border-radius: 0 0 4px 4px !important;
        overflow-y: auto !important;
    }
    
    .upc-content {
        transform: translateX(0) !important;
        padding: 20px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    
    .upc-container.show-content .upc-content {
        border-radius: 0 !important;
    }
    
    .upc-container.show-content .upc-sidebar {
        transform: translateX(-100%) !important;
    }
    
    .upc-container.show-content .upc-content {
        transform: translateX(-100%) !important;
    }
    
    .upc-tabs {
        display: flex !important;
        border-bottom: 1px solid var(--dc-color-border-primary) !important;
        margin-bottom: 24px !important;
    }
    
    .upc-tab {
        flex: 1 !important;
        padding: 8px 2px !important;
        background: #FFFFFF !important;
        border: 1px solid #eee !important;
        border-bottom: none !important;
        border-right: none !important;
        font-size: 16px !important;
        font-weight: 400 !important;
        line-height: 24px !important;
        color: #333 !important;
        cursor: pointer !important;
        transition: all 0.2s !important;
        text-align: center !important;
        white-space: normal !important;
        word-wrap: break-word !important;
    }
    
    .upc-tab:first-child {
        border-left: 1px solid #eee !important;
    }
    
    .upc-tab:last-child {
        border-right: 1px solid #eee !important;
    }
    
    .upc-tab:hover {
        background: #ECEBF2 !important;
        color: #170057 !important;
        font-weight: 500 !important;
    }
    
    .upc-tab.active {
        background: #ECEBF2 !important;
        color: #170057 !important;
        font-weight: 500 !important;
    }
    
    .upc-tab-content {
        padding: 0 !important;
        overflow: visible !important;
        height: auto !important;
    }
    
    .upc-menu-item {
        background: #FFFFFF !important;
        color: #333333 !important;
        border-left: none !important;
    }
    
    .upc-menu-item svg path {
        stroke: #888888 !important;
    }
    
    .upc-menu-item:hover,
    .upc-menu-item.active {
        background: var(--dc-color-background-tertiary) !important;
        color: var(--dc-color-foreground-primary) !important;
        border-left: 1px solid #170057 !important;
    }
    
    .upc-menu-item:hover svg path,
    .upc-menu-item.active svg path {
        stroke: var(--dc-color-foreground-primary) !important;
    }
    
    .upc-avatar-upload {
        padding: 0 0 28px 0 !important;
    }
    
    .upc-form-actions {
        margin-top: 30px !important;
    }
    
    .upc-buttons {
        display: flex !important;
        flex-direction: row !important;
        gap: 16px !important;
        justify-content: space-between !important;
    }
    
    .upc-btn-cancel,
    .upc-btn-save {
        flex: 1 !important;
        max-width: 50% !important;
        width: 50% !important;
    }
    
    .upc-form-row {
        grid-template-columns: 1fr !important;
    }
}

/* Hide Edge/IE browser's default password reveal button */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none !important;
}

/* Override theme padding for password fields to prevent overlap with SVG */
.upc-password-field input {
    padding: 9px 40px 9px 16px !important;
}

/* Stronger override for theme padding - prevent password input overlap with SVG icon */
.upc-content .upc-password-field input[type="password"],
.upc-tab-content .upc-password-field input[type="password"] {
    padding: 9px 40px 9px 16px !important;
}

/* Override theme icon size for menu icons - Force 20x20 */
.upc-menu-icon-left,
.upc-menu-icon-left.ct-icon,
svg.upc-menu-icon-left.ct-icon,
.ct-icon.upc-menu-icon-left {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
}


/* Mobile: Change Password tab text to Billing Info */
@media (max-width: 768px) {
    .upc-tab[data-content="change-password"] {
        font-size: 0 !important;
        line-height: 0 !important;
    }
    
    .upc-tab[data-content="change-password"]::before {
        content: "Billing Info" !important;
        font-size: 16px !important;
        font-weight: 400 !important;
        line-height: 24px !important;
        display: inline-block !important;
        vertical-align: middle !important;
    }
    
    .upc-tab[data-content="change-password"].active::before,
    .upc-tab[data-content="change-password"]:hover::before {
        font-weight: 500 !important;
    }
    
    /* Mobile UPC placeholder font weight override */
    .upc-form-group input::placeholder {
        font-weight: 400 !important;
    }
}

/* ============================================
   阿里云滑块验证码自定义样式
   ============================================ */

/* 验证码弹窗容器 */
#aliyunCaptcha-window-popup,
.aliyunCaptcha-window-popup {
    background: #FFFFFF !important;
    border-radius: 16px !important;
    padding: 32px !important;
    box-shadow: 0 8px 24px rgba(24, 0, 87, 0.12) !important;
    border: none !important;
}

/* 弹窗顶部区域 - 使用flexbox布局 */
#aliyunCaptcha-top,
.aliyunCaptcha-top {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 32px !important;
    width: 100% !important;
}

/* 标题文字 */
#aliyunCaptcha-title {
    color: #180057 !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    text-align: left !important;
    order: 1 !important;
}

/* 关闭按钮容器 */
#aliyunCaptcha-option {
    order: 2 !important;
    display: flex !important;
    align-items: center !important;
}

/* 关闭按钮 */
#aliyunCaptcha-btn-close,
button#aliyunCaptcha-btn-close {
    width: 14px !important;
    height: 14px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    position: relative !important;
}

/* 关闭按钮悬停 */
#aliyunCaptcha-btn-close:hover {
    opacity: 0.7 !important;
}

/* 滑块容器 */
#aliyunCaptcha-sliding-wrapper,
.aliyunCaptcha-sliding-wrapper {
    border-radius: 8px !important;
    overflow: hidden !important;
}

/* 滑块主体 */
#aliyunCaptcha-sliding-body {
    background: #F5F5F5 !important;
    border: 1px solid #E5E5E5 !important;
    border-radius: 8px !important;
    height: 48px !important;
    position: relative !important;
}

/* 滑块左侧填充 */
#aliyunCaptcha-sliding-left {
    background: #180057 !important;
    opacity: 0.1 !important;
}

/* 滑块按钮 */
#aliyunCaptcha-sliding-slider {
    background: #180057 !important;
    border-radius: 8px !important;
    width: 48px !important;
    height: 48px !important;
    box-shadow: 0 2px 8px rgba(24, 0, 87, 0.2) !important;
    border: none !important;
}

/* 滑块按钮悬停 */
#aliyunCaptcha-sliding-slider:hover {
    background: #2a0080 !important;
}

/* 滑块提示文字 */
#aliyunCaptcha-sliding-text,
.aliyunCaptcha-sliding-text {
    color: #666666 !important;
    font-size: 14px !important;
}

/* 验证成功状态 */
#aliyunCaptcha-window-popup.success #aliyunCaptcha-sliding-body,
#aliyunCaptcha-sliding-body.success {
    background: #F0FDF4 !important;
    border-color: #22C55E !important;
}

#aliyunCaptcha-window-popup.success #aliyunCaptcha-sliding-slider,
#aliyunCaptcha-sliding-slider.success {
    background: #22C55E !important;
}

/* 验证失败状态 */
#aliyunCaptcha-window-popup.fail #aliyunCaptcha-sliding-body,
#aliyunCaptcha-sliding-body.fail {
    background: #FEF2F2 !important;
    border-color: #EF4444 !important;
}

/* 错误提示 */
#aliyunCaptcha-sliding-failTip {
    color: #EF4444 !important;
    font-size: 12px !important;
    margin-top: 8px !important;
}

/* 遮罩层 */
.aliyunCaptcha-mask,
#aliyunCaptcha-mask {
    background: rgba(0, 0, 0, 0.5) !important;
}

/* 适配移动端 */
@media (max-width: 768px) {
    #aliyunCaptcha-window-popup,
    .aliyunCaptcha-window-popup {
        padding: 24px !important;
        margin: 0 16px !important;
    }
    
    #aliyunCaptcha-top,
    .aliyunCaptcha-top {
        margin-bottom: 24px !important;
    }
    
    #aliyunCaptcha-title {
        font-size: 18px !important;
    }
    
    #aliyunCaptcha-sliding-body {
        height: 44px !important;
    }
    
    #aliyunCaptcha-sliding-slider {
        width: 44px !important;
        height: 44px !important;
    }
}

/* 兼容旧版本的nc-前缀样式（如果存在） */
.nc-container,
#nc-container {
    background: #FFFFFF !important;
    border-radius: 16px !important;
    padding: 32px !important;
    box-shadow: 0 8px 24px rgba(24, 0, 87, 0.12) !important;
}

.nc-lang-cnt {
    color: #180057 !important;
    font-size: 20px !important;
    font-weight: 600 !important;
}

.nc-background {
    background: #F5F5F5 !important;
    border: 1px solid #E5E5E5 !important;
    border-radius: 8px !important;
    height: 48px !important;
}

.nc-slidebar {
    background: #180057 !important;
    border-radius: 8px !important;
    height: 48px !important;
}

/* 面包屑导航样式 */
.upc-breadcrumb {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 0 0 16px 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    background: none;
}

.upc-breadcrumb-item {
    color: #BBBBBB;
    text-decoration: none;
    transition: color 0.2s;
}

.upc-breadcrumb-item:hover {
    color: #888888;
}

.upc-breadcrumb-current {
    color: #170057;
    font-weight: 500;
}

.upc-breadcrumb-separator {
    color: #BBBBBB;
}

/* 768px以上显示面包屑 */
@media (min-width: 769px) {
    .upc-breadcrumb {
        display: flex;
    }
    
    .upc-return {
        display: none;
    }
}

/* 768px以下隐藏面包屑，显示返回按钮 */
@media (max-width: 768px) {
    .upc-breadcrumb {
        display: none;
    }
    
    /* 移动端菜单去掉active样式 */
    .upc-menu-item.active {
        background: #FFFFFF !important;
        color: #333333 !important;
        border-left: none !important;
    }
    
    .upc-menu-item.active svg path {
        stroke: #888888 !important;
    }
}